Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 14 – Part 6 – Create a Web Sign Up Form

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to Part 6 of Lesson 14 of the Build Your Own E-Commerce Website tutorial series. In this sixth part of the lesson we are going to add an email web Sign Up Form that integrates with AWeber and allows a download from our WordPress business website after they have completed confirming their email address.

Create a Web Form

Come back over to AWeber, go to my account and we’ve got the prospect list which is the one we want to select. With the prospect list we are going to add a web form. So select Web Forms; we are going to create a new web form and we’re going to create it from a template.

They have lots and lots of templates here. This template might be familiar to you from the free sign up on my site. If you switch to Popular, for example, you can see a whole bunch of different forms here. Under New they’ve got some new different forms and if you open these up you can see that often you can change the colors. So there’s a fair degree of flexibility associated with that. There are a lot of different styles and you can change colors for each of those or a find a style that you like and stick with it as it is.

We are going to go to the Generic forms and pick the Pointer which is this one here. We could use any one of these. We are going to pick the Alert and we’re going to use this but then we’re going to change elements of it. Say Load Template and hide the templates up here so we can see the whole editor. We’re going to start off by editing this.

The first place it takes you to is Form Type. You have three choices here: you can have an In-Line form which sits in your page, you can have the Pop-Over, Lightbox or Pop-Up windows. For our WordPress business website purposes we’re going to use In-Line.

It’s going to go in our sidebar which is 320 pixels wide so we can set that here. This doesn’t really take input the way you’d like it to. You pretty much have to put it at the back, delete the numbers that are there and then add your own. Now that we have the right width we’re going to go on to the header.

Select Header here and we can start typing header text. We’re going to use “Get Our Free Ebook” for the header and use the Arial font family at 24 point and I want it to be bold and the color to be a very dark gray. Say OK to that and it comes up here. I would rather this went the entire page so hit Edit Header and select Advanced. You can see that we have a Padding of 75 pixels there and I’m going to take that down to 50 pixels. I’m going to reduce the bottom padding to 10. Okay so that’s got our header.

Next go to the body and I want to change the background color and squeeze these things in a bit. First we’re going to change the background color to the yellow I’m using on the other site, #ffff81, say OK to that. That brings up the yellow color.

Next I want to squeeze these in so instead of 10 say 20 and because these are linked they both changed to that. Instead of 20 make it 25. Above this I want to put the name of our ebook. So come up here to Text and start typing it in. The name of it is “Build Your Own E-Commerce Website”. Select that text and make it Arial with a font size of 16, make it bold, make the color red and italic. Say OK.

Let’s drag it up here. So now it is between the header and the content below it and then I want to edit this a bit more. Center the text, say OK. I want to reduce the height of this padding back down to 5 – close. That’s pretty good.

Our name and email are fine. Our Sign Up button is fine. We’ll go ahead and keep that there but I don’t want to keep this here — so we’re going to remove that. Then I want people to know what’s going to happen here so I’m going to add text one more time. I’ll say “You will be directed to the download page after confirming your email address.” Let’s center that, make its font size a bit bigger and say OK to that. Now we have our form.

Web Sign Up Form Settings

Now we’re going to save this web sign up form for our WordPress business website and go to Step 2 which is the Settings. Under Settings we’re going to call this “Ebook Download”. For the Thank You Page we’re going to stay on the current page when they sign up. If the subscriber is already subscribed we’re going to leave it as the Basic Version which means they’ll see a message that says that they’re already subscribed to the site. We don’t need the Advanced settings so we’ll save the web form again and then we’ll go on to Step 3 which is publishing.

Publish the Web Sign Up Form and Add it to Your Site

Now I’ll show you the easiest way to publish this. Select “I Will Install My Form” and then you’re going to use this Javascript Snippet for that purpose. This Javascript Snippet is right here, copy it, come back to your WordPress business website and go to Widgets. Find a Text widget down here, drag it up, put it right there below that and paste that Javascript text in and hit Save.

Let’s refresh our site and you will see that there it is. We have our AWeber form right here so somebody can fill this out, hit Sign Up Now and then they will go through the whole process.

Make Changes to the Form After it has been Added to Your Site

What happens if you want to change this text “You will be directed to the download page” because it’s not noticeable enough? Or maybe you want to put it in the footer instead. Come back over to our AWeber web form and go to Web Forms. We’ve got this one web form so if we hit Ebook Download, we could copy this information here, remove that thing, hit Edit Footer and paste it. Say OK. Hit the Save the Web Form, now if you come back over to your WordPress business website and refresh it you will see that this is changed.

That’s how easy this is. You have complete control over how this looks. You can create an email sign up from from scratch, you can take, as we’ve done here, a template and revise it. Anytime you revise this form it’s going to be revised on your WordPress business website so you don’t have to re-paste it in again.

That wraps up Part 6 of Lesson 14 of the Build Your Own E-Commerce Website tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one