How to Create Forms and Ads to Convert Visitors to Leads and Sales

Congratulations! You’ve created a blog. Now that you have a blog with unique content, and are updating on a consistent basis, you’re ready to start converting visitors to leads.

Think of this like the second date: You’ve gotten to know one another. You know there is something about you that this person likes, or they would’ve gone elsewhere. Now it’s time to start revealing more about yourself and what you have to offer, without being over-the-top or pushy. Now you want to go for pop-up forms (note that I didn’t say ads) and banner/sidebar ads on your blog.

What to Say in an Effective Pop-Up Form


First, start with an effective headline. Having a headline that addresses a pain point has increased conversions by 32% (KissMetrics). For the beauty and skincare industry, a simple “Get rid of wrinkles” has proven more 3x more effective than “Want to get smooth, glowing skin?,” because you are addressing a clear pain point.

Next, have two clear options: “Yes” or “no.” The “yes” button should be bigger, bolder, and include (in smaller font) the benefits. The “no” button should ideally not be a button at all, but rather a link beneath the “yes” button that says something to the effect of, “No, I don’t want to look and feel amazing” or “No, I don’t want a better life.” However, if you run a blog with a serious or professional tone, then having a bold, red “YES” button and a more subdued, non-red “NO” button should suffice.

Make sure that you A/B test different headlines, form lengths, button colors, and ad images on your pop-up ad.

  • Different headlines: We advise A/B testing different pain points. For instance, for a weight loss blog, you might try testing “Want to lose 20 pounds in 30 days?” versus “Want to drop three dress sizes in a month?”
  • Form lengths: If you have an educated audience, you can benefit from having a form length that is longer, including name, mailing address, email, and a few demographic questions like age and interests. Less complex forms may seem suspect, too “You’ve won a free iPad!” for most refined audiences. On the other hand, forms that are too long can turn off any audience, even of the most sophisticated PhD’s. So play around. A/B test.
  • Button colors: Make it big. Make it bold. And, if you can, make it red.
  • Ad images: High-res photography or video works best. Make sure that the images express what you want to convey about your brand.

How to Install a Pop-Up Form that Captures Leads



At FutureDerm Media, we use WordPress for all of our Clients’ sites. Like on a second date, we don’t recommend that you are too pushy about getting more information. Set the pop-up to appear after the visitor is on your site for a minute or two.

Getting Started

For this tutorial, you will need to install and activate two plugins:

First, you need OptinMonster with the Canvas Add-on. OptinMonster is the best WordPress popup and lead generation plugin.

Disclaimer: OptinMonster is created by WPBeginner’s founder, Syed Balkhi.

Next, you will need to have a contact form plugin such as Gravity Forms, Contact Form 7, Ninja Forms, etc.

For the sake of this article, we will be using our favorite contact form plugin: Gravity Forms

Let’s get on with creating a contact form popup in WordPress.

Step 1: Creating a WordPress Popup using OptinMonster

First thing we need to do is create a modal popup using OptinMonster.

You need to create a new optin by clicking on OptinMonster in WordPress admin menu, and then click on Create New Optin button.

Creating a new optin in OptinMonster

On the Setup tab, you need to choose Canvas Popup as your optin type and then click on the Next Step button. If you don’t see Canvas, then it means that you don’t have that addon installed. Please install it using the addon screen.

Select Canvas popup as your optin type in OptinMonster

Once you select Canvas, it will bring you to a configuration screen. You need to give this popup a title which will only be used internally and will help you identify this particular popup.

After that you can enter a value for optin loading delay. If you want the popup to load when user clicks a link or to load using exit-intent, then leave the delay time to 0.

Optin cookie duration is set to 7 days by default. This means that once a user sees the canvas popup optin and decides to close it, then they will not see it for next 7 days. Because we’re going to use the click method, you should set the cookie duration to 0 as well.

Configuring your canvas optin

Once you are satisfied with the configuration settings, click on Save and Design Optin button to proceed to next step.

On the design tab, first you need to click and choose your optin theme. At the time of writing this article, there is only one White Board theme available for the canvas popup. You need to select it and then click on the Design Customizer button.

Choose your optin theme and then open design customizer

The design customizer screen is divided in two panes. On your right, you will see a preview of your lightbox popup and on your left you will see sections like Dimensions, HTML, CSS, and Effects (effects will only appear if you have the effects addon installed).

Optin design customizer in OptinMonster

By default, the dimensions for your canvas popup are set to 700 x 300px. You can change them to meet your needs.

You will notice that Canvas is blank by design. It’s done that way, so you can add just about anything you want while using the power of OptinMonster. You can add a signup form, facebook like box, surveys, coupon codes, or like we’re doing in this example a contact form.

Now that you have chosen your dimensions, let’s add our contact form inside it.

Start by clicking on the HTML tab to expand it. This is where you will paste the HTML code, or your shortcodes.

