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/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.

  • 05/03/2020
    How to Create a Better Date Picker Within Pardot Forms

    Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

  • 09/10/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 2

    The 2nd part of the form customization series is finally here! In part 1, I showed you how to implement the popular floating label technique and how to create searchable, user-friendly dropdowns. In this post, I will show you how to create a conversational, paragraph-style form and how to create a form on a single line.

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