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.

Almost all websites today include some way in which you can make contact with the company, or individual, behind the website. Typically, websites use tools such as a contact form, and website builders such as EverWeb usually include tools to help you create your own contact form.

When we think about a contact form, inevitably two types of form come to mind, a newsletter sign up form and a contact, or feedback, type of form. However, there are plenty of other forms that you create using EverWeb such as a survey form, support form, evaluation forms, job interview forms and so on.

Why Your Website Should Include a Contact Form

A contact form can be a vital component of a well-designed website. It not only improves user experience and protects you from spam but also helps you gather essential information, manage inquiries efficiently, and can enhance your professional image. By making it easy for visitors to reach out, you can foster better engagement, collect valuable feedback, and ultimately drive more conversions. Whether you run a small business, a blog, or a website for hobby or non-profit reasons, a contact form can prove to be indispensable for effective communication and customer service.

Creating a Contact Form in EverWeb

EverWeb has always included a contact form generator, starting with the Contact Form widget in EverWeb version 1.0. When EverWeb 2.0 debuted, the Contact Form Advanced widget was introduced superseding the original Contact Form widget which remains mainly for legacy reasons.

We recommend using the Contact Form Advanced widget for a number of reasons:

• It is more secure than the Contact Form widget
• It is less liable to spam and include tools such as Google’s reCaptcha
• It has a wide variety of features and functionality enabling you to create the contact form you want for your site.
• It has the option to add the Contact Forms Enhanced Addon which helps manage your contact form submissions in one place whilst offering enhanced features such as file submissions.

Creating a contact form in your site is easy, just click on the Widgets tab in the Inspector Window then drag and drop the Contact Form Advanced widget to where you want it on your page.

Do You Need EverWeb’s Contact Forms Enhanced Addon?

You will want to use EverWeb’s Contact Forms Enhanced Addon if you want a tool to manage the contact information from the contact forms your website visitors have submitted to you via the Contact Form Advanced widget.

Contact data is stored securely in your EverWeb Client Area where it is easily accessible and can be downloaded to a CSV ?le. The stored email addresses gathered from your contact forms can be used to create mailings to existing and potential new customers, newsletter email lists, surveys, promotions and so on. You can also target speci?c groups or market segments based on questions you ask in your contact form.

Other Contact Forms Enhanced Addon features include:

• Calendaring features can be added to your Contact Form using the ‘Calendar’ control. The calendar is fully responsive so is perfect for mobile phones, tablets and desktop computers.
• The ‘Select Time’ control lets displays a popup window to select speci?c times.
• Visitors can upload ?les to the EverWeb servers. You can then download the ?les safely at a later time from your EverWeb Client Area.

If you require any of these features then you should be using the Contact Forms Enhanced Addon in conjunction with the Contact Form Advanced widget. Just follow the link above to sign up.

Contact Form Advanced Widget Features

When you first look at the Contact Form Advanced widget’s Widget Settings it may seem a little daunting as there are so many features included. The good news is that the widget is broken down in to sections making it easier for you to navigate.

The first section includes basic information required about the contact form, such as the name you want to call it, the email address where your form submissions will be sent to and a field to add in the Contact Forms Enhanced Addon if you have purchased this. The last field in this section is ‘Mail Sending’ which offers you three choices: EverWeb, PHP Mail and SMTP Details. If you choose EverWeb, you will need to have purchased the Contact Forms Enhanced Addon.

The second section is ‘SMTP Details’. Depending on your Mail Sending choice, you may, or may not, need to complete the SMTP Details section. For help with this section, click on the ‘More HHelp’ button.

The third section of the widget is the ‘Form Submission Settings’ section. This is where you define the title of the email subject, where you define the message you give the user once they have submitted their form, where to forward the visitor next, after the form has been submitted and lastly the style of form you want displayed on the page. You can choose between Classic, Modern and Transparent.

After the Form Submission Settings you will see the next section Form Controls. This is the section where you add and manage the fields that you want in your form. By default, three form controls are included when you add the Contact Form Advanced widget to your page. Below the form controls, is the Control Type which is where you define the function of the field e.g. click on the Name Form Control. You will see its Control Type is set to TextBox. You can change this to another type as desired. Below the Control Type are a number of different options to set up the initial parameters for the control, help text and tips as well as styling options.

The next section ‘SPAM Protection’ does just that, it helps your contact form against potential spamming. To activate this section you will need to sign up to Google’s reCaptcha feature which can be easily done by clicking on the ‘Sign Up for reCaptacha v2’ button. Note that if you want to use the widget’s Confirmation Email Settings section which is further down the Widget Settings, you will need to sign up for reCaptcha to use this feature.

The next section, Fonts & Styles, is again important for the styling of your Form Controls so that your form matches with the style of your page and site properly!

The Contact Form Advanced widget also lets you define how you want the Submit button to look. You can even set your own image as well if you want. The next section is concerned with Form Error Validation. This can be of great help when the person submitting the form has not completed the form correctly and tries to submit the form. Usually the default text is good enough, but of course you can change this as required.

The last main section of the Widget Settings is the Confirmation Email Settings section. As mentioned about, you need to enable reCaptcha for this section to work. This section is used to email the form submitter that their form has been received. Again you can customize this as you want.

EverWeb’s Contact Form Advanced widget offers a lot of potential for your website. We will shortly be uploading blog and video content about what you can achieve with the widget, starting off soon with creating a Newsletter Sign Up style Contact Form.

If you have a question about this blog post or about anything EverWeb, please let us know in the Comments Section below.