Create a Free Responsive Squeeze Page Using WordPress and AWeber

Please Comment

42-a-more-complete-squeeze-page Free Responsive Squeeze Page WordPress and AWeberWordPress and AWeber Sign up Forms usually just don’t play nice with each other.  As a result a lot of people  have made lots of money designing plugins, frameworks, themes and other solutions.  Many  of these systems have a ton of features and “you get what you pay for.”   However there are times when you want to create a Squeeze Page using tools that are free and readily available.   Here we will create a Free Responsive Squeeze Page in WordPress using AWeber and free tools.

This was tricky a few years ago.  With the massive upswing of traffic going to smart devices, it has become much trickier.  Now you need to create forms that are “responsive.”  They look one way on a desktop with its large screen and a different way on smart devices with their small vertically oriented screens.

The basic issue with AWeber and WordPress usually boiled down to the editor.  AWeber supplied you code to insert into you page and the WordPress Editor messed with that code.   Now we have a way around that and I’m going to show you how in this post.

Let start with this:

Setting Up Our Blog for Creating A Simple Free Responsive Squeeze Page

There are three things we are going to need to do.

All of these things only need to be done once.

  1. Install a free plugin called “Embed Code”
  2. Install a free plugin called “Toggle the Title”
  3. Install a free plugin called “Addfunc Adaptive Content”
  4. Find an image that looks like your WordPress site header that you will paste at the top of each squeeze page. (optional)

Step 1 – Install “Embed Code”   There are lots of YouTube videos on installing a plugin.  I’m not going to do the screen shots.  Here are the steps:

  1. Login to your WordPress site as an administrator.
  2. Click on the PLUGINS Menu option on the left side of your WordPress Screen.
  3. Click on Add Plugin at the top of the screen.
  4. Enter “Embed Code” in the search bar at the upper right side of the screen.
  5. Click on the Plugin – Install and Activate it.
  6. You will see the plugin under the SETTINGS Menu option on the left side of your WordPress Screen.

Why do we need this plugin?   This is a very lightweight plugin.  The reason we need this is to sidestep an annoying thing that the WordPress Editor does.  It mangles the HTML code or Javascript code that you copy from AWeber.   This plugin lets us create a WordPress variable (variable name and value), fill the “Value” with the AWeber code and insert the Variable name into our form.  The Editor never sees the AWeber code and hence doesn’t get to chew on it.

I’ll show you how to do all this a little further down with screen shots.

Step 2 – is like Step 1.  The Toggle the Title plugin puts a small check box on the right side of you Editor screen.  When you check the box, it “hides” the Title line.  This means that your Screen Title is NOT displayed on the page.

Note:  You can get away with just not entering a title, but once you have a dozen squeeze pages, it is hard to tell which is which if none of them have titles.

Step 3 – is like Step 1.  The Addfunc Adaptive Content plugin  lets us put codes into our WordPress page that indicate that some of the page is shown only to desktop computers and some is shown only to phones and tablets.  This is what makes the page Responsive.

When I first wrote the eBook AWeber Quick Start, mobile devices where not an issue.  Today much if not most of our traffic comes from phones and tablets.   People seeing your offer on these devices need to have a smooth experience just like those on a desktop PC or Mac.

 Let’s Create A Simple Free Responsive Squeeze Page.

There are a couple of things we need to do before we get started.

  1. Get some kind of image – like an eBook cover. Images make your Squeeze Page much more attractive.
  2. I used to recommend putting arrows onto the image.  We can’t do that now.  Sometimes the sign up form is to the right of the image and sometimes it is below the image.
  3. Work on your text. Waiting until you are editing in WordPress is usually a mistake.  Get your Marketing Cap on somewhere away from the computer and make a compelling Title, and Sub-heading, etc.

Here are the steps we will do to create our page.

  1. Create a New Page (not a post, a page)
  2. Choose a Template that is wide with no side bars
  3. Click on the Toggle the Title and turn the Title off
  4. Click on Screen Options and make sure you can see the Create Fields
  5. Add a new custom field – the field name id CODE1 and the value is the Javascript text you copied from AWeber.
  6. Insert the Header Image at the top of your post. (Optional – For branding purposes I like the page to look like my blog, but NOT have menus that let the visitor wander off.  If you are going to advertise on Google using this page, you need the menus.   Google like the user to see that you have a full website.)
  7. Click on Text Mode
  8. Paste the code for a Table (shown below) into your page.
  9. Click on Visual Mode
  10. Replace the text in the table with your text.

 

Step 1 –   Click on the PAGES option in the left menu of WordPress and ADD A PAGE

 

