Unhide Marketo Form Fields populated with URL Parameters | Community
Skip to main content
A
Anonymous
October 5, 2016
Solved

Unhide Marketo Form Fields populated with URL Parameters

  • October 5, 2016
  • 1 reply
  • 6020 views

Hello Marketo community,

I'm trying to modify the input type for several hidden fields on the following page when the page loads by using the following jquery to modify the input type from hidden to text. There are other fields with an input type that needs to be updated to select too.

Landing page: www3.sungevity.com/Modernize.html​​?FirstName=Test

<script>

jQuery(document).ready(function(){

     jQuery('input[name="FirstName"]').prop('type', 'text'); })

</script>

I've tested this with FirstName, one of the currently hidden fields, but no updates are taking effect. Any ideas?

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

No reason to reinvent the wheel of URI parsing (you'll always miss corner cases, so that's why we go with a trusted library).

This is the approach:

MktoForms2 :: DIY Hidden AutoFill​

In action: http://s.codepen.io/figureone/debug/wzykGJ?first=Daniel&last=Mandel

Note a couple of frills I added: you can map multiple query params to the same form field; set the field to read-only if you want it displayed, but not editable; and fill it in without unhiding it.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
October 5, 2016

Posted an example of how to do this a long time ago: http://codepen.io/figureone/pen/MwYdgZ?editors=0010

I probably would use a slightly tighter approach now, but I don't recommend it in any case. As you can see, reintegrating unhidden fields properly is not as simple as changing the type attribute, because hidden fields aren't styled the same way.  It's a lot of work that can be better spent on something else.

Instead, work from the other direction.  What hidden field AutoFill is doing is just calling form.addHiddenFields() with parsed URL data.  You can do the same thing even better by using non-hidden fields and including a stable URL parser (I highly recommend URI.js).  Hide the relevant field wrappers using CSS. Then unhide the ones that get data from the URL.  It's a much smoother experience.

A
Anonymous
October 7, 2016

Thanks for your suggestion, Sanford. I'm tracking with you recommendation to hide vs. unhide the fields that are populated via the URL parameters, but I'm having trouble parsing the URL parameters into the fields to start.

I've attempted to parse the URL through the following code, but still not success and I'm not following the implementation requirements for URl.js. If you have any feedback, I'd greatly appreciate it.

<script type="text/javascript">

var $jQ = jQuery.noConflict();

$jQ(document).ready(function () {       

    var query = document.location.search.replace('?', '');   

    query = query.split('&');  

    for (var i = 0; i < query.length; i++) {

      var field = query[i].split("=");

      $jQ("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]);

    }

  });

</script>

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
October 8, 2016

No reason to reinvent the wheel of URI parsing (you'll always miss corner cases, so that's why we go with a trusted library).

This is the approach:

MktoForms2 :: DIY Hidden AutoFill​

In action: http://s.codepen.io/figureone/debug/wzykGJ?first=Daniel&last=Mandel

Note a couple of frills I added: you can map multiple query params to the same form field; set the field to read-only if you want it displayed, but not editable; and fill it in without unhiding it.

Terms & ConditionsAccessibility statement

Loading footer...