How to Create A Simple Slide Out Lead Generation Form

In:

In this tutorial I will show you how to add a simple slide out effect to your lead generation forms. This technique has been most widely used on blog posts to prompt users to subscribe when the reach the bottom of the post.

The HTML

The HTML is simple. You can write your own form code, or you can use a generated form from your marketing automation or email marketing system such as MailChimp, Active Campaign, Marketo or Pardot.

Wrap your form in a DIV

The CSS

Add some CSS to make the form slide out in the bottom right corner.

If your website is responsive, add a media query to center the form on small screens.

The jQuery

Load jQuery library on the page.

We will be using the jQuery slideUp and the jQuery slideDown methods to create the sliding effect and calculate if the window height is 100px from the bottom using jQuery.

You can change 100 to whatever height (in pixels) you want the form to appear from the bottom of the page.

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

  • 23/07/2020
    How to Add an Opt-in Message & Privacy Policy Message to Pardot Forms

    GDPR and CASL compliance are just a few reasons to add an explicit opt-in message or a privacy policy to your Pardot forms. In this post, I’ll show you how to add a custom opt-in message to your form and a privacy consent message above the form submit button.

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts