Hiding form field option based on landing page

Anonymous
Not applicable

Hiding form field option based on landing page

I am trying to simplify things and take all of our forms down to one.  I was wondering if anyone knew of a script or a way to make an embedded form now which page it was on so that a drop down box would display different values based on that page URL?

Example:

Web Page A

Form Product Drop-down: Product 1 | Product 2 | Product 3

Web Page B

Form Product Drop-down: Product 4 | Product 5 | Product 6

Tags (2)
10 REPLIES 10
John_Clark1
Level 10

Re: Hiding form field option based on landing page

Hi Mike,

You should be able to do this with a hidden field on your form.  You would need to have some code that would grab values from the url and place them in the hidden field, and then you could base the values of the drop down on what was in that field.

Dynamically Toggle Visibility of a Form Field - Marketo Docs - Product Docs

Example 3 on this page has some code that could set the field value.  Forms 2.0 » Marketo Developers

John

Anonymous
Not applicable

Re: Hiding form field option based on landing page

Thanks John, but I have no control over the url - it is based on our corporate website. So doing a url parameter, etc is not an option; and to have the set field value script in with the embedded code form would not work because I have one form that is on different pages requiring different field values. I am not even a JS beginner, so if I am talking out of my @$$ just let me know, but I have tried everything I know with manipulating Forms 2.0.

John_Clark1
Level 10

Re: Hiding form field option based on landing page

Hi Mike,

What I'm thinking is that if there are a set of urls that your form would sit on, and those urls all have a common domain or title, like www.product1.com/page1, www.product1.com/page2, and all of the values in your form would be the same for these pages, but different for another set of pages like www.product2.com/page1, then you could have the hidden field populated with the url and just tell the drop down field "If (Hidden Field) contains "product1" > Show these values", "If (Hidden Field) contast "product2" > Show these other values".

This way it doesn't matter where your form sits.  Yes, you'd need to get some help to implement the code to populate your hidden field with the url of whatever page your form was on, but once that was done you could use the visibility rules to hide/show any values you chose all. day. long.

Does that make sense?

John

Anonymous
Not applicable

Re: Hiding form field option based on landing page

Thanks, John.  Another wrench to throw into it - I do not have access to the site header or styling sheet, so adding a script to the page(s) themselves is not an option.  Is it possible to add a script info to the embed code itself to make this happen.  The Hidden Field data on the Forms 2.0 docs is about pushing the data once the form is submitted, I would need it once the web page is loaded.

Possible?

SanfordWhiteman
Level 10 - Community Moderator

Re: Hiding form field option based on landing page

Mike, if you can send the developer a customized embed code, you can certainly put the function in there (the 4th argument to MktoForms2.loadForm).

Anonymous
Not applicable

Re: Hiding form field option based on landing page

And how would that code look?

SanfordWhiteman
Level 10 - Community Moderator

Re: Hiding form field option based on landing page

MktoForms2.loadForm("//app-aabb.marketo.com", "XXX-YYY-ZZZ", 123, function(form) {                              

    form.setValues({

          'LastFormHostPage': document.location.hostname + document.location.pathname

     });                      

});

Kenny_Elkington
Marketo Employee

Re: Hiding form field option based on landing page

I think this script should work.  You'll need jQuery on the page as well:

This script will check your page URL and hide a particular form field if it matches, but it doesn't do what Mike wanted.

var fieldName = "yourFieldName";
var myUrl = "yourPageUrl";
MktoForms2.whenReady(function(form){
      var formInputs = document.getElementsByTagName("input");
      if (document.location == myUrl){
           for(var i = 0; i < formInputs.length; i++){
                var name = formInputs[i].getAttribute(fieldName);
                if (name == fieldName){
                     $(formInputs[i]).hide();
                }
           }
      }
})

Edit: First sample wasn't quite correct

SanfordWhiteman
Level 10 - Community Moderator

Re: Hiding form field option based on landing page

I dunno, I thought the OP was looking for having different OPTION lists show within the same SELECT based on the current URL. If you only have one SELECT field in the form (and you can only add it once in the form editor) then looping over INPUT/SELECT/TEXTAREAs won't do the trick.  You have to loop over OPTIONs.

John's solution would work because you only have to add the field once to the form and can render a different list of OPTIONs based on Visibility Rules.

If there are two different Marketo custom fields (Product List 1, Product List 2) then using VRs is even easier.