How to add a Mailrelay subscription form in WordPress

These days, adding a subscription form to WordPress is essential if you want to reach new and potential customers.

Why? Basically, because it lets you collect the details of people interested in the products or services you offer, so you can stay in touch with them regularly.

At this point you may be thinking: I’m interested, but how do I add a subscription form to my WordPress website? I don’t know HTML and I need something quick and easy.

Don’t worry: in this tutorial we’ll show you different ways to integrate the HTML code of your Mailrelay forms into WordPress, with and without plugins.

Interesting, right?

Important note: In this tutorial, we’ll assume you have already created your form in Mailrelay and have its HTML code. So we’ll focus on explaining how to integrate this code properly into WordPress.

If you haven’t created your form yet or don’t have its HTML code, we recommend reading this other post first and following the steps it describes: Mailrelay V3 subscription forms

· How to integrate a Mailrelay subscription form into WordPress without plugins

We often overuse WordPress plugins because, let’s be honest, they make our lives much easier.

However, keep in mind that installing too many plugins on your website increases the resources it uses.

This often leads to longer loading times for your pages, which can directly affect your SEO rankings and user experience.

So if you want to avoid overloading your website, or you simply don’t like installing more plugins in WordPress, you can integrate your HTML code directly into the platform with no extras. How? By following these steps:

To start, log in to your WordPress site, go to “Appearance” and click “Widgets”.

Once you’re in the Widgets section, look for the one called “Custom HTML” and drag it to the widget area where you want to add your subscription form.

By default, WordPress has a widget area enabled that corresponds to the sidebar of your website’s blog section.

You can place it there or, if your theme or template has other widget areas enabled, you can add it to them (the footer, for example).

In this case, we’ll place it in the most common widget area, which every WordPress website also has by default: the blog sidebar.

Drag the widget to this area, add a title and paste your Mailrelay form code into it. Remember, this is the code you set aside earlier so you’d have it handy when you needed it.

Once you’ve named the widget (in the title field) and inserted the code (in the content field), click the “Save” button.

Then, to check that everything is in order, go to your blog section and you’ll see that your sidebar now includes the Mailrelay subscription form. Easy, right?

* Keep in mind that the form will take on the styles (colors and shapes) set by your template or theme.

In this case, we’ve seen how to integrate the form into the blog sidebar. If your website has any other widget area enabled, you can follow the same steps described above, but drag the widget to that area instead.

The result will be the same; the only difference is that your form will appear in the area you chose instead of in the sidebar.

· How to integrate a Mailrelay subscription form into WordPress with Elementor (free version)

Elementor is one of the best-known WordPress page builders today; in fact, it’s one of the most widely used.

One of its main strengths and attractions is that it has a free version with lots of features, which lets any user create eye-catching, customized sections without spending any money.

Elementor is a plugin that is currently available as a free version with more limited features, and as a paid/Premium version with some extras and more control over its features.

However, whether you have the free or the paid version, you can integrate your Mailrelay form in whatever section and spot you like. Here’s how to do it, step by step:

The first requirement is to have the Elementor plugin installed on your website. If you don’t, go to the Plugins tab and click “Add New”.

Search the WordPress repository for “Elementor Page Builder” and click Install.

Once it’s installed, remember to activate it and you’ll be ready to integrate your code.

To start the integration, open the page or section where you want to add your subscription form. Once you’re in that section, look for the HTML code module.

Once you’ve found it, place the module in the column or section of the page where you want your form to appear. When you’ve dragged it to that area, paste the HTML code you saved earlier.

Once you’ve inserted the HTML code, you’ll see the subscription form appear in the section or column you chose. Make sure everything looks the way you want and publish the changes. The result would look something like this:

As we mentioned earlier, both in this case and in the previous one, keep in mind that the form will take on the styles set by your template or theme.

To make changes or style modifications, you’ll need to edit the HTML or use specific plugins that let you customize your subscription forms (Bloom, for example).

· How to integrate a Mailrelay subscription form into WordPress with Bloom

