Campaign Playbook: Gating a PDF with a Pop-up Form
Updated
Vertical
All
Program
Demand Generation
Campaign
Gate Content With Modal Form
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 visitor 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%.
In the Design tab, on the right, click Edit Javascript:
In the Edit Javascript area on the right, paste the following code:
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:
4. Then, 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:
In Act-On, create or edit the form you want.
Click the Embed tab at the upper right of the navigation bar:
Select EMBED CODE at the middle center of the screen.
On the right, click COPY CODE:
Then paste in the location mentioned above.
Add Code to Embed PDF Asset
Next, add an iFrame that allows you to display your PDF content on the landing page.
Drag a ‘Custom Content’ block onto the canvas:
In the 'Custom Content' block, paste the following code:
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
Then, on the right, click Edit CSS:
In the Edit CSS area on the right, paste 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.
