If you want to attract new subscribers to increase your mailing list, you should offer subscription forms on your site. If you work with WordPress, you can easily add these forms to your blog.
Why? Basically because it allows you to capture data from people interested in the products or services that you offer so that you can contact them periodically.
At this point, you may be thinking: I am interested, but what I will have to do to create a subscription form on my WordPress site? I am not familiar with HTML code, and I need something simple and easy.
Don’t worry, in this tutorial; we’ll show you different ways to add the HTML code generated by Mailrelay in your website created using WordPress with and without plugins.
Interesting, right?
Important Clarification: for this tutorial, we are going to assume that you have already created an opt-in form on your account and that you have already copied the HTML code. Therefore, we are going to focus on explaining how to add this code on WordPress. If you have not yet created the form, or you have not copied the HTML code, we advise you to read this other post first and follow the indicated steps: Mailrelay V3 subscription forms
· How to integrate a Mailrelay subscription form without using any plugin
We have to start this tutorial saying that we can’t deceive ourselves; most of us will try to find a plugin to do all tasks for us on our site because they make our lives much simpler.
However, it is important to keep in mind that installing many plugins on our site can overload the page.
That, on many occasions, implies an increase in the loading time of the pages, directly affecting our SEO strategy and user experience.
For all this, if you want to avoid overloading your website or you just don’t want to install more plugins on your WP site, you can integrate the HTML code directly on your website without any plugin.
How?
By following these steps:
To get started, you will have to log in to your WordPress and click on “Appearance” and on “Widget.”
On the Widgets section, we have to find a widget named “Custom HTML.” Once we find it, we can drag it to the widgets area where we want to add our opt-in form.
By default, WordPress has a widget area in the sidebar of the page.
We can insert it there or if our theme or template has other areas of Widgets enabled, we can change the place (e.g., in the footer).
In this case, we are going to add it in the most common area of widgets, because all WordPress websites have this option by default; Let’s add the HTML code in the sidebar.
We just have to drag the widget to this area, add a title, and paste the code generated by Mailrelay. Remember that you already generated the HTML code before starting to read this tutorial.
After naming the widget (in the title section) and inserting the code (in the content section), you will have to click the save button.
Later, to check if everything is working fine, you can access your blog, and you’ll see the subscription form in the sidebar.
* It is important to keep in mind that the form will have the styles (colors and fonts) configured in your template or theme.
In this case, we have seen how to integrate the form in the sidebar. If your site has any other area of widgets enabled, you can follow the same steps that we explained previously, but you should drag the widget to that area.
The result will be the same; the only difference is that your opt-in form will be displayed in the specified area and not in the sidebar.
· How to integrate a Mailrelay subscription form in WordPress with Elementor (free version)
How to integrate a Mailrelay subscription form in WordPress with Elementor (free version)
Elementor is one of the most famous WordPress layout designers of the moment, in fact, it is one of the most used plugins for editing opt-in forms.
Among its main features we can find: a free version with many features, which allows any user to create attractive and personalized sections without having to invest money.
Elementor is a plugin that is currently available for free with more limited features and with a paid/Premium version with some extra options.
However, it doesn’t matter if you are using the free or paid version, you will be able to integrate your Mailrelay form into the desired section and location. You will learn how to do that in just a few steps:
The first requirement is to have the Elementor plugin installed on our site. If you have not yet installed it, you should go to the plugins tab and click “add new.”
Search for “Elementor page builder” in the WordPress repository and click Install.
Once installed, remember to enable it, and we’ll be ready to integrate our code.
To start the integration, you should open the page or section where you want to enter your subscription form. After accessing this section, you will have to look for the HTML code module.
Once located, add the module in the column or section of the page where you want your form to be displayed. After dragging it to the area in question, we will have to paste the HTML code we saved earlier.
Once the HTML code is entered, you will see how the form will be available in the subscription form in the section or column chosen. Make sure everything is correct and publish the changes. The result will be visible on your site:
As we mentioned before, both in this case and the previous one, it is important to keep in mind that the form will have the styles set in your template or theme.
To make changes or modifications of style, you will need to edit the HTML or use specific plugins that allow us to customize our subscription forms (Bloom, for example).
· How to integrate a Mailrelay subscription form in WordPress with Bloom
Bloom is one of the most complete plugins we can find for creating subscription forms. If you already have this plugin installed in your WordPress or you are thinking of buying a license, we’ll explain how you can integrate it with your Mailrelay account.
After accessing the admin panel, the first thing you should do is to click on Bloom / Opt-in forms. In this tab, you can find all the subscription forms that you already created. In this case, we are going to create a new form from scratch to learn how to integrate it easily with Mailrelay.
To create a new form, just click the blue button at the top of the screen “new opt-in.” or new form.
The system will open a drop-down list where you will have to choose the type of form you want to create. Let’s choose the option “inline,” as it will allow you to implement it later in the section or page that you want.
In the next window, you will have to start configuring our new form. The first thing you should do is to name it to be able to identify it internally (this name will only be visible to you, it will not be shown to visitors.)
After that, we will have to select an email provider. In this case, as we have our HTML code from Mailrelay, we can go directly to the bottom of the drop-down list and select the “Custom HTML form” option.
Immediately after choosing this option, the system will display a gray box where we can insert the snippet code of the form. In this case, you should paste the HTML code generated by Mailrelay and click on the “Next design your opt-in” button.
Below, we’ll have a look at different forms, with different colors and styles. You should select the best option according to the layout of your site to fit the page color scheme. It is important to understand that since we have already introduced the code, the style will not be the same as the one shown by the plugin, but the end result is usually pretty good.
The next step will be to customize the fields we want to use in the form. In “opt-in title,” we should write the title that will be displayed prominently in the form header. If you don’t want to enter a title, you can leave this field blank.
After that, we will have to fill out the text of the form. If you are thinking about explaining why your visitors should subscribe to your newsletter, or what you are offering to your subscribers in exchange for the subscription, this is the field you should use to add all this information.
So we can adjust the image. Most of the Bloom’s standard templates include an image at the top, but if you want to modify it and/or replace it with your logo, for example, you will have to do this in this section.
We came to the styles section. If you want to further customize your subscription form, changing fonts, colors, backgrounds, or any other aesthetic aspect, this is the place. In Opt-in Styling and form styling, you can choose from many options and alternatives.
After that, we’ll find some more options to customize the form. We can add text in the footer (ideal for clarifications or quick comments) and the confirmation message, which is the text that will be displayed after the visitor successfully subscribes to the newsletter.
After setting all the fields, we can click “Save” to save our work. When we click save, the plugin will take us off the screen and display all the active opt-in forms.
Well, we have already created and configured our Bloom form. The next step is to integrate it correctly into our site.
To do that, in Bloom / opt-in forms, we will look for the form that we have just created and, on the left, we will find this symbol “[].”
When we click on it, we will see a new window with the shortcode for this form. Copy or save this code somewhere because you’ll need to use it later.
After copying the shortcode, we will have to add it to our website where we want to display this form. If we have a visual layout like Elementor or Divi, we can integrate it wherever we want with the code module or shortcode.
If, on the contrary, we are already working with Gutenberg, the new system created by WordPress, we can integrate our Shortcode using the embedded widget specifically for this purpose.
We should, therefore, open the page or section to edit it. After accessing it, we will click the “+” button, and in the widgets, we are going to select the “Shortcode” block. After that, we have to enter the code or shortcode that we saved earlier. Here you only have to paste the content and save the changes.
After following these steps, your new form will be available on your site. The process is a lot easier than you thought, right?
· Conclusion
As we have seen throughout the article, there are many options for integrating a Mailrelay HTML form using WordPress. In this post, we wanted to focus on methods that we consider easy so that you would lose the fear of manipulating code.
As we have seen, you can integrate Mailrelay with WordPress without plugins, through the widgets section or even using Gutenberg, the new feature offered by WordPress.
However, if you already have visual editors like Divi, Elementor or any other opt-in plugin, you can also use them to add your form wherever you want. In Bloom’s case, the main advantage we have is that the plugin allows us to easily edit form styles, to give them a more personal touch and adapt the code to the layout of our site.
However, if you are already familiar with HTML and want to make some changes to the code, to add styles or colors, that is also possible. Of course, remember to be cautious because if your opt-in form doesn’t work correctly, it will affect your email marketing strategy.
And now, do you want to integrate your Mailrelay form to your WordPress website?