Bloom is one of the most complete plugins you can find for creating subscription forms. If you’re lucky enough to already have this plugin installed in WordPress, or you’re thinking of buying a license, here’s how to integrate it with your Mailrelay account.

The first thing to do, once you’re in your WordPress admin panel, is to go to the Bloom/ optin forms section. This tab lists all the subscription forms you have so far. In this case, we’ll create a new one from scratch to learn how to integrate it easily with Mailrelay.

To create a new form, go to the top of the screen and click the blue button that says “new optin”.

A drop-down will open where you choose the type of form you want to add. Choose the “inline” option so you can later add it to whatever section or page you like.

In the next window, you’ll start setting up your form. The first thing to do is give it a name so you can identify it internally (this name is just for you; it won’t be shown to the public).

Next, it will ask for your email provider. In this case, since you have your Mailrelay HTML code, go to the bottom of the drop-down and select the option that says “Custom HTML form”.

As soon as you choose this option, a gray box will appear. This is where you enter the code snippet you want. In this case, paste the HTML code of the form you created in Mailrelay and click the button that says “Next, design your optin”.

You’ll then see different form layouts, with very different colors and looks. Select the one you like best or that best fits what you’re looking for. Keep in mind that, since you’ve already entered code, the look won’t be 100% identical to the sample, but you’ll see that the result is pretty good.

The next step is to customize the fields you want to appear in the form. In “optin title”, write the headline that will be highlighted at the top of your form. If you don’t want a headline, leave this field blank.

After that, fill in the form text. If you want to explain what the form is for, what you offer your subscribers or anything else, this is the field to use for all that information.

Next come the image settings. Many Bloom templates include an image at the top by default. If you want to change it and/or replace it with your logo, for example, you’ll need to do it in this section.

Now we come to the styles section. If you want to customize your subscription form even further by setting fonts, colors, backgrounds or any other visual detail, this is the place. In the Optin styling and form styling section, you can choose from lots of options and possibilities.

After that, you’ll find a few more options to customize the form. You can add footer text to it (ideal for clarifications or quick notes) and the success message, which is the one shown when someone has successfully subscribed to the newsletter.

When all the fields are filled in and everything looks the way you want, click “save”. You’ll see the plugin take you out of that screen and back to the Bloom overview with all your active forms.

Great, your form is now created and set up in Bloom. The next step is to integrate it properly into whichever page or section of your website suits you best.

To do this, in Bloom/optin forms, find the form you just created and, on the left, you’ll see this “[]” symbol.

Click it and a window will open with the shortcode for that specific form. Copy it or save it somewhere, because you’ll need it later.

Once you’ve copied the shortcode, place it in whichever section or area you like. If you use a visual page builder like Elementor or Divi, you can add it wherever you want using the Code or shortcode module.

If, on the other hand, you’re already working with the new WordPress visual editor, Gutenberg, you can add your shortcode using the widget it includes specifically for that.

So, open the page or section you want to edit. Once inside, click the “+” button and, in the widgets section, select the block called Shortcode. You’ll then be prompted to enter the code or shortcode. Paste the content and save your changes.

And that’s it: your new Bloom form is now integrated into whichever section or page of your WordPress site you like. Interesting, right?

· Conclusion

As we’ve seen throughout this article, there are lots of ways to integrate a Mailrelay HTML form into WordPress. In this post, we wanted to focus on the methods we consider simplest, so you can lose your fear of code and start using it without worry.

As we’ve seen, you can integrate Mailrelay into WordPress without plugins, through the widgets section, or even with the new WordPress visual editor, “Gutenberg“.

However, if you already use visual editors like Divi, Elementor or any other subscription plugin, you can also use them to add your form wherever you want. With Bloom, the main advantage is that the plugin lets you easily edit the form’s styles, giving it an eye-catching, original touch.

However, if you’re already somewhat familiar with HTML and want to make some changes to the code by adding styles or colors, that’s possible too. Just remember to be careful when applying them to avoid possible errors or glitches.

So, are you ready to integrate your Mailrelay form into WordPress?

And if you pair your form with a good lead magnet, you’ll boost the rate at which your visitors convert into subscribers even further.