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

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

  • 05/02/2019
    How to Customize your Pardot Email Preference Page

    In this tutorial, I will show you how to turn the default Pardot email preference page into a preference page that matches your brand. You will learn how to customize everything including the header, footer, form, and text.

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 sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts