How to Create a Double-Opt In Email Web Form

This entry is part of 5 in the series Starter Email
Welcome back to another session of the Upstart Liftoff training. This video will be about creating a GetReponse Campaign, Thank You Page, and a Web Form.

 

So, to set up a form, in Get Response, you will need to do three steps. You need to

  • Create a campaign
  • Build the web-form
  • Finally, we’ll put the web form on a page on your website.

Why this matters

All email marketing begins with a list. A webform is the front door to building a list.  However, your list may need different forms, such as one to go on your facebook fan page, a different form might be on your front page, and a slightly different form might be on an inside page or a sales page.

Things to Watch For in this Video

  • How and Why you should use different forms for different pages
  • How and when you should use a form that does not leave the current web page
  • How to put a web form on your WordPress post or page
  • How to put a web form in a “widget”

Resources in this Video

If you haven’t already created a GetResponse account, here is a quick link to help you get started with GetResponse quickly. Remember, you can start with a 30-day free trial. That’s one of the nice things about GetResponse.

Also, GetResponse has a very nice form builder that makes creating a web form very easy.

 

Watch this Video Below

 In order to keep our videos up to date, we are linking directly to GetResponse Videos

Add ‘From’ Field

1-2-3 Custom Web Forms

 

Text in this Video

How to Create a Double-Opt In Web Form

Welcome back to another session of the Upstart Liftoff training. This video will be about creating a GetReponse Campaign, Thank You Page, and a Web Form.

In this video, we will be creating a webform to put on your website. Before we do that, let me show you the steps that will happen when someone sees your web form and signs up. I’ll show you an example on one of my client websites. This is a genealogy website called AliceTurley.com

First, the guest will see the webform that we place on our web page.
Second, when the visitor clicks the form, two things will happen:
The visitor will be sent to a temporary “Thank You” page and an email will be sent for the user to confirm that he or she submitted the form.
Third, when the visitor checks this email and clicks the confirmation link, the he is finally sent to the Confirmation Page URL. That’s the final destination that we want the user to see, but they don’t see it unless they confirm their subscription.

So, to set up a form, in Get Response, you will need to do several steps. You need to

Create a campaign
Build the web-form
Finally, we’ll put the web form on a page on your website.

You should already have created a “From Field” in the previous video, “How to Create A Get Response Email Account.” If not, go back and review that video and set up a From Field for your company.

Let’s quickly define the three parts for a form.

Additional Text Not in Video: A Campaign is a List.

 

 

 

A campaign is really just as a list. So if I say list or campaign, they mean the same thing. You might send newsletters to that list many times. But you might also send a series of automated emails, called a follow-up sequence to each person who registers for that list. We’ll actually discuss and create the follow-up sequence in the next video. But for now, just understand that in GetResponse, before you set up a web form, you actually need to have a list created to collect all of the email addresses that will come through the form.

You can actually have many lists for your website. For example, you might have a list for those who are interested in your newsletter, another list or campaign for those who are interested in your primary product, and maybe a third list for those who finally purchased that product. We call that segmentation, and we discuss that in our Advanced Email Marketing videos. For now, just understand that you need to create your first campaign so that you can set up a form.

Just as you can have many lists, you can also have more than one form for each list. I often do that because I might have a skinny form to be used on the side of my page, another form that I might use on a full page. Or, I might even put a different form on my Facebook fan page. There are other reasons as well, which I will show a little later.

So keep them straight. The campaign is the list of people who have subscribe. The form is how you collect the information that goes in the list, and you can have more than one form that will go to the same list.

For each campaign list, you need to have an Opt-in Confirmation page. This is the page that you will send your user after they have both registered but and confirmed. The really nice thing about GetResponse is that this Opt-in Confirmation page can actually be any page. So if you promised to give your customer an informative video or other great content when they register, GetResponse will not send the visitor to that page until he or she has confirmed their registration. We’ll show that as we go through the process.

Now there’s also an intermediate page that GetResponse uses between submitting the form and waitng for the confirmation. This is set up with the form. This keeps the user from going to the final Confirmation Page URL page before they have confirmed.

Now listen carefully for just a minute. I want to explain a concept that stumped me with GetResponse for a long time. They call it the Confirmation Page URL.  Once I understood this, the lights when on.

The intermediate page belongs to the form.
The (Confirmation Page URL) belongs to the campaign.

I hope that all makes sense.

Let’s get started building.

Remember, here is our list of things to do:

create a campaign
set your general postal return address for CAN-SPAM
set your email confirmation language
update the signature message (optional)
a thank you page (Confirmation Page URL)
select your social media accounts
then build the web-form
set up an opt-in reminder page (optional)
Finally, we’ll put the web form on a page on your website.

First, I’ll assume that you have already watched the video How to Create A Get Response Email Account and that you have set up an account and created a From Field.

So, when you first login, you will be on the Dashboard. You can click right here at any time to come back to the dashboard.

On the Dashboard you can see a Link called “Create List”. Don’t use that. We will set up a campaign. You could use that to import customers after you set up a campaign. Up near the top-right it says, your current campaign. You will select the drop-down menu here, pull it all the way down to the bottom and select Create New Campaign.

I’m going to create a campaign called “BearsNewsletter.” Now, I’m purposely making a mistake which you’ll see in a minute. I’ll explain later. Next, click “Show Details.” This is where you select your From Field. I have previously created one called admin@bearsotp, which I’ll select now. I’ll set the Reply To address to go to the same place. I could have set two different From Fields, had I wanted to. You might want to do that if you want your email to come “From” your company address but you want your reply to go to a “No_Reply” email address.

Now, If I have previously set up a campaign, I could have clicked Copy Settings, right here. That saves a some effort and makes your campaigns consistent, if you have similar campaigns. But I’m starting new, so I won’t click Copy Settings. I’ll click Create New Campaign.

Here’s the error. GetResponse does not warn you that your campaign name must be all lowercase with no spaces. So I’ll warn you now to make sure you enter your name in lowercase letters. So, I’ll just quickly fix that and I create the campaign now.

You now have a window to create a newsletter or follow-up, but we’re going to first create the form so we can add people to the list.

Go back up to where it says “Your Current Campaign,” and instead of selecting the drop-down, click on the little gear icon. This brings up the settings for the campaign that is selected.

Step 1: Click the General tab.
Create your General CAN-SPAM compliant mail address. This should pick up your company address, but if you have multiple websites, you may need to update it, like I am doing here. Scroll to the bottom and hit Save Settings.

Step 2: Click the Language tab.
Here, you are selecting the language for this form. This is another reason why you might have multiple forms for a particular list. You might actually use one form for one language and another form for a different language. Since I will just be using English, I’ll skip down to the Confirmation Template.

This is where you set up the words that will be included confirmation email that will be sent to the new subscriber. Most of the email is written by GetResponse and you cannot change it. All you can do is change the template, change the subject line, and add a little bit of personalized menu.

For the email confirmation letter, I always select Plain instead of HTML for the message type.

Pull down the next drop-down menu and select one of the pre-approved messages.
Wherever you see [[responder]] or [[FirstName]], it will personalize your message. [[responder]] means the name of the email list. Remember, that’s the name that was required in all lower case.

Next, Pull down the Pre-approved Subject Line. You can write your own, but you then have to submit it to GetResponse and wait for them to approve it. It might take a day or two, so I always use a pre-approved subject.

After you have selected your Subject Line, enter some brief welcome text. For example, I’ll type, Thank you for registering for the Bears and Other Top Predators Newsletter. We look forward to sending you interesting facts and photos about bears and some of our other charismatic predators in the wild. We think you’ll enjoy it.

You only need to enter this in either the Plain message field or the HTML. I chose plain above, so I’ll enter my text there.

Finally, enter a signature.

You can preview your message if you would like. When you are finished, make sure to click Save Settings

Step 3: Click the Message tab. (optional)
The only field that you need to worry about at this point is the Signature field. This is not the CAN-SPAM address. This is the signature that will only be included in any email if you use the [[pre signature]] personalization code in your email.

