Setting Up Your Optin Form

Now I want to start getting into the details of LPG and how everything works. Once you understand the LPG method and how the system works, you’ll be on your way to cranking out amazing websites for you product and services.

In this chapter we’ll start with the "optin form" and then get into adding your content on the pages. First let me layout how the optin page works including the submission process.

The submission process

When a user first arrives at your opt-in page, he is immediately tracked and you will receive a hit in your LPG dashboard.

Note: Every time a user hits one of your pages, LPG will save this data in our database.  However, when pulling data from our database, depending on the platform used, that user will only be counted once.  We do this by fetching all unique IP addresses. This concept is important to remember because when testing, if you were to opt-in twice, you would expect to see two opt-ins displayed on your dashboard.  This would only be true if you used two separate IP addresses and two separate email addresses when you opt-in.  The email address situation will be addressed later in this section.

When the opt-in form is submitted, we will first validate the form submission using JavaScript.  There are three types of JavaScript validation, Basic, Advanced and Email.  They are explained below. 
Basic validation only checks to see if the field is empty.  If any field is empty, the user will be directed to enter a value or check or select an option.  Basic Javascript validation is already set by default and you don’t need to do anything more if this is the only validation you will require.

Advanced validation works with its counterpart Basic validation to validate your opt-in form responses, but depending on the type of validation you want to perform on a particular field, checks the value and starts to immediately remove the text entered by the user.   Advanced validation cannot be set by default and requires you to add it to each field that requires it.  This process is explained below. 
To add Advanced validation to a particular field, you first need to review the types of validations.

To enable this feature for a particular field, you MUST add the following code to each text or text area field you want to validate by adding an onkeyup event. 

For example, if you have a text field that ask for their age, your text field should look something like this:

<input type="text" name="age" id="age" onkeyup="validate('num',this);" />
Another example would be if you had a text field asking for their first name:
<input type="text" name="firstname" id="firstname" onkeyup="validate('char',this);" />

Using the GUI, this is how this action would be performed:

Email validation, like Basic validation is also set by default and requires nothing from you.  Email validation checks the field called "email and validates the value for an email address".  It’s also important to note that the "email" field is required unless you are using our extended opt-in form feature. This field however would need to be present on the extended opt-in form if not on the original opt-in form.  Required fields will also be explained below. Once validation has been performed, LPG software will connect to our server for further evaluation. 

Once validation has been performed, LPG software will connect to our server for further evaluation.  This part is very important since many of the features you will use come to life at this point of the submission process.

• Check for duplicate email addresses (explained below)

• Add the opt-in to the database

• Check for any auto-responder conditions and implement them

After our sever returns a response, depending on the use of an auto-responder, the form will be submitted.

Duplicate email addresses

When any of the popular auto-responders receive a duplicate email address, they will display an ugly error message and ask your user to return to the previous site and use another email address.  This creates several problems which LPG addresses.  These problems are explained later on in this documentation. 

To prevent these problems, if a duplicate email address is found, the user will be immediately redirected to the sales page.  This will not count as an opt-in!

Custom JavaScript errors

LPG allows you to customize your templates anyway you would like.  There are certain requirements that must be followed, but for the most part, LPG is very open to changes.  This however isn’t without cost.  Sometimes custom JavaScript can cause errors and in doing so, will cause validation to fail.  This can also cause other features from failing, like the Peel Away and the Exit Modules.  It is important to use JavaScript that is error free.   Remember, just because it worked on one of your other sites doesn’t mean it will work here.  Test everything before you decide to spend thousands of dollars on advertising!

Bypassing the Opt-in Form

You might want to bypass the opt-in form if you are sending emails to clients with the link to your sales page.  Obviously you already have their email address and you might not need to capture their opt-in form responses.  LPG allows you to bypass the opt-in form by specifying the "optin" variable and setting it to true.  The variable needed in the URL below has been has been underlined for clarification purposes.

http://www.your-domain.com/directory-to-LPG-files/index.php?template_type=2&optin=TRUE

Now that we know "how the optin form" (submission process) works. Let’s get into building an optin form on your page.

Building Your First Optin Form

All LPG templates have pre-built optin forms in them already. We did this so that if you only wanted to collect name and email address you would not have to build a form.

LPG will read your auto responder data that you put in on step #3 of the wizard.

