Basic AWeber Training – Basic Web Forms

Please Comment

 

Basic AWeber Training – Basic Web Forms

 

Introduction

AWeber Tips - Create Basic Web FormsToday we are going to add basic Web Forms to your blog or website Squeeze Page.  These forms are the mechanism you use to add leads to your lists.  No one will receive the follow-up emails we created in the post on emails if they are never added to the lists we created in the Create Lists Post.  We’ll use the button we created in the Create a Cool Button post.  We will use some basic Web Forms to accomplish today’s task.   We have gone over the four Major Components of AWeber, Dr. Hale’s Four List System and listed the steps you will go through in a complete AWeber System.

I will mention again that AWeber’s tutorial videos are excellent.  They give you good information, I just didn’t get the overview that I’m trying to give you here.   I also have used their support email system.  I almost always get a very prompt and useful response.

Disclaimer

There are lots of ways to use AWeber.  I’m going to show you what works for me.  Others may show you something different.

The Four Sides of AWeber

Here are the sections we will cover:

  1. TODAY – Getting People Into your Lists
  2. List Management
  3. The email drip system
  4. Broadcast emails.

The Purpose of Building a List

As basic as this is, it is important to remember what we are doing here.
The end game of Internet Marketing is to sell things.  In order to do this you give value to your niche and make offers.  It’s just that simple.

Where we are in the Walk Through

  

             THINGS TO DO BEFORE WORKING WITH AWEBER

  1. You need a website or a blog.  It is also possible to use a tab on a Facebook Fan Page.
  2. You need what is often called an “Ethical Bribe”  This is something that you think your niche audience would see as valuable enough to trade their email address for.
  3. It would be VERY nice to have something to sell.THINGS YOU DO ONE TIME IN AWeber
  4. Create Your Main List – this is the list your will send a series of emails (drip series or follow-up series) to when people sign up for your Ethical Bribe.  ( Creating Lists )
  5. Create a list specific to your Ethical Bribe. ( Creating Lists )
  6. Create a “Paid Customer” List  ( Creating Lists )
  7. Create a “Broadcast Only” List   (  Creating Lists )
  8. Create a day 0 follow up email in your main list.  It says: “The item you requested is on the way in a separate email”   Make this generic. ( Bare Minimum Follow-up emails )
  9. Create a day 0 follow up email in your product specific list.  It says: “here is the download you requested.”  ( Bare Minimum Follow-up emails )
  10. Use the automation feature to automatically sign people up for your main list when they ask for your ethical bribe and subscribe to your ethical bribe specific list. ( Creating Lists )
  11. Create a series of emails that will go out to people who respond to your ethical bribe offer.
  12. Create a Squeeze page or a Widget in your blog where you offer your ethical bribe.  (Simple Squeeze Page  and  Build a Widget)
  13. Create a Thank You Page in your website or blog where you Thank the person for asking for your material AND OFFER THEM SOMETHING ELSE, something with a price tag.
  14. Create or Find a nice button to use on your AWeber Web From.  (Create a Cool Button)
  15. Create a Basic Web Form in AWeber.  The Basic Web Form will be at the very least a place for the person to put their email address and a SUBMIT button.  AWeber provides you with the HTML code to insert into your Squeeze page or Widget.  When people enter their email and press submit, the information is sent to AWeber and the person is automatically added to your list. ( Simple Squeeze Page and Create a Cool Button )
  16. Paste the HTML code into your Squeeze page and or widget.  ( Simple Squeeze Page )REGULARLY IN AWeber
  17. Send one time Broadcast messages to your list when something new and unusual or useful happens.
  18. Check the Statistics. ( Basic Reports )

 

Web Forms – What are They?

Web Forms – AWeber’s name for the HTML generated text fields where your lead enters their name and email address.  They have some fancy ones, but we are interested in creating basic web forms.

The AWeber Web Form Menu Option

The Web Form Menu brings up a list of all the forms you have created for the current list.

Make sure you are working on the list you want.  The drop-down menu near the left top tells you what list is current.

Click on the Green Create-a-New-Web-Form Button

AWeber Web Form Menu Option

webform-aweber-1

Next you will see the Web Form Editor.  The middle bar will show a number of templates.   We are going to choose a basic form.

Note:  All we want from the form is the text fields and the submit button.  Some of the template have graphics at the bottom.  They cannot be deleted without a lot of work.  Don’t choose one of those.

Web Form Editor

webform-aweber-2

I chose the “Modern” template for this example.  It does not have too much to delete.

