Hiding form field option based on landing page | Community
Skip to main content
October 14, 2015
Question

Hiding form field option based on landing page

  • October 14, 2015
  • 2 replies
  • 3694 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Adobe Employee
October 14, 2015

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

October 14, 2015

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.

Adobe Employee
October 14, 2015

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

Kenny_Elkington
Adobe Employee
Adobe Employee
October 15, 2015

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
October 15, 2015

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.

Kenny_Elkington
Adobe Employee
Adobe Employee
October 15, 2015

Yeah, you're right, I misunderstood the ask.