Unhide Marketo Form Fields populated with URL Parameters

[Anonymous]

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: http://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?

[SanfordWhiteman]

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.

[Anonymous]

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 · Accepted solution]

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.

[Anonymous]

Thanks so much! I update the URL referencing my Marketo instance and the form. Works like a charm:

http://www3.sungevity.com/Modernize.html?first=FirstNameTest&last=LastNameTest&address=AddressTest&c...

No, onto the design. Thanks again! I appreciate you taking the time to provide such comprehensive help.

[Harvey_Jewell2]

Hi Sanford Whiteman, thanks for these recommendations!

I'm able to get your form working on my instance but can't get my own form...

All field names look they are matched but ?=first and/or ?last= just won't show

Is there something straightforward i'm missing here?

http://resources.ean.com/test-unhide.html

Thanks very much!

[SanfordWhiteman]

Looks like you're missing the CSS from the original Fiddle, so the hide/unhide classes are being added but they aren't having an effect.

[Harvey_Jewell2]

Thanks Sanford! Despite adding the styling direct to the form template, the unhide still doesnt seem to show.

http://resources.ean.com/test-unhide?first=test&last=test

Any other thoughts? I can see both first and last name have a value, but just won't show

You can also my setup in this fiddle: https://codepen.io/anon/pen/bRZLNr

Thanks in advance!

[SanfordWhiteman]

You don't add the conditionally hidden fields as the Hidden type in Form Editor. Add them with their regular field type (i.e. Text).  That's why they're staying hidden, because they are literally input[type=hidden] now.

[Harvey_Jewell2]

Thanks very much Sanford!