Is there a way to put form questions on different pages, so that the forms don't look so long?

SanfordWhiteman
Level 10 - Community Moderator

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

'cept you're describing behavior that occurs within a single page (gradual reveal of a single form), which can be an nice UX but isn't what Gabby describes.

SanfordWhiteman
Level 10 - Community Moderator

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

P.S. The behavior you describe here doesn't require a non-Marketo form... it can be done with Marketo's built-in Visibility Rules feature. VRs plus a little Forms 2.0 API JS (not an entire hidden form or anythiing, simply a whenRendered listener) gives the same effect. I'll put up a demo later tonight.

Alejandro_Munoz
Level 2

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

It also works, that depends on how much code you want to add. Having the own html form makes the styling easier

SanfordWhiteman
Level 10 - Community Moderator

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

Most people here want to add (let alone write) as little code as possible, to be sure. From a styling perspective, by definition an entirely custom form wins!

Karan_Hari3
Marketo Employee

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

pastedImage_0.png- Since there are 3 participants in this discussion, and my above message was intended as a follow up to your reply, to avoid confusion, I tagged you. Apologies if that was some how not appropriate. Will refrain from the same!

pastedImage_1.png

I understand. And thanks for the explanation. But as explained above, if the case that I referred to above is the same as what Gabby's requirement is, then it would need a different approach as supposed to progressive profiling, is what I meant.

Karan Hari
Senior Product Manager - Marketo Engage
SanfordWhiteman
Level 10 - Community Moderator

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

It's not inappropriate to tag, just redundant as I already see the replies to me.  If you're replying to someone else and want to tag me in that would make sense.

Karan_Hari3
Marketo Employee

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

Understood! Thanks.

Karan Hari
Senior Product Manager - Marketo Engage
Hadass_Admon
Level 1

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

We had the same challenge and tried to configure it with the progressive profiling but it didn't work since we needed to show/hide complete sections every time without refreshing the page, instead of specific fields.

Eventually we worked with the team at https://overstack.io to develop a custom javascript code that deals with that.

They also helped us implementing a custom tracking functionality which records any form engagement in Google Analytics.

Good luck!

SanfordWhiteman
Level 10 - Community Moderator

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

But it wasn't "the same challenge" in that case, then. Let's stay on topic and not add more FUD about Progressive Profiling not working — people see posts like this and run with the idea and the next thing you know, I'm hearing "From what I've read, Progressive Profiling doesn't work" and then I have to go back to the beginning and explain what it is, what it's expected to do, and that it does work reliably, even with the embed on non-Marketo sites (another vastly common misunderstanding).

Kai_Crow2
Level 2

Re: Is there a way to put form questions on different pages, so that the forms don't look so long?

Hi Gabby, hopefully I can be helpful here. We had what I think was a similar use case at a previous company where we wanted to reduce the number of fields showing on the screen at a time to make the form seem less daunting and to give it some more structure - the impact of changing from a single long form to having the user complete it in 3 smaller parts, in our case was a considerable increase in conversion rate (~30%).

Hopefully I'm understanding correctly that this is essentially what you're trying to achieve. I've recreated quickly what we had since I no longer have access to the original page (that means there is probably a much tidier execution of this that can be done, but hopefully this gives you the basic idea).

This is what I mocked up: https://get.asknicely.com/TEST---multi-part-form-2.html
- there's just two parts to this form, but could easily be extended to more.
- there's no validation, so you can click forward to the second "page" without entering anything

1: Created a marketo form with all the fields I need on it (see screen shot attached)

     - note, I've added one additional field here, which in my case is called "z_formula_test" which was just a handy spare field to use, but you'd probably want to use something more logical like "form step" and I've set this to have a default value of 1 to set us at the first step when we first load the form.

     - then I've added visibility rules to each field on the form (see second and third screen shot) - for the personal details (email, first, last, job title) which I want to display first, they display when my field "z_formula_test" is 1, for the company details (company, address, website), they will display when the value is 2

     - the last step in the form setup is to add a bit of custom CSS to hide the submit button until we're ready and to hide the "z_formula_test" field - this looks like:

.mktoButtonRow{display: none;}#z_formula_test__c{display: none;}
(note that I just made the label of the "z_formula_test" field empty so only needed to hide the field - again, probably neater ways of doing this, but in the interest of time...)

2: Then I created a landing page with the form on. For this, at minimum I needed the ability to place a form and section of custom HTML, in order to insert some Javascript.

- once the form was added, I inserted the custom html and javascript below:

<div><button class="an-button" id="button1" style="display: none;"><sub></sub> Company details &gt;</button></div>

<script>// <![CDATA[

MktoForms2.whenReady(function (form) {

   form.vals({ "z_formula_test__c":"1"});

   var btn = document.getElementById("button1");

   $( "#button1" ).css( "display", "inline-block" );

   btn.onclick = function() {

          form.vals({ "z_formula_test__c":"2"});

          $( ".mktoButtonRow" ).css( "display", "block" );

          $( "#button1" ).css( "display", "none" );

    };

});

// ]]></script>

What this does:

1) adds the first button to advance to the next stage of the form (which is hidden until the form is loaded)

2) adds a click action on that button which:

     - updates the z_formula_test field to "2"

     - shows the submit button

     - hides the first button (itself)

And that's pretty much it. Splits the form in two but just gives you one form to manage in Marketo, and one page to manage.

You can add/remove fields or change them between steps just from the form editor and still supports all the other marketo form functions.

* Like I said, this is a quick re-hash of something I did previously, there's a few things missing:

- you'd probably want to add some validation to the onclick function on the first button so that users didn't get right through to the end and find info was missing (alternative might be to add a 3rd state for the z_formula_test field that would show everything - then if there was any sort of validation error at the end, you could set that so it would show all fields, although that's probably not the most favorable option)
- you'd also definitely want to add a similar button to 'get back to' the first stage, so doing the reverse of the first button (or rather than hiding the first button, you could change it's functionality and label once it's been clicked).- I'd also say a drawback of this method is it's not technically separate pages, so could cause some issues with users using the back button - I think you can work around that by setting a browser state - you'd have to look into that though.
Also, one other note: I did use some Jquery in there to ease the pain of selecting objects - make sure you've got that running or adjust accordingly.

Again, I stress, this is a basic implementation to explain how we made this work (hopefully similar to what you're trying to do) - not a perfect solution, so take this as a guide and extend it.

Hope that helps!
{checks furiously before submitting to ensure no surplus tagging}

Screen Shot 2018-11-23 at 12.25.15 PM.png

Screen Shot 2018-11-23 at 12.28.59 PM.pngScreen Shot 2018-11-23 at 12.29.15 PM.png