Step 2 – Choose a Template that does not have something in the sidebar.

NOTE:  If you are going to advertize the page on Google or Facebook, it is best practice to choose a template that has a menu at the top.  (They do not like single page website.  Having a menu allows visitors to see that there really is more information on the side.  When possible, it is best for conversions to NOT have the menu.  That gives the Leads fewer options to choose from a lowers the chance that they will wander away from the sign up form.

 

Full Width Template

Different WordPress themes have their template options in different places and they call them different things.   Here is the setting from my current theme  (Flex Mag).   Choose the Full Width There will remove the side bar list of articles.

Full Width Template
full-width-table

Step 3 – Click on the Toggle the Title off

Title Toggled Off
toggle-title-off

 

      Step 4 – Click on Screen Options and make sure you can see the Create Fields

Screen Options31-screen-options

Custom Fields Toggled On
31-screen-optonss-2

Step 5 – Insert the Header Image at the top of your post.  You would insert this image just like you do any other image in a blog page or post.

NOTE:  I’m not inserting a header Image in the next section.

 

 

Step 6– Click on Text Mode

Click on Text Mode
32-viaual-and-text-mode

Text mode will show you the HTML code and you won’t  see the images.  The Visual Editor is what is called a WYSIWYG Editor.  What You See Is What You Get.   The text mode editor is NOT a WYSIWYG editor.

Step 7 – Paste the code for a Table into your page.

WHY A TABLE?   This is a logical question  to ask.  HTML (the code that WordPress uses to display the posts and pages) is specifically designed to change based on the size and shape of the screen the user is looking at.  In practice this means that headlines, images and Sign Up forms can wander around the screen in ways that are difficult to predict and control.   Placing the pieces in a table goes a LONG way toward making the display look like what you want it to look like.

Getting the various parts of your Squeeze Page to “play nice” and go where you want them is tricky.  Be inserting a Table on the page and putting the various pieces of the Squeeze Page in the rows and columns of the table, we at least partially tame the beast.

(Note Good article on controlling the AWeber Form

http://www.htmlcodetutorial.com/comments/viewtopic.php?f=6&t=17208)

Here are some arrows like those talked about in the code below.  You can copy and paste these to your PC.

34-3-red-arrowsCopy Paste the following Table into your WordPress Text Editor.

 

***************START OF CODE TO COPY****************

INSTRUCTIONS for Where You Save This Code in a Text File

 

 

 

 

Open a new Page

Switch to text mode

Copy/paste the code below into the editor

Change back to Visual mode

Make your edits

 

***** Copy Code Below This *******

<div align="center">
 <table style="width: 60%;">
 <tbody>
 <tr>
 <th colspan="2" align="left"><span style="font-size: 18pt; line-height: 24pt; background-color: #ffff00;">ATTENTION: Your Pre-Headline </span></th>
 </tr>
 <tr>
 <th colspan="2" align="center"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 36pt; line-height: 36pt; color: #ff0000;">Your Headline</span>
 
 Erase this:  Your additional motivational material to supplement the Headline.</th>
 </tr>
 <tr valign="top">
 <td width="40%">Erase this:   Insert Your Image - Mine was Width 171 and height 272  You might need to fiddle with the 40% here or the 60% at the very top.   The Image should be LEFT Justified

 

</td>
<td align=”Left” valign=”Top”>[notmobile] <div style=”position: relative; overflow: auto; height: 100%;”>
<div style=”position: absolute; top: 0; left: 0;”>

Code Embed: Cannot use CODE1 as a global code as it is being used to store 2 unique pieces of code in 2 posts


</div>
</div>
[/notmobile]</td>
</tr>
<tr valign=”top”>
<td align=”Left” valign=”Top”>x
[mobileonly]

Code Embed: Cannot use CODE1 as a global code as it is being used to store 2 unique pieces of code in 2 posts


[/mobileonly]</td>
<td>[mobileonly]

Erase this:   NOTE:  The [mobileonly]   This means these arrows only show on phones and tablets.

This is 3 left pointing arrows – mine were 113 x 300  Left Justified
shown ONLY on mobile devices  We need the arrows to make the row have some height.  The AWeber materials is rendered AFTER the table has decided how high the row is and so it is not visible.  The Arrows force the row to have some height.
[/mobileonly]</td>
</tr>
<tr>
<th style=”width: 685px;” colspan=”2″ align=”left”>

Erase this:  Insert More Text About your Offer.  Maybe bullet points.
</th>
</tr>
</tbody>
</table>
</div>
Erase this:   these blank lines drive your footer down below the fold

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

******* END OF CODE TO COPY ******

Your Screen will look like this:

Table in Text Mode
35-table-in-text-mode

Step 8 – Click on Visual Mode

Choose Visual
32-viaual-and-text-mode

 

    Step 9 – Replace the text in the table with your text.

 

Table Before You Edit.

36-table-before-edit

Here is a Sample That Has Been Edited
37-table-after-edit

 

Step 10 – Add a new custom field – the field name id CODE1 (that is C O D E and the number 1) and the value is the text you copied from AWeber.

Enter Custom Field
38-custom-code

Find this section below your editor.

#1 – Click on the “Enter New” link

#2 – The dropdown menu that says “Select” now will change to an empty field after you click on “Enter New”.   File the empty field with “CODE1.” – Just the five letters.  Not quotes or periods.

WE NOW HAVE A RESPONSIVE SQUEEZE PAGE.

Finally A Simple Squeeze Page

39-finished-squeeze-page

Screen Shot From A Phone

40-phone-version-of-page

 

Here is a more complete version.

42-a-more-complete-squeeze-page

#1 and #2 – I have started putting some information on my squeeze pages that gets the lead used to seeing who I am.  You can use either the graphic from your blog header (#1) or your name somewhere.  A second advantage to doing this is that if the lead knows who I am and they know, like and trust me,  they are more likely to opt-in to my offer.

#3 – a Pre-header – grab the attention of your target audience.

#4,#5, $6 – Attention grabbing headline, book cover and AWeber form.

NOTE:   When a Lead fills in the form and clicks on the button several things happen.

  1. They are added to the list you were using when you created the Sign Up form. The Lead is now a Subscriber.
  2. If you have used the automation described at the end of this eBook, they are also signed up to the Master List for this niche.
  3. The first eMail from the list is automatically sent.
  4. If you are using the automation and they have never signed up for one of your products before, they will also receive the first eMail from the Master List.
  5. The new Subscriber’s browser takes him or her to the Thank You URL you entered when you created the Sign Up form.

That is a lot of moving parts, but that is how all Autoresponders actually work.

We are not going to cover the Thank You Page in this email, but I will tell you about it.

It says THANK YOU and it tells the new Subscriber that the product they signed up for is coming in an email in a few minutes.   If you are really planning to make money, you also have a One Time Offer on this page.

The first email from the list that is specific to this product can look very much like the Thank You Page.  The main difference is that instead of saying “Your product is coming in an email”, you say “Here is the link to download the product you signed up for.”

Until Next time, you have a Great Day!  Oh Hale Yes!

↓ ↓ If this post gave you some ideas – Go ahead & comment below.  ↓ ↓

Hale Pringle

Hale Pringle Ed. D.

Hale Pringle – Hale Yes!   Skype hale.pringle Email:  Hale@HalePringle.com   Connect with me of LinkedIn, Facebook or Twitter

P.S. If you or your company have physical products that you are trying to sell on Amazon it just isn’t working, I can help!  Look at http://HalePringle.com, especially the resources menu option. You will see that I am a Certified Internet Marketing Trainer, a Certified eCommerce Coach and the Head Coach with eCom Masters – FBA Edition.  We are selling lots of things online – mostly using Amazon FBA.  In addition to eCommerce I am an award winning blogger and I’ve written three books on AWeber (AWeber: Quick Start) and over 20 others. You can email me, give me a Skype call or fill out the Contact page.  I’ll give you the benefit of my years of experience and many thousands of dollars in training and searching the rabbit hole called Internet Marketing and especially selling physical products online.  

 

Print Friendly, PDF & Email
About Hale Pringle

Dr. Hale is an Internet Entrepreneur and Network
Marketing expert. His greatest pleasure is
helping people and he does just that, drawing
upon the immense resources that he has gathered
over the years in his unquenchable thirst for
knowledge.

Dr. Hale lives in beautiful, sunny Florida with
his wife, two dogs and a cat. His four children
are grown and are scattered around the state.

An eternal optimist you will hear him say
regularly: “Is this a Great Day?” The answer is
always, “Hale Yes!”

If you need help with your online marketing or a
network marketing opportunity Dr. Hale is the go
to man. “Hale Yes!”

Comments

  1. I think I have to make new moves towards my site.

  2. This design is wicked! You most certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to
    start my own blog (well, almost…HaHa!) Excellent job.
    I really enjoyed what you had to say, and more than that,
    how you presented it. Too cool!
    Carl recently posted..CarlMy Profile

Speak Your Mind

*

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.