NOTE:  After I have created one in any of my lists,  I can click on the “My Templates” option on the left.  This is VERY STRANGE.  It looks like every form you have created is saved as a template.  However AWeber does not save the final Web Form.  It keeps the fancy button and some of the colors.  It does not recognize that you deleted fields.

After I clicked on the Template of my choice, a menu pops-up.  This allows us to change the colors and choose the template

Confirm Template

webform-aweber-3

 

Now hover the mouse over each field EXCEPT the data entry fields and the submit button.   Find the Red X that appears and delete the sections.

Delete Sections

webform-delete-fields

When you are done, the form will look like this.

Real Basic Form

webform-aweber-4

Note the little icon the arrow is pointing at.  You can click on this and drag it to the right to make the form wider and to the left to make it narrower.  We will use that in a minute.

We could actually save this Basic Web Form and use it.  I’d like to pretty it up some.   There are five things I’m going to fix.

  1. Make the background transparent so that it fits into any background you may be using.
  2. Change the colors of the text fields.
  3. Remove the labels from the top of each field.
  4. Use the Cool Button we created in the last post instead of the super dry button that is there.
  5. Delete any lines between the two text boxes and above them.

Fix 1: Make the Background transparent

Let’s make the background transparent.  This will make the form merge seamlessly with any background you may be using.

Choose Background Color

Webform-background-color

 

Make sure that the drop-down on the left says “Body” and click on the small globe beside the word “Background”   You will see this screen.

Background Color Picker
webform-choose transparent

Click on the “No Color” Radio Button and then click OK   You will see the red slash in the background color box when we return to the editor screen.

Transparent Background chosen
webform-transparent

Fix 2:  Change the colors in the Text Fields

Right now the text fields are white.  If your Squeeze Page background is while, you have a white on white with a 1 pixel border around the text boxes.  We could make a bigger border, but it is much better to use a color to say “Fill me in!” and change the color while the lead is typing in a field to say “This is the field being edited.”  Let’s Change the colors.

Change Text Colors

webform-aweber-6

Either click on a text field or click on the drop-down.  Either way change to the “Inputs” value.   Click on the “Advanced” tab that appears on the right.

Advanced Input Field Color Screen
Input Form background Color Picker

Click on the small globe by the Background Color.   You will see the color picker screen.

Input Fields Background Color Picker Screen
input form background color to yellow

Enter the code “ffe910: into the box by the arrow.  The is the color (approximately) of the button we created in the Create a Cool Button Chapter. If you are using a different button, use the background color that matches your button.  The fields and the button should look like the belong together as a set.

Click OK.

Do the same thing for the “Selected” color.  I use a very light gray.  Something that is NOT white and yet is light enough that the black text that will be filled in stands out.  ALWAYS be sensitive to the contrast between text and it’s background.   I just clicked on a shade of grey that looked okay to me.  Here is the code: “ccc9b6” if you want to use the color I chose.

When we are done the advanced tab looks like this.

Finished Changing Input Text Colors

input form - colors changed

Fix 3: Remove the Labels from the Top of Each Field

In the Very Simple Squeeze Page that I showed you how to build, one of the issues is keeping everything “above the fold.”  This means not requiring the Lead to scroll down the page to see anything that is critical .    One way to save a couple of lines is to take the label “Name:” and the label “Email:” off of their own lines and insert them into the yellow text fields.  This saves two lines. and makes the Web Form more compact.  This is also important if you are using this in a widget in your blog’s side bar.  You want to use the least space possible.

Click on the Name text field (the yellow text entry field).   You will see this screen pop-up.

Name Field – Edit Screen
Change Name Field


Delete the word “Name:” from the Full Name Label: and click on the “Show” link.   Here is what you will see:

Name Field Edit:
webform-aweber-11

In this image I have already filled in the word “Name:” in the “Options:” field and checked the “Remove Text When Clicked.: check box.  BTW:  The “Remove Text When Clicked” field usually does not appear until you start to type something in the Options: Value field (where I put “Name:” above.)

When you click on the Green Save button you will see that the label over the Name filed is gone and the word “Name:” is now in the yellow box.

The email field is a little different.  Since this field is always required, AWeber uses a different pop-up screen for it.  Click on the Email text entry field and this pop-up screen appears:

Edit Email Field Values:
webform-aweber-12

In this image I have already removed the word “Email:” from the Label field and put it into the Value: field.  I also checked the “Remove Text When Clicked” Check-box.

The image in the next section (on using the Cool Button Image) shows how both fields look.)

Fix 4: Use the Cool Submit Button

In a previous post (Create a Cool Button), I gave you a link to a button that said “Get Instant Access!”  Here is the link again (Download the Button).

