Can we build two step form in marketo by using custom JavaScript?

[Sant_Singh_Rath]

Initially I want to show 4 fields then instead of submit button I want Next button which will take the person in the form with remaining fields and then he/she have to submit the form and lead will be created in marketo?

My understanding is:

1. We can show 4 fields in the page load event and hide the remaining one and submit button

2. After 4 fields we can add a rich text to make "NEXT" button

3. In the "Next Button" click event we can display remaining fields with submit button.

Has anyone build this solution or kind of. If you can provide me the code then it will be really helpful.

Thanks in advance.

Sant

[Jay_Jiang]

In short yes it can be done.

If you're struggling with a marketo only form, and all else fails, build your own form and submit the answers to marketo in the background

[Sant_Singh_Rath]

Thanks for the suggestion Jay Jiang​. I will try to get this work.

[SanfordWhiteman]

I found my demo from a couple of years ago. Let me just refactor it a bit and will post tomw (uses some techniques I don't use now).

[Sant_Singh_Rath]

Thanks Sanford Whiteman​ It will be really helpful. Thanks!

[SanfordWhiteman]

If you search my past posts, I've shown a couple of different ways to approach this.

[Sant_Singh_Rath]

I tried to find this solution in your website, discussions, blogs but unable to see any..

[SanfordWhiteman · Accepted solution]

Check out

MktoForms2 :: FSaaT v1.0.0​ (FSaaT = Fieldset-at-a-Time).

You'll need the code from the CodePen CSS pane (very basic) and the JS pane (not at all basic).

The underlying form in Form Editor is as simple as can be. Each "step" is a Fieldset (the Fieldset's <legend> doesn't actually matter as it is not shown, nor is the border). You can add an unlimited number of steps and the code adjusts accordingly.

Note no fields are marked Required in Form Editor: that logic has to move into custom validation JS because of how significantly we're altering the display.

As you can see, the only part you'd have to customize for your form is the stuff above /* --- NO NEED TO EDIT BELOW THIS LINE! --- */: the required fields + error messages, and the labels for the previous and next buttons. You can also choose to turn off the previous button (I don't recommend this, it's weird IMO but I built it in anyway).

This is still a work in progress. It takes a dramatically different approach to my past multi-step forms, but I'm still adjusting for some corner cases.

[AKR]

@SanfordWhiteman 

I have used the CSS and JS as per given instructions and it worked very well. 
In my web-form I have checkboxes type fields which needs to be mandatory. I have added the fields name in JS but its not working.

Could you please guide how to make the checkboxes filed mandatory along with the other fields.

[SanfordWhiteman]

You have to link to your page. That’s not enough to go on.

[AKR]

Hi @SanfordWhiteman ,

I have this test form where we have radio buttons and checkboxes type fields. 

I have modified the JS for the required fields, its working fine for radio buttons, but when I add the checkboxes fields to make them required in the CSS then web-form doesn't appear. Could you please help how checkboxes fields can be mandatory?

requiredFields: [
{
name: "surveyQuestion1",
message: "This field is required."
},
{
name: "surveyQuestion20",
message: "This field is required."
}, ]

[SanfordWhiteman]

---

its working fine for radio buttons, but when I add the checkboxes fields to make them required in the CSS then web-form doesn't appear. Could you please help how checkboxes fields can be mandatory?

---

Is it? Or do you just have that field marked Required in Form Editor?

You need to take the config block/code out of the Rich Text area, that’s impossible to troubleshoot (and also gives unexpected results, as I’ve written about before).

[AKR]

---

---

Is it? Or do you just have that field marked Required in Form Editor?

Hi @SanfordWhiteman - No, Required option is unchecked for all the fields on form level.

You need to take the config block/code out of the Rich Text area, that’s impossible to troubleshoot (and also gives unexpected results, as I’ve written about before).

I have removed the config block from Rich text area and added on landing page meta tag, I hope that would be fine?

[SanfordWhiteman]

---

have removed the config block from Rich text area and added on landing page meta tag, I hope that would be fine?

---

No, it needs to be just before the closing </body> tag.

[AKR]

Hi @SanfordWhiteman - I have updated the page. 

[SanfordWhiteman]

Your config doesn’t match the fields on the form.

 <script>
var userConfig = {
   buttons: {
      prev: {
         label: "Back",
         disabled: false
      },
      next: {
         label: "Next"
      }
   },
   requiredFields: [
 {
         name: "surveyQuestion1",
         message: "This field is required."
      },

        {
         name: "surveyQuestion20",
         message: "This field is required."
      },
    ]
};
</script>

Also I urge you to recheck Form Editor as you’ll see the radio buttons are marked required there, confounding your tests.

[debbie_917]

Hello @SanfordWhiteman 
I have it all set up, but nothing happens after I click submit. 

https://codepen.io/debbie_917/pen/KKYdeJR

Please help. Thank you.

[SanfordWhiteman]

Take this out of the Settings section, it’s there to protect the demo form from abuse!

   form.onSubmit(function(form){
      form.submittable(false);
   });

[debbie_917]

@SanfordWhiteman 
One more thing. It's not a HUGE issue, but after clicking submit. Both buttons say "Please Wait" Is there a way to have the back button hide after submit?
https://codepen.io/debbie_917/pen/KKYdeJR

[SanfordWhiteman]

MktoForms2.whenReady(function(readyForm){
  readyForm.onSubmit(function(submittingForm){
    submittingForm.getFormElem().find("button.mktoButton[data-dir='prev']").hide();
  });
});

[debbie_917]

Thank you @SanfordWhiteman! Have a wonderful day.