How to make your Marketo from expandable?

How to make your Marketo from expandable?

Marketing is all about trying new techniques and implementing new ideas to impress your prospects. There are things you can implement with tool functionality and there are other things you need to find out of the box solution.

This time we required to create an expandable form for our landing page. For example, we have 8 fields in the form but I don't want to show all the fields when the page loads. I want to show only 4 fields and when someone goes to enter his/her details, all the 8 fields will be visible.

This is not the native functionality of Marketo form but Marketo form allows you to add custom API to achieve this. I am sharing here the code and steps to follow to achieve this:

Snippet 1: 

<style>  

form div:nth-child(5), form div:nth-child(6), form div:nth-child(7), form div:nth-child(8)

 display: none; 

 } 

</style>

Snippet 2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
    $(".mktoField").click(function(){
        $(".mktoFormRow").show();
    });
});
</script>

 

Note: nth-child(n) selector is a CSS property that matches every element that is the nth child, regardless of type, of its parent. 

In this case, we wanted to show 4 fields initially that's why we haven't mentioned nth-child(1), nth-child(2), nth-child(3), nth-child(4) and added rest of the fields. We set the property display: none;  for the last 4 fields.

In the snippet 2, we have added show function on Marketo form's click event. So, when someone clicks on the Marketo form all the fields will show up.

Note: Place both snippet one and two in the head section of your page.

Hope this article will help and yes don't meek to send your feedback.

With Best regards,

 

Sant Singh Rathaur

Connect me on LinkedIn https://www.linkedin.com/in/sant-singh-rathaur/

Best regards,
Sant Singh Rathaur
4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: How to make your Marketo from expandable?

Don't use jQuery ready() here, it will not work reliably. You must wrap all Marketo form manipulation in MktoForms2.whenReady().

Re: How to make your Marketo from expandable?

Thanks for the feedback Sire.. I will look into this..  

Best regards,
Sant Singh Rathaur
Tony_Mayse
Level 3

Re: How to make your Marketo from expandable?

This is a great technique to lower the barrier to action and hopefully increase form submissions.

Marketo offers similar functionality but falls just short of your goal with Dynamic Visibility Rules.

Dynamic visibility rules require the person to enter something first whereas your goal is to show additional fields/rows on-click. For marketers who are happy showing additional fields a little later: after a person enters a value in the first field, Dynamic Visibility Rules are a simpler solution.

Re: How to make your Marketo from expandable?

Indeed Tony Mayse.. Marketo form visibility is good option and we are using it fully but somehow that is helpful when you want to show relevant option to the person.. 

Best regards,
Sant Singh Rathaur