Extension: Email Forms

This article was last updated on the December 30, 2016.

Extensions are X specific plugins available for download for all customers with a validated purchase of X. You can easily download and manage all of your Extensions directly from the WordPress admin area under Addons > Extensions. This article covers documentation for the Email Forms extension and goes into detail on certain features where needed.

Enabling the Extension

After installing and activating Email Forms, you’ll find its settings page underneath the Addons menu.

Email Forms

What Email Forms does

Email Forms allows you to connect your MailChimp account to your WordPress website and display email signup forms on the front-end of your website. You can see some examples of Email Forms in action over on our demo site for the plugin.

Setting Up Email Forms

When you go to the Email Forms settings, you’ll notice all the settings are split into three tabs, specifically:

  • Email Forms – allows you to setup different email forms for your website. This allows you to select a different email list and other settings which we’ll cover below. As the plugin can utilize multiple lists from one MailChimp account it’s perfect for Membership type sites where you can have a general list for all subscribers and then a members only list for paid members to sign up to your newsletter from a restricted page.
  • General settings – Configuration options for opt-ins and default forms.
  • Maiilchimp – Adding your MailChimp API key to connect to your WordPress website.

Connecting MailChimp

The first step is to setup MailChimp. For this you will need a MailChimp account, if you don’t already have one you can signup here. Once your logged into a MailChimp account you will need to handle all the usual stuff such as creating lists, importing subscribers (if you’ve just signed up) and setting all your details. We won’t go into detail on configuring those parts as that’s beyond the scope of this tutorial. However MailChimp has some great information in their knowledge base for this such as Creating a List and Importing Subscribers along with other useful information throughout their Knowledge Base.

Once you’re logged into your MailChimp account navigate to >> Account >> Extras >> API Keys here you’ll see any existing API keys you’ve already created and the option to add a new API Key:

MailChimp API Keys

Click on Create A Key:

MailChimp create an API Key

When you click on Create A Key MailChimp will automatically create you a new unique API key and it’ll also be automatically enabled for use. You should see your new API Key like this:

Your new MailChimp API Key

Go ahead and copy that API key and head over to your WordPress Admin area. Then navigate to X Addons >> Email Forms >> MailChimp you should be on this screen:

MailChimp Settings Email Forms

Go ahead and paste the API key you just copied from your MailChimp account into the API key box and then click on Update. You should now see some extra settings and a success message that your website is now connected to your MailChimp account.

MailChimp account successfully connected to website

If everything has gone correctly, you’ll also be able to see the Email Lists which the plugin has pulled from your MailChimp account. If for some reason your list isn’t showing just click on Refresh and the plugin will re-populate the lists from your MailChimp account.

Now you’ve connected your website to MailChimp navigate to the General Settings tab in the Email Forms settings.

Email Forms General Settings

Here you can set whether to automatically opt-in newly registered users or not. This allows you to automatically add them to a list in your MailChimp account useful for if you want to use automated workflows where maybe you send anyone new to the list a welcome email after 24hours or a promotional offer. You’ll also be able to select the form to be used if you don’t specify a form ID when adding the email form shortcode which we cover below. For this to populate you will have already needed to create an email form within the Email Forms settings.

Creating an Email Form

First of all make sure you’re on the Email Forms tab and then click on Add New Form.

Add New Email Form

You should then see the new Email Form settings like this:

New Email Form Settings

We’ll go through each set of options, first of all are the forms options which are as follows:

  • Email List – The Email List from your MailChimp account that you want new subscribers to be added to.
  • Confirmation Method – When a user successfully subscribes to your list either show a custom message or redirect to a page of your choice (useful if you’d like to provide a free download etc).
  • Confirmation Message (if you select message in the Confirmation Method option) – Enter your custom message to show once a user has successfully subscribed, plain text only.
  • Confirmation Redirect (if you select Redirect in the Confirmation Method option) – Enter the URL of the page you’d like users to be redirected to upon successfully subscribing to your list.
  • Show Title – Whether to display or hide the form title, if you choose to display the title, it’ll output before the subscription form
  • Name Field – Select how the name field displays on your subscription form either: None (The name field won’t display), First, Last, Full (separated) or Full (Combined).
  • Full Name Placeholder – This option will vary depending on what you selected in the previous step. For example it may only be a first name placeholder. Enter the text (plain text) that you want to be the placeholder for the name field.
  • Name Requirement – Select whether you want to require a user to enter their name.
  • Email Field Placeholder – Enter the email placeholder which will display in the email field before a user starts typing.
  • Submit Button Text – The text that displays in within the submit button. Plain text only.
  • Show Labels – Select whether to display labels before the output of the subscription fields.

If you selected to show label before the inputs in your subscription form, you’ll also see options for the following.

  • First Name Label
  • Last Name Label
  • Full Name Label
  • Email Label

The next options all relate directly the appearance of your form.

Appearance for your Email Form

The options are:

  • Custom Class – Allows you to specify a CSS class of your choice, which you can then use to apply custom styling to your form.
  • Font Size – Set the font-size of all the text for your subscription form.
  • Max Width – Allows you to specify the maximum width in pixels that your subscription form will take up.
  • Custom Styling – Set custom styling on or off, if enabled you’ll be presented with another set of options for modifying the appearance of your form.

If you set Custom Styling to Yes in the previous step you’ll see another range of form modifications options like this:

Appearance Form Container

Appearance Form Colors

The first batch of options all specifically relate to the form container, which are:

  • Inner Container – Yes or no, select wether you want the inner container to be placed around your form or not.
  • Remove Margin – Select wether you want to remove the margin around the form or not. This is good to keep if placed on a standard page or post, but if you are creating a custom homepage and using this as a fullwidth content band, then it is typically best to remove this.
  • Border – Allows you to select a subtle border to display around your form.
  • Padding – Allows you to set the padding for your form container. Requires you to enter a PX value, i.e, 45px. Not 45 for example.
  • Background Option – This options allows you to set a background for your subscription form, useful if you’d like to create a full width section for your subscription form and want a background behind it. You can select from either Transparent, Color, Pattern or Video.

The next set of options all directly relate to the form appearance and colors. All options are self explanatory and let you set various colors using color pickers for different aspects of the forms, such as buttons, hover colors etc.

Once you’re happy with your form configuration go ahead and click on Publish.

Displaying Your Email Form

Now you form is published head on over to X Addons >> Email Forms >> Email Forms and you should see your newly created form like this:

Form Published

Where you see the Shortcode this is what you use to place your form. You can use the shortcode in a Cornerstone text element, raw content element, on any post or page etc. Email Forms also includes an Email Form widget option. If you navigate to Appearance >> Wisgets in your WordPress Admin you’ll see the Email Form widget like this:

Email Form Widget

If you drag that over to any of your active widget areas, you can then select the email form you want to output within the widget:

Configure Email Widget

Just select your form from the dropdown and click save.

Once you’ve set everything up and added your shortcode to a page, you should see your new Email Form displaying on your website like this:

Email Form Displaying

Congrats! You have now successfully configured your brand new Email Form.