Autofill form fields based on button click

[Allison_Quirk]

Hi everyone, 

I have a use case I was wondering if anyone has ever tried before. We have some recurring webinars we run weekly. We have a page up with the descriptions of the 6 webinars, and buttons to go sign up for each. Rather than creating 6 different signup pages with 6 different forms, I was wondering if I could dynamically check the box for the right webinar on the form. ie if I click through the button to sign up for "Introduction to the Product" when I get to the next page the checkbox for "Introduction to the Product" will already be checked. They will then just need to fill out the rest of their information. I was thinking maybe I could do this with a hidden utm passing through the url? Any better ways to do this?

Thanks in advance!  😊

[SanfordWhiteman]

 I was thinking maybe I could do this with a hidden utm passing through the url? Any better ways to do this?

It's not a "hidden" UTM if it's (a) in the URL and (b) ends up populating a visible field, eh? 🙂

Definitely possible to pass values in the URL for visible fields, just reuse the JS from here: 

MktoForms2 :: KV HTML w/Auto-Fill and Cascade v1.1.1

Download the FormsPlus JS library from here and upload it to your Design Studio. Then reference it in the first <script src> below.

<script id="teknklFormsPlus-Util-1.0.5" src="//pages.example.com/path/to/formsplus-1.0.5.js"></script>
<script>
MktoForms2.whenReady(function(form) {
   
   var fieldFillRules = [      
      {
         name : "Webinar_Date__c",
         channel: "query",
         selector: "preselected_webinar"
      }
   ];

   /* — NO NEED TO EDIT BELOW THIS LINE! — */

   var liveChannels = {
       cookie : FormsPlus.util.Cookies.get(),
       query : FormsPlus.util.URI.URI().search(true),
       referrerQuery : FormsPlus.util.URI.URI(document.referrer).search(true)      
   };
  
   var mktoFields = fieldFillRules
         .reduce(function(acc, fieldDescriptor) { 
            if( !acc[fieldDescriptor.name] ){
              acc[fieldDescriptor.name] = fieldDescriptor.channel == “constant”
               ? fieldDescriptor.selector
               : liveChannels[fieldDescriptor.channel][fieldDescriptor.selector];
            }
            
            return acc;
         }, {});

   form.addHiddenFields(mktoFields);
});
</script>

The config section is the only part you'd touch, I've suggested here the query param

preselected_webinar 

will fill the form field

Webinar_Date__c