How do I go about adding a opt-in checkbox for known visitor form. | Community
Skip to main content
Michael_Bollig
Michael_Bollig
New Participant
June 11, 2020
Solved

How do I go about adding a opt-in checkbox for known visitor form.

  • June 11, 2020
  • 1 reply
  • 4838 views

Hello everyone!

Hopefully, someone knows the solution to this, or could at least lead me in the right direction.

We have forms throughout our website whether that be webinars/promos etc. What we want to do is have a "known visitor" form if they've filled out one of our forms in the past. Since there is GDPR want to make sure we're covered by adding an opt-in checkbox for email. I read a few discussions already and seemed to still be having issues trying to get this to work in the way I want.

 

So we have this regular form:

 

What we want to happen is more like this once we know they're a "known visitor" (yes, I photoshopped this haha): 

If anyone can help with this, I'd be forever grateful! 

 

Thank you for your time and effort 😄

-Michael

    Best answer by SanfordWhiteman

    You can add an <input type="checkbox" name="yourFieldName"> to the KV HTML and style it however you want. Make sure to use the form field name, which is the same as the SOAP name of the field. (You can export your fields from Admin » Field Management.)

     

    The only hitch is that the KV HTML won't recognize the field until you add this JS:

    MktoForms2.whenReady(function(form){ var addlKVCheckboxes = ["yourFieldName"]; /* --- NO NEED TO TOUCH BELOW THIS LINE --- */ var formEl = form.getFormElem()[0], submitButtonEl = formEl.querySelector("button"); submitButtonEl.type = "button"; submitButtonEl.addEventListener("click",form.submit); form.onSubmit(function(form){ var mktoFieldsObj = {}; addlKVCheckboxes.forEach(function(fieldName){ var fieldEl = formEl.querySelector("input[type='checkbox'][name='" + fieldName + "']"); mktoFieldsObj[fieldName] = fieldEl.checked ? "yes" : "no"; }); form.addHiddenFields(mktoFieldsObj); }); });

     

    yourFieldName of course is your field name. You can add as many multiple checkboxes to the KV HTML, just add them to the addlKVCheckboxes array as needed. And this whole thing can be made more generic for other field types, but for now this will do.

    1 reply

    SanfordWhiteman
    SanfordWhitemanAccepted solution
    New Participant
    June 11, 2020

    You can add an <input type="checkbox" name="yourFieldName"> to the KV HTML and style it however you want. Make sure to use the form field name, which is the same as the SOAP name of the field. (You can export your fields from Admin » Field Management.)

     

    The only hitch is that the KV HTML won't recognize the field until you add this JS:

    MktoForms2.whenReady(function(form){ var addlKVCheckboxes = ["yourFieldName"]; /* --- NO NEED TO TOUCH BELOW THIS LINE --- */ var formEl = form.getFormElem()[0], submitButtonEl = formEl.querySelector("button"); submitButtonEl.type = "button"; submitButtonEl.addEventListener("click",form.submit); form.onSubmit(function(form){ var mktoFieldsObj = {}; addlKVCheckboxes.forEach(function(fieldName){ var fieldEl = formEl.querySelector("input[type='checkbox'][name='" + fieldName + "']"); mktoFieldsObj[fieldName] = fieldEl.checked ? "yes" : "no"; }); form.addHiddenFields(mktoFieldsObj); }); });

     

    yourFieldName of course is your field name. You can add as many multiple checkboxes to the KV HTML, just add them to the addlKVCheckboxes array as needed. And this whole thing can be made more generic for other field types, but for now this will do.

    Michael_Bollig
    Michael_BolligAuthor
    New Participant
    June 12, 2020

    @sanfordwhiteman Thank you for this!

     

    I got this all working fine now. Would you be able to help me figure out how to make the checkbox a required field? I know it can be as simple as adding  ".required = true;" on the appropriate variable. I'm just not sure how to do it in this situation. 

     

    We just want to make it where the person has to click the checkbox to submit the form.

     
     

    Thank you again. 

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    June 15, 2020

    I got this all working fine now. Would you be able to help me figure out how to make the checkbox a required field? I know it can be as simple as adding  ".required = true;" on the appropriate variable. I'm just not sure how to do it in this situation. 

    This gets even more complex because the KV HTML is initially detached from the usual Forms JS events model. But you can do it as shown here: https://codepen.io/figureone/pen/12e8d55957da25f2a54c9b6bee113ea6?editors=0110

     

    Note you need the bit from the CSS pane as well.

    Terms & ConditionsAccessibility statement

    Loading footer...