If you are going to use this button, I suggest that you download it, use the Media menu in your WordPress side menu, upload it to your blog and copy the URL.
You need a URL that points to the button you are going to use and that points to a location on the Internet.   Others can’t access a button on your hard drive (even though it often looks fine to you.)

We want the little drop-down menu to say “Submit.”  You can click on the existing blue Submit button or click on the drop-down menu and change it there.

Submit Button – Advanced Tab

submit button - advanced

Click on the “Advanced” tab that appears on the right.  You will see this.

Submit Button – URL Text Entry Field
Place to Enter a URL for Your Button

Paste the URL for your button into the box and click somewhere else on the form.  Your Button should appear immediately.

Submit Button – With the Fancy Button
submit button - advanced 3

Okay – that looks much better. The only thing wrong isthe button is bigger than the text fields.  Click your mouse on the little icon that is on top of the button and drag it to the right until you are happy with the look.

Submit Button – Final Look
submit button - advanced 4

 

 Fix 5.  Delete any lines you can from the from

Just click above the text and hit the delete button to remove any empty lines that you can.

Then Click just to the right of the Name: text entry field.  You will see the flashing cursor look like it is actually inside the Text field.

Delete Lines between Text Fields:
webform-aweber-19

 

I usually do a shift -Enter and then hit delete until the text fields are right together.

CLICK the SAVE FORM BUTTON and then the Go To Step 2 button.

We Finished the DESIGN Sub-menu.

Setting Sub-Menu Options:

In earlier text I’ve mentioned tat the grey images right above the design screen are actually tabs or sub-menus.   After your click on “save Web Form” and “Go To Step 2” you will see that the second image near the top is now colored.  We are in the Settings Sub-menu

Here is what the screen will look like when we have finished with it:

Settings Screen

webform-aweber-14

Starting at the top, you can see that the “Settings” Sub-menu is highlighted.

Fill in a name for this Web Form.

Change the drop-down to “Custom Page:”

Fill in a URL – I’ll talk more about this soon.

Change the “Already Subscribed” drop-down to “Custom Field”

Fill in the same URL.

Click the “Save Web Form:” button

Click the “Go To Step 3” button.

Let me explain why I filled the fields in this way.

This Web Form is going to be on a Squeeze Page or in a sidebar Widget.  Here is where I talk about creating Basic Squeeze Pages

If you have read the previous posts in this series, you may remember that  in the Create Lists post, I suggested that you create a list for each ethical bribe.  When a lead fills in this form, they are subscribed to that list.  I also used AWeber’s automation feature to automatically subscribe them to my main list.  In the Create Follow-up Emails post I explained that the Day zero email from this list says: “Here is the download you requested…..”    The Day Zero email from the main list says “The material you requested will arrive in a minute in a separate email.  Check you SPAM if you don’t see it.”  The Ethical Bribe Day Zero email is very specific.  It names the download the lead requested.  The Day Zero email in the main list is generic.  It will be used for any Ethical Bribe you may create now or later.  It does NOT mention the name of a specific download.

In the Basic Squeeze Page post I also talked about creating a Thank You Page.

The URL that is filled in in both of the URL fields is a Pretty-Link link.  Pretty-Link is a Plugin mentioned in the Basic Squeeze Page post.    It points to the Thank-You page on your blog.  The reason for using the Pretty-Link is two-fold.  First, Pretty-Link can show you how many clicks you got on any of its links.  Second you can create a new Thank You Page or Split Test between two Thank You Pages and just point the Pretty-Link link to a different page.  You do NOT have to go back and change all of the Web-Forms that pointed at that Thank You Page.

Last but not least, I let people download my eBooks more than once.  If they lose it and want to download it again, I do not want AWeber to tell them “Already Subscribed” (i.e. YOU CAN”T HAVE IT!”).  AWeber will not allow the email to go into a list twice.   This is a good thing since as people download more than one of your ethical bribes, they will be automatically added to your main list multiple times. AWeber takes care of this by quietly noting that the email address already exists, so it isn’t added.

Almost done here!

Once your have clicked the “Save Web Form” button and the “Go To Step 3” button, you will be sent to the third sub-menu in the Web Forms section – Publish.

Publish Screen
Publish 1

You can see that the “publish” sub-menu is active (It has color).

Click on the “I Will Install My Form” button – it’s big, but it is a button.

Copy and Paste Screen
Publish 2