Until recently, I have rarely used it. However the FTC now requires that we clearly state any affiliate relationship with a company if we endorse their product. So, the signature in the Message tab is the best place to include this. You might want to say something like:

If you purchase anything through a link in this email, you may assume that we have an affiliate relationship with the company providing the product or service that you purchase, and that we will be paid in some way. We recommend that you do your own independent research before purchasing anything.

This text will not appear in your email unless you include [[pre signature]] in your email. Then it will automatically be included.

That’s all for this tab.

Remember to hit Save Settings if you make any changes.

Step 4: Click the “Contact”  tab
On this page, you have the choice of being notified whenever a new person joined the list. I like to set that, but I will turn it off if I think I’m going to get hundreds of emails per day, like during a launch process. Also, you can select to forward emails to a different email address than your default address. I usually select “Do Not Forward.”

The next field is the Confirmation Page URL. This is the page that you will send your new subscriber AFTER he or she has confirmed. This is important. This is what we would normally call the Thank You page. GetResponse calls it the Confirmation URL. It’s the final page that this form will send your users after they confirm. I’m just going to set this to may front page of my Bears OTP website. But often when I am setting up an email campaign, I’ll put text above my form that says something like “If you subscribe, I’ll show you a really cool video that teaches XYZ. You can see how I did this on my LivingGardenSeries.com website. We’ll show you more about this when we are teaching Landing Pages.

For now, I’m just setting this to my BearsOTP.com front page.

The only other field that I normally change on this page is the Default Name. This is used when you personalize your email and for some reason one of your email addresses doesn’t have anything in the name field. In that case, it will use whatever you type in this field. This should only occur if you have imported names and you didn’t have complete data. So, I’ll change this to “Outdoor Enthusiast”

The other fields below are only used if you do not set a Confirmation Page URL. Actually, that’s only true for the Customize ‘Confirm Page’. However, I generally leave the others blank as well. We will teach about the Next Message Page when we are doing the advanced training.

Scroll to the bottom and Save Settings.

Step 5: Click “Social Media” tab
For now, skip the RSS/Web Archive. This will be taught in the advanced training.
If you have set up your Twitter and Facebook accounts when you were setting up GetResponse, you can select them now. Just pull down each drop-down menu and set your social media accounts.

For now, we will not set the Blog-Announce, but we will show you how to integrate RSS and your blog with your getresponse email campaign in the advanced GetReponse training.

Click Save.

Now you can see why, if you are creating a similar campaign, you might want to copy all of the settings.

However, now were ready to create the form.

Before I create the form, let me explain the steps in collecting an email address.

1) The guest will see the webform that we place on our web page.
2) When they click the form, two things will happen:
First, the user is directed to a temporary “Thank You” page. That page tells them to check their email to confirm the email subscription.
Obviously, the second thing that happens is that a Confirmation email is sent to the user.
3) When the user checks their email and clicks the confirmation link, the user is finally sent to the Confirmation Page URL.

Creating the Form
Look right up here. Click on the Web Forms menu, and click “Create New.” That will bring up the default web form design.

Now the web form is pretty simple. As a matter of fact, Get Reponse has many templates from which to choose. I can choose something very plain, like this one. When you see this checker board background, it means it is transparent. You can put this over any color on your website. I actually use this one quite a bit. I can just hit apply and it will be down in my designer window, just like that.

But I’m going to choose a different template. You can choose from the categories. Here’s one for health care. Obviously I don’t need that one, so I’ll just cancel. You can choose from any of the different categories. But I’m going to go back to one of the first template that I saw. I’ll use this 3D form on my BearsOTP website. But I’ll choose the green version of this form. I’ll click Apply.

I’m going to change my headline, add some different fields, update my privacy policy, and I’m going to turn off the “powered by GetResponse”.

Now I’m going to quickly edit my privacy policy. I usually add. We will never sell, rent, or share your personal information. Then click Apply. While I still have this selected, I’ll left justify this privacy policy.

