Adding a signup form at the header area

If you are using a header image with a custom message at your frontpage, you can spice it up with a simple email-signup form for your readers. There is a simple way to achieve this, using the free Contact Form 7 plugin.

Creating a form

The concept is simple. After installing and activating the plugin, we will create a form with a single email field and a button.

Here is what we used for the contact form at the demo:

[email* your-email placeholder "Your email"]
[submit "Subscribe"]

Then, let’s grab the shortcode that is available, that lets us display the form anywhere in our site. In our case the shortcode is the following, but it may be different in your case.

[contact-form-7 id="837" title="Email form"]

Adding some custom CSS

We have prepared some custom CSS, that you can add under Customizer > Additional CSS. You can get the custom CSS here. It will provide the required styling so that your form has a similar appearance as the one at the demo.

Now, we need to apply the .form-subscribe class straight into the form’s shortcode, in order for the custom css to be applied to the form elements.

Here is how the shortcode looks with the class added:

[contact-form-7 id="837" title="Email form" html_class="form-subscribe"]

Adding the form into the header area

Once done, we only need to add our final shortcode into the header area content. That content area can take HTML and shortcodes, so it is a great area to add such elements.

So, heading to Appearance > Customize > Header image and we need to paste the shortcode into the content area, along with your existing content (if you use any).

Note: You need to have selected an image in order for the header image section to be activated at the frontend.

For the demo we also make use of several instances of the
[stag_icon] shortcode to output a number of social profile icons:

[stag_icon icon="instagram" url="your_url_here" size="40px"]

Take it further

You can easily auto-subscribe newsletter subscribers to your mailchimp list, using a simple and free plugin that integrates Mailchimp and Contact Form 7 in a very intuitive way. So, take a look at Contact form 7 Mailchimp extension as well, and automate some processes!