Usually the “Javascript Snippet” button will highlighted as the default.  Click on the “Raw HTML Version” button  (Note:  At the bottom I like to UNCHECK” the check box.  It makes it easier to fiddle if I need to.

Highlight all the HTML code in the middle of the screen (it should already be highlighted for you) and then either Ctrl-C (or Cmd-C) or Right-click copy.

You are DONE with the Web Form Screen.  You have created one of your first basic web forms.

Paste the HTML Code into Your Squeeze Page or Widget

Go back to WordPress and Edit Your Squeeze Page.   You will need to change the Editor to Text Mode (some Themes call it Source mode).

Change Editor to Text/Source Mode

Change to Text Mode

Once you click that button, you will see HTML.

 

HTML VERSION of Your Screen
Edit Text

In a way I’m cheating on you here.   You first Simple Squeeze Page will NOT already have the AWeber HTML code in it.  However, I find it lots easier to clone and existing form and swap out the headline, the image and the AWeber form than to start with a blank page.  If you do the same then you will see this a LOT more than your see the empty screen.

Here are the two lines I want you to add:

<div style=”text-align; Center;”>

<div style=”line-height; .0;” >      <– that is a point zero at the end.

Since I cloned an existing form, the AWeber form that is on the page looks right, but it is NOT.  If a lead fills out that form, they will be added to the list I copied the code from.

We need to replace the existing code and insert the code you copied from AWeber..

The three arrows show you 1) the code that will center your form.  2) code that will remove the padding between the two text entry fields.   You will  have to add this  and put a </div> and </div> at the very bottom of your form.  Everything between the these sets of commands will be centered and will have no space between lines of text.

Lines that start with <!– are comments.  AWeber places a comment field at the very top of its code.

Here is what the bottom looks like

bottom of AWeber Code

Text Inserted At Bottom of AWeber Code

 Here you see the comment line that ends the AWeber code and the </div> that ends the centering command and another </div> to end the command that removes padding between lines.

All of the AWeber Code is between two identical Comment Lines, just like the one shown above.  Delete the two comment lines and everything in between them.   Paste the new code you just got from AWeber into the same place.

Click on the VISUAL Tab in the upper right corner.

Form Looks Wrong
New aWeber Code

 After we switch back to visual mode the form looks wrong:

  1. The text data entry fields do not have the yellow color
  2. There are spaces between the lines.

Click on Save Draft   That takes care of putting the color into the text fields.

Delete the lines again.

After the “Save Draft”

After Save Draft

Deleting the Blank Lines Between the Name Field and the Email Field
webform-aweber-19

  1. Click above the Name Field and delete any lines that you can.  (Sometimes you have to fiddle here.   Ctrl-Z will undo the last keystrokes if you delete something you didn’t mean to.)
  2. Click just to the right of the Name Field.   Press Shift-Enter and then delete until the lines close together.
  3. Do the same thing at the end of the email field to move the button up.

 

After Deleting the blank Lines
After Deleted Lines

 

PRESS PUBLISH – You are DONE

Finished Page
Finished Simple Squeeze Page

Next time we will look at AWeber Reports and Statistics

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

Dr Hale

↓ ↓ 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: HaleYes@HalePringle.com

 

P.S. If you are working to move your business online and it all seems overwhelming, I can help!  Take a look at http://HalePringle.com, or sign up for the free coaching call. You can email me or give me a Skype call. 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 Network Marketing. I can help you with Lead Generation, the feeling of overwhelm, blogging, and even career change. Add that to the finest mentoring on the Internet (Ann Sieg’s Team and Inner Circle) and you have a Winner!

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 will ask if i need any help and tell my friends also,thankyou very much

  2. Link exchange is nothing else however it is simply
    placing the other person’s weblog link on your page at appropriate place
    and other person will also do same in favor of you.
    natural anti inflammatory supplements for a dog recently posted..natural anti inflammatory supplements for a dogMy Profile

  3. Hi, all is going perfectly here and ofcourse every one is sharing
    data, that’s in fact fine, keep up writing.
    water coolers recently posted..water coolersMy Profile

Trackbacks

  1. […] post Basic aWeber Training – Basic Web Forms appeared first on Hale Pringle | Online Lead Generation and […]

  2. […] I wrote a whole blog post on this topic.  You can read that here  Creating a Simple Web Form […]

  3. […] We Created a Web Form and inserted into the Squeeze Page […]

  4. […] submit, the information is sent to AWeber and the person is automatically added to your list. ( Create a Web Form , Simple Squeeze Page and Create a Cool Button […]

  5. […] submit, the information is sent to AWeber and the person is automatically added to your list. ( Create a Web Form , Simple Squeeze Page and Create a Cool Button […]

Speak Your Mind

*

CommentLuv badge

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