Campaign Goal: Increase the number of form submissions for gated content.
Executive Summary
The Challenge
This customer's gated content had a low conversion rate due to a combination of page layout, inadequate call to action, and too many fields. The landing pages that hosted the gated content had a high number of views but only an 8.3% capture rate.
The Solution
We reduced the number of form fields to only ask for the email address. This lowered the effort it takes for the visitor to access the content. We then added custom JavaScript to the landing page so the embedded form pops up as opposed to being embedded on the landing page. Displaying the form over the content makes the call-to-action much more enticing for visitors.
How it works:
The visitor links to a landing page that displays the gated content
After three seconds the modal form displays hiding the PDF
The visitors provides their email address and submits the form
The modal form is removed, and the pdf is now visible on the (landing) page
Here's an example from Act-On's own website!
The Impact
The first week after launch, the form's capture rate increased to 16.2%. On week 2, the capture rate increased to 22.1%.
How to Build This Lead Capture Process
Add Code to Display Form
First, Create a new Landing Page in Act-On.
Drag a ‘Custom Content’ block onto the canvas
Paste the following code into that ‘Custom Content’ block:
Code for Pop-up Form
Code to be pasted:
This code is not supported by Act-On Technical Support. Any assistance with this solution must go through our Professional Services team.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <!-- <span class="close">×</span> --> <h2 style="font-size: 32px; color: #4a8ba8; padding: 0 0 0.5em 0; text-align: center; font-family: sans-serif;">We just need one thing first...</h2> <!-- act-on FORM here --> PASTE FORM EMBED CODE HERE </div> </div> <script> // delay until form is actually loaded on page setTimeout(function(){ $("#myModal").css("display", "block"); // on submit, send this form to iframe (do not redirect) $("form").attr("target", "dummyframe"); $("form").css("font-family", "Raleway, sans-serif"); $("form").submit(function(event) { // make sure form is not empty $('input[type="text"]').each(function(){ if($(this).val()!== ""){ $("#myModal").css("display", "none"); } }); }); }, 3000);
// To create a longer delay before the modal appears, change this value: 3000 to a larger number, such as 6000 </script>
What this code is doing:
Creates the modal pop-up window.
Has a placeholder form already embedded.
Makes the modal popup window appear after 3 seconds.
Manipulates the Act-On form such that the page does not refresh after submit.
After form submit, the modal disappears.
Should look like this:
5. Replace this block with your form code:
Code that needs to be replaced:
<!-- act-on FORM here --> PASTE FORM EMBED CODE HERE
You will need to replace this block with whatever form “embedded” code you would like to use.
The form will not work with the pop-up if your Act-on account does not have a custom marketing domain.
How to get your form embedded code:
Go create a form within Act-On of your choosing
Select “embed” in the upper right of the navigation bar
Select “Embed Code” at the middle center of screen.
Hit the “Copy Code” button in the right vertical bar.
Then paste in desired place mentioned above.
Add Code to Embed PDF Asset
Next, we will add an iFrame that will allow you to display your PDF content on the landing page.
Drag over another ‘Custom Content’ block onto the canvas, below the previous ‘Custom Content’ block
Paste this code block into this ‘Custom Content’ block
iFrame Code
This code is not supported by Act-On Technical Support. Any assistance with this solution must go through our Professional Services team.
<div style="height: 1000px; margin-top: 4em;"> <iframe style="width: 100%; height: 800px;" src="REPLACE THIS TEXT IN BETWEEN THE QUOTES WITH A PDF URL"></iframe> </div>
<!-- dummy destination; no redirect on submit --> <iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
What this code is doing:
Embedding an iframe that will hold your content (pdf).
Creating additional functionality that allows the page to not refresh after form submit.
Should look like this:
3. Replace the iframe src code (highlighted example below) with your asset URL. (Must be .pdf)
Add CSS to Style the Form
Next you will want to edit the CSS by clicking the menu item illustrated and paste in the following code.
This code is not supported by Act-On Technical Support. Any assistance with this solution must go through our Professional Services team.
Paste this code into the CSS:
Styling Code
/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 0 auto; padding: 20px; border: 1px solid #888; font-size: 12px; width: 600px; position: relative; top: 50%; transform: translateY(-50%); } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
What this code is doing:
Styling your modal pop-up window and allowing it to show and hide according to user actions.
Should look like this:
Are you running a similar campaign? Do you have questions about how this one works? Feel free to leave a comment below.
Hi this works great on desktop, but not on mobile devices. The iframe and form only shows half when the phone is in "stand up" position. Any work around?
Hi Kristen, thanks for the feedback! The basic implementation of this solution is to truly be gated content - the prospect needs to submit the form to get through - but I absolutely see the benefit of making it optional for a more flexible user experience! It's something we will think about for a future version of this process.
This is great stuff. However, it would be great to include an exit option so the submitter could exit the form without submitting. At least having the option would be great!
Comments
8 comments
Hi Chris,
Yes, the code is now working. Thanks for your help!
Hi this works great on desktop, but not on mobile devices. The iframe and form only shows half when the phone is in "stand up" position. Any work around?
BR Morten
Has anyone noticed that this doesn't work correctly in Internet Explorer? Is there a work-around?
Hi Isabelle - thanks so much for flagging this.
I just made an update, and the code now seems to be displaying. Could you please let me know if it looks correct on your end as well?
Yes, I flagged this with the act-on team, no workaround as of yet. Very frustrating as its a really good tool to use.
Hi Act on, on the campaign playbook the code doesn't seem to be displaying correctly can you confirm?
Hi Kristen, thanks for the feedback! The basic implementation of this solution is to truly be gated content - the prospect needs to submit the form to get through - but I absolutely see the benefit of making it optional for a more flexible user experience! It's something we will think about for a future version of this process.
Hi Act-On,
This is great stuff. However, it would be great to include an exit option so the submitter could exit the form without submitting. At least having the option would be great!
Please sign in to leave a comment.