Now, let’s say you want to build a custom form that would allow you to ask your visitors questions and get more information from them.

This is the chapter you’ll want to study.

On the next page will get started.

Inside your HTML editor you will see an icon like this, make sure you’re on the "Optin Page" when you click on this icon. This will insure that you add the pre-built form into the optin page.

When you click on this icon it will open up a window with a drop down menu. We recommend you select "optin1" (which is shown below). This gives you the most fields to choose from.

Below is a screen of the new form on the optin page. You will want to remove the pre-built form on the page so there is only one form on the page. LPG will only allow one form to work on the page.

Now that we have our new form template on our optin page we can start customizing the fields. Below is an example of what I did with this…

Now that I have the form looking the way we want, we have to set the "custom" field names. In order to do this we have to set up our auto responder with these three questions.

·         What color do you like best

·         How many people in your company

·         Describe yourself

Each auto responder system has different custom names. In this example I’ll use Aweber, but remember the process is the same. Here’s the process…

Creating Custom Form in Your Auto Responder System: Login to your auto responder system and create a new campaign or auto responder. Keeping with our example of the three questions we created on the last page…

• What color do you like best
• How many people in your company
• Describe yourself

We will need to keep these short and when selecting the field optin we’ll select "text" field. We do this because LPG is going to send the data into our auto responder system and it will put the visitors answer in a text field in our auto responder system. This will make it very easy for us to read the visitor answers.

Here’s how I would name the questions in my auto responder system:

•  color
• company amount
• about

Now I would write these custom name fields into note pad so I had them. Below are a couple examples of what this would look like using the different auto responder systems.

If I were using Aweber the custom fields would look like this:

• custom color
• custom company amount
• custom about

I would get this data from the html form code from the auto responder system (see example below).

Again the process is the same for 1ShoppingCart, InfusionSoft and Get Response. The custom names will be different than Aweber.

Now that I have my custom name fields we can go back into our optin page at LPG and name our fields.

Select the radio button (or whatever field you’re using) and then click on the form elements icon. This will pop-up a window like this…

We will then change the Name field from "radiobutton" to "custom color" and then change the Value field from "radiobutton" to "red".

Make sure all box’s are Un-Checked and then press the "Insert" button. You have now set the first custom field. When visitor selects "red" on your optin form LPG will then send the data "red" to your auto responder system.

We’ll not repeat this process for the other two radio buttons and we’ll keep the "Name" value "custom color" and change each value to each color "green" and "blue".

Let’s now work on the drop down menu. Here we’ll select the drop down menu and the form properties button will light up in our tool bar. Click on this just like you did with the radio buttons. You will see a pop-up window appear, but it will look like this…

Let’s get our next custom field from our note pad file "custom company amount". 

We’ll then change the Name field from "select 2" to "custom company amount". We’ll also delete the options #2 and #3 and then use the green "add" button to display our new options. 

Do not remove option #1 as this will make it so your visitor has to select an option. You’ll also want to "Un-Check the option that says "Multiple selections allowed".

Then click on the "Advanced" tab in the window and "Un-Check" all of these box’s (shown above).

We’re now all set to have this data sent to our auto responder system based on what the visitor selects.

We have one more custom field to setup which is our text area. By now you should be getting the hang of setting up these custom fields. At first it might be a little overwhelming but once you get the first one working you’ll feel like a pro.

What’s important is that you understand the process.

Select the text area and the form element on the tool bar will light up. Click on this icon and a window will pop-up. Once it does we’ll change the Name field from "textarea3" to "custom about". See below…

Then click on the "advanced" tab and "un-check" all the box’s and then click "insert".

At this point we have just built a custom form that will send the data to our auto responder system. Now you might be wondering why we did not update the "First Name" field and "Email" address field. This is because LPG takes care of these fields in the background.

Since we know every form will have a name and email field we can control these in the back ground. So you’ll never want to adjust these names for these fields or you’ll break the form.

In the next chapter I want to show you and advanced feature we call the "Extended Optin Form". This feature allows you to create a "split form" where we break one form into two forms.

This is great if you want to collect a lot of information from your visitor but do not want to overwhelm them when they land on your optin page.

[NOTE: If you're not a Lead Page Generator member and would like to sign up - click here]