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