Now I’ll fix my header. I’ll change my text and reduce the font size so that it can all fit on one line. Then I’ll click Apply.

Now, I can quickly drag some of the other fields, I can pull them from the available fields on the right and simply drop them into my form. Like this. In the advanced training, we’ll show you how to use many different fields for advanced segmentation. This can be very powerful, especially when your list gets bigger and you include more data from more sources.

I can edit the label if I prefer, but be careful. The more information you ask for, the less likely your visitor is to add the information and submit the form. However, when they are purchasing a product or requesting special information, they are more likely to give you more information. But the first time you encounter the website, you will want to be very cautious about asking for much information. So, for right now, I’m going to delete this field. Again, we’ll talk about using more fields in the advanced training.

Now I have the form looking like I want it. I’m going to save my web form. Now I click Next Step.

Selecting the Intermediate Confirmation Reminder Page.
Now I can give my form a name. I’ll call this Bears Newsletter.

This page is what is confusing. This page is called the Thank You page, but really, it will only point you to the web form intermediate page that waits until the user confirms. Remember in my example? This page is waiting for my final confirmation.

Confirm Opt-In, we always leave on. In the advanced training I’ll explain some exceptions, but they are rare.

For this window, when I refer to the Thank You page, just know that I’m talking about the temporary page which reminds the users to confirm their opt-in email.

There are three options.
Use the Default,
Build Your Own,
Stay on the Current Page.

I’ll just tell you right now that I rarely build my own. If you see the example page, it includes clear instructions. It shows the user exactly what to look for. I don’t want to re-create that. Of course, if you want to remove the GetReponse brand and make the website look exactly like your own, then you can create a page in your WordPress site and send the user to that page. You can create your own video or your own graphics and text. Most of the time, though, I use the default form.
The third option is to stay on the page.

Let me show you how I did this on the sample pages. Because of the way this website was built, I included a different form on a sales page. Because I don’t want them to leave the sales page, but I want to make sure that they have registered, I made this form (which looks very similar to the first) stay on the same page. Watch how it simply changes from “Sign up” to “Thank You”. The danger, though, is that they don’t check their email and confirm. So I put this note here. But at least I have increased the chances that this individual will actually sign up on my email form.

For now, we will not discuss the other options on the Default Thank You page. We will discuss these options in the Advance Training for GetReponse. We’ll also discuss the “Advanced Settings” in later videos.

Let’s Save our form and Then click Next Step.

The last step of building the form is to copy the Java Script to your web page. You can select the HTML instead, but I always use the JavaScript unless I am getting an error. The advantage of doing this is that if you need to make a small design change on the form after you have put the form on your website, it will automatically update. That isn’t always the case if you use the html. So I try to use the Java Script to make my life easier.

Ok. The final step of putting a form on your website is to paste the java script code in a page, a post, or a widget. For this training, I will do this very quickly. I later lessons, we will discuss more about design, so you might modify where you put your web form then.

Whether you put a web form on a page or a post, the process is the same. So I’ll show you how to do it with a post. Then I’ll show you how to put the same form in a widget on the right side of your web page.

Ok. right now I am logged into the back end of the BearsOTP web site. If we switch to the front page, you can see that we don’t have a form on the right-hand side, and we don’t have a post with the form. Let’s start with a post first. I’ll switch back to the back end. You can see that I have multiple tabs open in my Chrome browser. To add a new tab, all I need to do is hold Control-T. I could type in a new URL in the Title bar here. Or, any place where this is a link, I can right-click on my mouse and select “Open in new Tab.” This makes it very easy to switch between windows and see my progress. Most other modern browsers can do the same thing.

So let’s jump back to the back-end of my website. This is the Dashboard. I click up here on this little Down Arrow next to Posts. I can either click on New Post or I can right-click and open into a new tab. See? That’s how it works. Now I can switch back and forth between my dashboard and the new post.

Let’s give this post a title called “A sample web form”. Of course I wouldn’t really name this page that. I am only using this post to show you how to add it to a post or page. When I’m finished, I’ll delete this post. If this were a sales page or another page, I would keep it there. Let’s just add some text.

