SOLVED

Form : preselect a value within a picklist based on referring URL

Go to solution
Highlighted

Form : preselect a value within a picklist based on referring URL

Hi community,

I am wondering if it is possible to preselect a specific value within a form picklist based on the URL which led to the form.

For example, if I have a form asking the contact to choose the type of product he is interested in : "HR", "INDUSTRY", "CPA" etc.

Can I  automatically display the value "INDUSTRY" if the previous visited page is or contains www.mywebsite.com/industry ?

Your inputs are welcome. Thanks for your help.

Mathias.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: Form : preselect a value within a picklist based on referring URL

MktoForms2.whenReady(function(form){

     var referrerTypeTable = {

          'INDUSTRY' : [/www\.mywebsite\.com\/industry/],

          'HR' : [/www\.mywebsite\.com\/hr/,/www\.mywebsite\.com\/humanresources/],

     };

     Object.keys(referrerTypeTable).forEach(function(type){

          referrerTypeTable[type].forEach(function(pattern){

               if (pattern.test(document.referrer)) {

                    form.setValues({'ProductType':type});

               }

          });

     });

    

});

View solution in original post

11 REPLIES 11
Highlighted
Anonymous
Not applicable

Re: Form : preselect a value within a picklist based on referring URL

You can prefill for one value but to make a choice you will need to use Javascript on the page to get it done

Highlighted
Level 10 - Community Moderator

Re: Form : preselect a value within a picklist based on referring URL

MktoForms2.whenReady(function(form){

     var referrerTypeTable = {

          'INDUSTRY' : [/www\.mywebsite\.com\/industry/],

          'HR' : [/www\.mywebsite\.com\/hr/,/www\.mywebsite\.com\/humanresources/],

     };

     Object.keys(referrerTypeTable).forEach(function(type){

          referrerTypeTable[type].forEach(function(pattern){

               if (pattern.test(document.referrer)) {

                    form.setValues({'ProductType':type});

               }

          });

     });

    

});

View solution in original post

Highlighted

Re: Form : preselect a value within a picklist based on referring URL

Hi Sanford,

Thanks a lot for the example.

I try to apply this JS to my form. When I try, I know that the targeted field is impacted, but the requested value is not displayed, the field just goes blank (instead of showing by default the "Please choose your product").

Did I miss something ? Below the coding I used. Thanks again for your input.

  1. MktoForms2.loadForm("//app-lon04.marketo.com", "818-MJH-876",2630);
  2. MktoForms2.whenReady(function(form){
  3.     var referrerTypeTable = {
  4.           ' Manufacturing Industry ' : [/go\.cegid\.com\/industry/],
  5.           ' HR ' : [/go\.cegid\.com\/hr/],
  6.     };
  7.     Object.keys(referrerTypeTable).forEach(function(type){
  8.           referrerTypeTable[type].forEach(function(pattern){
  9.               if (pattern.test(document.referrer)) {
  10.                     form.setValues({ 'expertise_c' :type});
  11.               }
  12.           });
  13.     });
  14. });
Highlighted
Level 10 - Community Moderator

Re: Form : preselect a value within a picklist based on referring URL

You inserted extra spaces that aren't in my code nor in your form.

     ' HR '

isn't the same as

     'HR'

Highlighted

Re: Form : preselect a value within a picklist based on referring URL

Simple as that, I looke into everything expect that.... Thanks a lot Sanford, once again.

I allow myself to ask one more question : if I want to preselect two fields at the same time, based on the same conditions (url regex), how does it affect the Javascript ?

Thanks again, this is not the first time that you help me, and you are very precious when it comes to understand javascript.

Highlighted
Level 10 - Community Moderator

Re: Form : preselect a value within a picklist based on referring URL

First, the SELECT has to allow multiple selections.

Then:

var referrerTypeTable = {

   'Manufacturing Industry' : [/go\.cegid\.com\/industry/],

   'HR' : [/go\.cegid\.com\/hr/]

};

var matchedTypes = Object.keys(referrerTypeTable).filter(function(type){

   return referrerTypeTable[type].some(function(pattern){

     return pattern.test(document.referrer);

   });

});

form.setValues({ 'expertise_c' : matchedTypes.join(';') });

Highlighted

Re: Form : preselect a value within a picklist based on referring URL

Thanks Sanford.

My question wasn't well built : I was thinking about selecting two values within two different fields (for example preselecting at once the "type of request" and "type of product" ).

Anyway thanks for the above coding, I will use it in another form !

Highlighted
Level 10 - Community Moderator

Re: Form : preselect a value within a picklist based on referring URL

function testPattern(str,patternTable){

var matchedTypes = Object.keys(patternTable).filter(function(type){  

   return patternTable[type].some(function(pattern){ 

     return pattern.test(str); 

   }); 

});

return matchedTypes.join(';');

}

var productTypeTable = {  

   'Manufacturing Industry' : [/go\.cegid\.com\/industry/], 

   'HR' : [/go\.cegid\.com\/hr/] 

};

var someOtherFieldTable = {  

   'Football' : [/go\.cegid\.com\/football/,/go\.cegid\.com\/footy/]

};

form.setValues({

  'expertise_c': testPattern(document.referrer, productTypeTable),

  'SomeOtherField': testPattern(document.referrer, someOtherFieldTable)

});

Highlighted

Re: Form : preselect a value within a picklist based on referring URL

Got it ! Much appreciated Sanford !