Mac SEO Blog

Keeping in contact with your customers is a vital part of maintaining and growing your business. The classic approach is to use e-mailable newsletters to engage with new and existing customers. Signing up to such a newsletter can be facilitated in a number of different ways such as through your EverWeb made website. E-mailable newsletters are a great way to introduce existing, new, and potential customers, to your products and services. An E-mail newsletter will probably be just one of a number of methods you will use to maintain contact with your customers. Usually we recommend using a couple of contact methods such as such as blogs, vlogs, social media and so forth. Choose the methods that will give you the most coverage but take the least amount of your own effort.

In this blog, we are going to focus on creating an email newsletter sign up form in EverWeb. This is easy to do using EverWeb’s Contact Form Advanced widget. This widget is the most flexible way to create a contact form that blends in perfectly with the rest of your site, whilst giving you all the tools you need to create the form you want. You may also be aware of EverWeb’s Contact Form widget. This is a legacy widget that, whilst simple to use, does not have the features, or the security, that the Contact Form Advanced widget provides. As such, we recommend using the Contact Form Advanced widget in all instances.

Newsletter Sign Up Form Objectives

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

For your visitor, a newsletter sign up form should be quick, easy, and as simple as possible to complete. Contact forms that take too much time to complete, are too complex to fill in, ask for too much visitor information, and/or raise privacy concerns will probably scare your visitors away.

When creating your own newsletter sign up form, we recommend using the latest version of EverWeb if possible.

Adding a Newsletter Sign Up Form To Your Page

To create your own newsletter sign up form in EverWeb, start by creating the page on which you want to place the newsletter sign up form, if you have not done so already, or use an existing page. For example, you may want your sign up form to be highly visible, such as front and center on your Home page!

Wherever you decide to place your newsletter sign up form, the next step is to go to the Widgets tab, and drag and drop the Contact Form Advanced widget, on to your chosen page.

Contact Form Advanced Widget Settings

After you have added the Contact Form Advanced widget on to your page, you will now need to complete the following fields in the Widget Settings…

Start with the ‘Email Address to Send Form To’ which, as its name implies, is the email address your visitors will send their newsletter sign up forms to.

The next field should be completed if you have purchased EverWeb’s Contact Forms Enhanced Add-on. Click on the dropdown and select the add on so that your form can use the add-on’s features.

The next step is to give your form a name, using the ‘Contact Form Name’ field. If you are only using one form in your site, this may not be important to do. If, however, you are using the Contact Forms Enhanced add-on it will become more important to specifically name your form. In this way you can more easily manage the data and email addresses that you collect from the different forms that you may create in your site.

The next field in the Widget Settings is the ‘Mail Sending’ field. This field tells EverWeb how you want to send emails, either using SMTP Details, PHP Mail, or via EverWeb, Typically the ‘SMTP Defails’ option is the preferred method unless you are using EverWeb’s Contact Forms Enhanced add-on, in which case you should use the ‘EverWeb’ option.

Setting SMTP Settings

Once you have completed the first section of the Widget Settings, the next to complete is the SMTP Settings section. Depending on your selection in the ‘Mail Sending’ field, you have different options available.

If Mail Sending is set to ‘SMTP Details’ you will need to complete all of the fields in the SMTP Settings section. If you need help filling out these fields, click on the ‘More Help’ button. If you have selected ‘PHP Mail’ you will not need to complete the STMP Settings and fields in this section will be greyed out. If you selected ‘EverWeb, again the SMTP Settings will be greyed out, but you will need to select a Contact Forms Enhanced add-on in the Contact Form Enhanced Add-On field.

Designing The Newsletter Sign Up Contact Form

After completing the contact form’s basic settings, you can now turn your attention to the design of the form. To do this, you will use 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 to title it as such e.g. ‘Newsletter Sign Up Request’.  The next field to complete, ‘Email Sent Success Message’, can be left as is, or customized as you want.

The following field in the Widget Settings is the ‘Forward to Page’ field. This field is used to redirect the visitor to another page within your website, once they have signed up to your email newsletter. For example, you may want create a ‘Thank you for signing up’ page in your site. On this page, you can then direct the visitor as to where to go next in your site, for example, your home page, or sales page.

The next field, Form Style, lets you to choose the overall style of your form using one of its three different options: Classic, Modern, or Transparent. When you choose a style, the widget in the Editor Window will automatically update, so you can try each style before choosing the one that suits your needs best.

Using Form Controls

The next section of the Widget Settings is probably the most important one from a form design perspective. The Form Controls section is where you define the fields and field 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 just click on the field in the list you want to remove, then hit the delete or backspace key.

The remaining field in the Form Controls list is ‘Email’, which we are going to rename so that its field label is easier to understand by anyone completing the form. Double click on the ‘Email’ Form Control and edit the label to be, for example, ‘Enter Your Email Address’. 

The next step is to place some help text in the field. This is optional, but adding ‘Placeholder Text’ will improve the chances of your visitors completing the field correctly. In this example, the help text will be ‘Fill in your email address here’.. We are not going to add any Control Instructions as the Placeholder Text help is sufficient for our purposes.. 

Moving on to the Control Section Options section, set the maximum content width of the field so that it display properly on any device. In this example, we are am going to set the width to 250 pixels. This is narrow enough for the field to fit on one line, even on a small mobile phone. Optionally, finish by setting ‘Alignment’ to center.

Setting Up Fonts and Styles

In the next section of the Widget Settings we can set up our form’s fonts and styles. Use the Control Label Style and Form Fields Fonts button to set the font style of the form as you want.

Configuring the Submit Button

After setting up our form’s appearance and the Email Form Control, the last step is to customize the , ‘Submit’ button in the Submit Button section. Instead of using the word ‘Submit’, we will change the text to ‘Send’ in the Submit Caption field. Additionally, the text within the button will be center aligned, using the Alignment field.

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

The Newsletter Sign Up Form is now complete. If you want, you can additionally set up a confirmation email. Note that if you do this, you will need to enable Spam protection as well.

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