Video Transcript:

0:00 - Introduction

0:18 - Objectives

0:36 - Prerequisites

0:51 - Creating a Newsletter Signup Form

1:12 - Contact Form Advanced Widget Settings

2:13 - Form Submission Settings

2:51 - Using Form Controls

4:22 - The Submit Button

4:44 - Additional Options and Testing

EverWeb’s Contact Form Advanced widget can create a wide variety of forms for your website. In this video we are going to create a newsletter sign up form.

The main objective of a newsletter sign up form is to get the email address of your visitor so that you can market to them in the future.

For your visitor, the newsletter sign up should be as easy, quick, and as simple as possible to complete.

We recommend using the latest version of EverWeb when creating contact forms.

Please note that the following is only an example newsletter sign up form. Yours may differ.

First, create the page on which you want to place the newsletter sign up form, if you have not done so already.

On your newsletter sign up page, go to the Widgets tab, and drag and drop the Contact Form Advanced widget, on to the page.

Complete the following fields:

Email Address to Send Form To. This is the email address that your visitors will send their newsletter sign up form to.

If you have purchased EverWeb’s Contact Forms Enhanced Add-on click on the dropdown and select the add on.

The next step is to name the form. This is useful if you have more than one contact form in your site. In this example, I am going to call it DJ Newsletter Signup.

Next select the Mail Sending option you want to use. This field tells EverWeb how you want to send emails. Most users will choose either SMTP, or EverWeb if you are using the Contact Forms  Enhanced addon.

Next complete the SMTP Settings section.

For help on completing this section, click on the Help icon.

Now that you have set up your form’s basic settings, it’s time to focus on the design.

Scroll down to the form Submission Settings section. The first field in this section is ‘Email Subject’.

As this is a newsletter sign up form you will probably want the email title to be something like ‘Newsletter Sign Up Request’.

The next field is the Email Sent Success Message. You can leave this as it is, or customize it as you want.

EverWeb allows you to choose from three different form styles using the Form Style dropdown menu.

The next section is Form Controls. This is where you define the fields and labels that you want to include in your contact form.

As simplicity is our goal for this form, delete the name and message fields.

To do this, simply click on the field in the list you want to remove, then hit the delete or backspace key.

Currently the name of the field is just ‘Email’, so let’s make it more user friendly.

Double click on the Form Control ‘Email’ and edit the label to be ‘Enter Your Email Address’.

Next we are going to place some help text in the field.

This is optional, but adding placeholder text helps your visitors complete the field correctly.

Enter the help text ‘Fill in your email address here’ in the Placeholder Text field.

As we are keeping things simple, we are not going to add any Control Instructions.

We will however set the maximum content width of the field. This is so that the field will display properly on any device.

In this example I am going to set the width to 250 pixels.

This width is narrow enough for the field to fit on one line even on a small mobile phone.

I will now set the alignment to center.

Now scroll down to the Fonts and Styles section.

Use the Control Label Style and Form Fields Fonts button to set the font style of the form.

Lastly, let's customize the Submit Button in the Submit Button section. Change the Submit Caption to Send

.I will then set the button alignment to center.

Next, check the Use Styled Button checkbox and set the font and color of the button as you want.

You have now completed your Newsletter Sign Up form.  Optionally you can set up a confirmation email, but you will need to enable Spam protection first in order to use this feature.

Once you have finished your page design, publish your site, then test your form.