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.
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 ></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}
.png)