Here is a sample HTML we used to create the modal popup shown in the screenshot above.

1 <h3>Do You Have Any Questions?</h3>
3 <p>Want to ask us more about our services? Simply fill out this form and we will answer quickly. Alternatively, you can also call us at 5555-5555.</p>
5 [gravityform id="4" name="CanvasPopupForm" title="false" description="false"]

Notice that we have embedded a Gravity Form shortcode in there as well. If you are using another contact form, then simply replace the shortcode with your contact form shortcode.

Once you have entered the required HTML, click on the CSS tab to add styling to your modal popup.

Each of your CSS rule is required to use the prefix given just above the CSS box.

CSS prefix you need to use with each CSS rule

Here is the CSS we used to create the modal popup shown in the screenshot above.

01 html div#om-lku3gv5wny-canvas #om-canvas-whiteboard-theme-optin-wrap {
02 background:#fff;
03 border:10px solid #F5F5F5;
04 color:111;
05 }
06 html div#om-lku3gv5wny-canvas .gfield {
07 list-style:none;
08 }
09 html div#om-lku3gv5wny-canvas input[type=text]{
10 width:420px;
11 }
12 html div#om-lku3gv5wny-canvas input[type=submit] {
13 background:#ff6600;
14 color:#FFFFFF;
15 padding:5px;
16 width:420px;
17 margin-left:40px;
18 }
20 html div#om-lku3gv5wny-canvas textarea {
21 height:80px;
22 width:420px;
23 }

Depending on what you are adding in your popup, you can use Google Chrome’s Inspector tool to find out which CSS classes or elements you need to edit.

Using Google Chrome's Inspect Element feature

Once you are done editing the popup styling, click on the Save button on top of the customizer and hit close to exit.

You will be back at the design tab, so you need to click on the Manage Output Settings button to finalize your settings.

The output settings screen is where you configure the optin’s output option. All you need to do here is check Enable optin on site. We will cover how to open popup with a link in the next step.

If you want the popup to load automatically based on timer or exit-intent, then you can load optin globally or use other conditionals accordingly.

Output settings for your optin

Save your settings when you are done.

Step 2: Open Contact Form Popup with a Link

Launching a popup with a link is really simple thanks to the MonsterLink functionality that OptinMonster has. Each popup has a unique ID to identify it. You can find your canvas popup’s unique slug by going to the optin screen and clicking on the gear icon next to the canvas popup you just created.

Copy the unique optin slug

Now you will need to use this unique optin slug to create a link, like this:

1 <a href="#" class="manual-optin-trigger" data-optin-slug="lku3gv5wny-canvas">Click me!</a>

You can use this link in your WordPress posts, pages, widgets, and even your templates. Clicking on the link will open your contact form in a popup window. (source)

What to Say in an Effective Blog Sidebar Ad


Put your unique value proposition directly at the top right hand corner of the site. Tell how long you’ve been blogging, your mission statement, how many orders you’ve shipped, your customer satisfaction rate, and guarantee on all orders. A photo of yourself can really send this message home. Remember: In the 21st century, information is cheap. People don’t care what you know until they know that you care. Telling FutureDerm readers “I am Nicki Zevola Benvenuti, I started this blog to teach people the real science behind skincare without all the hype, and I’ve shipped product to 26 countries with a 98% satisfaction rate” means a hell of a lot more than, “BUY THIS PRODUCT OMG IT’S THE GREATEST THING FOR YOUR SKIN EVER. OH AND HERE’S A STOCK IMAGE OF A MODEL.”

What to Say in an Effective Blog Banner Ad


Including testimonials with photos is usually quite effective. Keep the testimonials short — the 160-character length of a tweet is usually more than enough — and include the first name, last initial, and title/company of the speaker. The banner should be rotating, with each one showing for a few seconds.

Another effective option is to make the customer feel something with an ad. Most advertisements tell site visitors to buy, purchase, or obtain. But get your visitors to do something that is a step above: Make them imagine being bikini-ready by spring, or imagine looking ten years younger, or imagine feeling the full benefit of whatever products you are offering. Buying is almost always an emotional decision; very few of us need more than food, clothing, and shelter. You need to make people get, feel, and have the feeling of owning what it is you are offering (KissMetrics).

Make Sure You A/B Test Everything

Bottom Line

At FutureDerm Media, we abide by the Inbound Methodology. You are here:

  1. Attract the customer.
    1. Blogging.
    2. Social Media.
    3. Keywords.
  2. Convert the visitors.
    1. Forms and Ads.
    2. Calls-to-Action.
    3. Landing Pages.
  3. Close the leads.
    1. Email.
    2. Signals.
    3. Workflows.
  4. Delight the customers and make them promoters.
    1. Events.
    2. Exclusive content for subscribers only.
    3. Social challenges/contests.

For more, read on by clicking any of the posts above!

January 21, 2016 Uncategorized
About Chris

Leave a Reply

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