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.
Solved! Go to Solution.
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});
}
});
});
});
You can prefill for one value but to make a choice you will need to use Javascript on the page to get it done
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});
}
});
});
});
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.
You inserted extra spaces that aren't in my code nor in your form.
' HR '
isn't the same as
'HR'
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.
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(';') });
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 !
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)
});
Got it ! Much appreciated Sanford !