Form - multiple selections with fields hidden

[Travis_Schwartz]

Hello, 

I was charged with creating a similar form to this:

Where it is presenting two options

1. either sign up for something or continue to the website.

I found the documentation example (https://developers.marketo.com/rest-api/assets/forms/examples/) for form submit on non-form click event and figured that was likely where I needed to be, but am facing a couple of challenges

1. How do I make the other fields visibility dependent on selecting the "sign up" option?

2. is this java script code living in a rich text field on the form or on the page where the form exists?

3. how do I assign the element ID? is that in the CSS editing section of the form editor?

Thanks

[SanfordWhiteman]

---

1. How do I make the other fields visibility dependent on selecting the "sign up" option?

Multiple ways to do this. Easiest is to have a hidden field like Form Visibility Control (I have a few of these actually) and then use Visibility Rules to show other fields if the hidden field has, for example, the value “true”.

Then put the button in a Rich Text area. Add a click listener to the button that flips Form Visibility Control to “true”. Then native show/hide functionality takes care of it.

[Travis_Schwartz]

I'll give this a go. I think I'm following most of it, but I'll likely have questions.

Do you happen to have a link to a page you have done this to that I could look at?

[Travis_Schwartz]

ok... I've gotten to where I'm stuck.

This is what I've got:

I'm guessing that I need to use API to change the visibility value which will then impact my visibility rules?

Also, would I be using API to control the visibility of the CONFIRM button?

[SanfordWhiteman · Accepted solution]

---

I'm guessing that I need to use API to change the visibility value which will then impact my visibility rules?

Do it like this.

The form behind that demo looks like so in Form Editor:

With Visibility Rules to control the First Name and Last Name if Active equals “true”.

---

Also, would I be using API to control the visibility of the CONFIRM button?

---

For that, follow the method at

Conditionally show/disable/hide the Submit button on Marketo forms

[Travis_Schwartz]

I wasn't getting it to work, so I went back to square one and tried to follow your example but I'm still not getting it to work. I'm probably missing something trivial, but JS is not my strong suit.

Here is what the form looks like in the editor:

And I've set up the visibility rules to change when active = true.
When I bring my embed code into code pen and run it, I get this error message:

 

My form embed code:

<script src="//go.arrowheadcu.org/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2592"></form>
<script>MktoForms2.loadForm("//go.arrowheadcu.org", "941-XWJ-315", 2592);</script>

Like I said... I'm sure whatever the issue is it's super obvious what is wrong... I'm just out of my realm a little bit.

 

[Travis_Schwartz]

 I noticed I didn't get the button element correct and was using a class instead of an ID for this section:

<div class="mktoFormRow"><input type="hidden" name="active" class="mktoField mktoFieldDescriptor mktoFormCol" value="false" style="margin-bottom: 5px;"><div class="mktoClear"></div></div>

I've updated my button with that and am now no longer receiving the error message, but am still unable to generate the other fields.

Another difference I noted was that your field for the section where we are checking if it's active, your example has Active__C (which is also used in the JS:

<div class="mktoFormRow"><input type="hidden" name="Active__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="false" style="margin-bottom: 10px;"><div class="mktoClear"></div></div>

Mine is just "active" which I updated the JS to account for, which didn't resolve it either.

<div class="mktoFormRow"><input type="hidden" name="active" class="mktoField mktoFieldDescriptor mktoFormCol" value="false" style="margin-bottom: 5px;"><div class="mktoClear"></div></div>

MktoForms2.whenReady(function (readyForm) {
   const formEl = readyForm.getFormElem()[0],
      buttonEl = formEl.querySelector("#toggleVR");

   buttonEl.addEventListener("click", function (e) {
      readyForm.setValues({
         Active: readyForm.getValues().Active === "true" ? "false" : "true"
      });
   });
});

[Travis_Schwartz]

ah... for anyone following this... case matters... haha 

my field name needed to be Active, not active.

[SanfordWhiteman]

That's what I was about to say!

[Travis_Schwartz]

haha it's always rewarding when you figure it out.

I am having some challenges with styling the button. I'm using it inside of web personalization and it seems to be pulling the CSS from the template and I'm not able to figure out how to override it.