I have some in a text document. I’ll just copy and paste it quickly. Now, I’ll add a quick Headline and center it.

Now, this is an important thing to add. In order to add a java script code or html to a post, we must change click on HTML right here in the top, right corner or here on this HTML button. They both change the same thing, but they just show it a little differently. I’ll click on the top-right.

You you can see the HTML code that acutally builds the web page. Right now there’s not too much there. Just a few paragraph returns. You can see our headline tag. We’ll cover more HTML in our advanced training series called HTML and Languages. Now I would like to add my form right here between these two paragraphs. So I’ll jump back over to my web form in GetResponse. I’ll copy all of the text here. Then I’ll jump back over to my tab with the new post.

Now I’ll place my cursor between these two paragraphs and paste. From here, I would normally check the category and put in other meta data that we have discussed in the first Starter training series, but because this is just a sample post, I’ll go ahead and click Publish. That’s it. Let’s look at the page. All I need to do is click on View post. I like to right-click and open into a new tab. Now we can see the web form as it will look on the post.

There it is. Now, I would make other adjustments like centering it on the page, but we will show how to make HTML edits in our HTML and Languages series. You can watch those at any time.

Now. Let’s close this post, and go back to the post list. Because this was just a sample of how to put a web form on a post or page, I’m actually going to delete this post. I don’t need it. Nearly all of my web forms will go into a widget on the side of the page. I’ll just select this post and click trash. It’s not gone forever unless we empty the post trash. Again, we’ll discuss these things in the Website Maintenance, Under Tools &  Resources.

Now, let’s put the form in the widget, where we really want our Web Form to be.

Before we do that, let’s make sure you have one option set correctly. Under Genesis Theme Settings, General Settings, You need to make sure that you Select Content/Sidebar. You may not to use that setting later on. We’ll discuss when to change that in the the video Configuring the Genesis Framework in the 2nd Starter Series.

Now, Let’s go back to the BearsOTP front page. We’ll refresh the screen. We want our form to be right here in the top right corner. This is quite simple. We already have our web form code. All we have to do is create a widget and put in the web form code.

Let’s go back to the Dashboard. Under this menu item called Appearance, choose Widgets. This fun little screen comes up. We’ll do quite a bit with widgets in our video called Displaying and Working with Widgets in WordPress. Right now we will make a simple widget and add our email web form. We want to place our web form at the top-right. That is our Primary Nav Bar. So just click right here to display the primary nav bar. Now, all we need to add our web form is a Text widget. That’s kind of a generic widget that allows us to put any html or javascript code. So, I will click on the Text widget and simply drag it to the top part of the primary nav bar. It automatically opens up.

Now, let’s click this tab and jump back over to our GetResponse web form. It’s still there just waiting for us. Select and copy the code. Click this tab to jump back over to our back-end. Our window is still waiting for us. Click inside the window and paste. It’s that simple. Now, if you want to add some text above the form or below the form, you can do that as well. I’ll enter, the same text as we used in our web form on the sample post. You can put any html here that you might want. If you want to learn more about the HTML, you might watch our video Using Komposer or other HTML Editor with WordPress. That’s in the HTML and Languages training.

One last thing. I can either choose to add a Title or not. If you add a title, the Title will be formatted based on the template that you choose. I’ll paste the Title in here. Click save. Now lets update our front page. This part here is the Title. If I don’t like the different format, I can remove the title. Let’s go back to the widget. I’ll delete the title. For now, I’ll add an <H3> tag and put it down in the box. Now I’ll click Save.

Jump back over to the web page. Click refresh. Now you can see the difference. Just play with it a little. Remember to save your widget each time and then refresh your web page to see the changes. Pretty easy isn’t it. Well.

Well, that’s all for this video. You now have a web form.

One last note. If you are not seeing the widgets on your web page, watch the video Displaying and Working with Widgets in WordPress. Or, under Genesis Theme Settings, General Settings, Select Content/Sidebar.

 

Series Navigation