How to create a mailing list on your website

Do you know anyone who doesn't have an email address? Well, even though today the means of communication have surely evolved (a lot!), it is a fact that everyone still has an email address. And email is still an incredible contact channel for making sales, deepening relationships and connecting with your audience. So be sure to create and maintain an email list as soon as possible. And today I'm going to show you how we can create an email list and make it available on our website!

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

I also present to you guys and girls the video I made on this topic from my YouTube channel, which is where I share some thoughts, tips and projects I am currently working on with other tech-fanatics, whether you are a developer, lawyer or enthusiast. Please also consider subscribing to my channel to not miss future videos and to join our live "coding sessions" and a nice, relaxing tech-related chat -- I promise to keep things interesting. The content is in Portuguese, but you can watch my videos with subtitles (maybe I will switch to English in the future, if this makes sense).

All set? Then tag along!

Building an email list can be very helpful in keeping your digital presence active. Regardless of the most used channel by your target audience, email is still a channel that is certainly used by everyone and, without a doubt, it is an excellent channel for contacting your audience, which will allow you to maintain lasting contact.

We're going to include an email list on our professional website, which is something I recommend you do as soon as possible. Even if you don't intend to publish much content at first, start building this list with the emails of those interested in your content, as this data will be very valuable.

Still don't have your professional website? See our blog post here on how to do this, along with the video we posted teaching this step-by-step: 

With your website up and running, we will place an action field there so that the visitor can enter the name and e-mail address in which they wish to receive our future communications. The final result will look like this:

Our contact capture form

With this form we can already start to capture the contacts of those interested in our content, opening new and great opportunities for future communication with our audience.

1. ENABLING A MAILING LIST SERVICE

When we talk about a mailing list service, there are very famous and old options on the market.

These mailing list services allow you to not only manage the subscribers to your list, but you can control email sending campaigns with open rate analysis of your messages, testing of different email versions, list segmentation based on a few parameters and more.

Anyway, it's possible to do a lot of cool stuff.

In the past I used the MailChimp service a lot, which is very famous and very intuitive. They have a free plan too and a system that works well. However, over time I felt its limitations as there is a limit of contacts you can enter (2,000) and I decided to look for other alternatives as their paid plan is a bit expensive as far as I know.

For our content today we're going to focus on a service that I recently discovered, which is Sendinblue. On the free plan, they offer unlimited contact registration, but you can only send up to 9,000 emails a month and 300 emails a day, which is more than enough for an initial email list.

Initial settings

After creating your account, let's set up some important initial aspects. In the Sendinblue Dashboard, click on "Campaigns" Menu > "Settings" Tab > "Default Settings".

In this settings screen, set the time zone and change other messages as you like for a more customized email experience.

Changing email templates

Now, let's access the "Templates" tab and change the default text of the emails we will send to our contacts. I'm going to change the "Simple Confirmation" email, which is the email sent when the person joins our email list, and the "Unsubscription Follow Up" email that the person receives when they leave our list . If you wish, you can also create other templates to use in your email flow, but to keep the article simple I'll just change these.

The template can be changed by clicking the "Edit the email content" button, and you have the option to change the HTML code of the email or use the Rich Text editor (which is an "online editor"). They themselves recognize that the Rich Text Editor is not the best option in a warning that appears, and I really realized that using this editor is not the best of experiences, but it should be OK for now (I'll make content to better customize this via HTML in the future).

Creating a Contact Capture Form

And finally let's set up our data capture form that will feed our email list. To do this, click on "Contacts" and then on "Forms" to create a new capture form.

Create a new form by clicking the "Create a new subscription form" button or change a form from the list.

On the next screen, you'll be able to create your form simply by dragging new fields and editing text, in a very interactive screen. Edit the format that your form has until you are satisfied and click on "Next", filling in the corresponding fields.

When you get to the "Lists" section, choose the email list where you want to store contacts who sign up for this form. And when you get to "Settings", choose whether the user who signs up should follow a "double confirmation email", that is, if he will receive another email asking him to actually confirm whether he wants to be part of the list, or a "single confirmation email", which he will already be subscribed to when he clicks the sign up button. This is up to you, but remember to choose the email template for new subscription we created in the previous step.

When you get to the end of form customization, you'll receive a link to directly access the form (for sharing and, as we'll see, for you to embed in pages like Google Sites) and HTML options to embed in your page's code.

2. INSERTING THE CAPTURE FORM ON OUR WEBSITE

As I mentioned before, when you finish configuring your capture form, in the final step Sendinblue will generate a form address and will also provide you with HTML codes that you can place on your page.

Inserting the form into a static Google Sites page

If you followed our previous article to create your static website, you should now have a page created on Google Sites. Let's insert the Sendinblue form there then.

To do this, simply click the "Embed" button and paste the link that Sendinblue provided to share into the URL address. And that's it, your form will be on your page.

Select Embed

And enter the generated form URL

Alternatively you can select "Embed code" and paste the HTML generated in Sendinblue there, but I've seen it works great to put in the direct share address.

Inserting the form via HTML on other websites

If you want to place your form on a website other than Google Sites and/or want to insert this form, for example, on a portfolio site generated in blog tools, you will need to include the corresponding section via HTML. But calm down, it's very easy to do this.

On the page where you generated the form in Sendinblue, it allows you to generate an HTML code to be inserted into your page. Leave this code for now:

You can embed this HTML on any page you have

Let's see how we can insert this into another page by editing its HTML and in our case I'll show you how to do this on Blogger, using the example blog I created in our last post for my law firm services.

The HTML code in Blogger can be found under the "Theme" menu by clicking the down arrow and selecting "Edit HTML".

After selecting the option to edit the HTML, you will have access to the HTML code that your page uses.

To insert our form, we will need to edit the HTML code of our page and that, in the case of platforms like Blogger and Tumblr (and also Wordpress), there are a series of code snippets that would be "internal syntax" of the platform that are replaced before going online. For example, on Blogger you will see excerpts like this:

This <b:if> tag isn't standard HTML, but it's an internal tag that Blogger uses to check for some condition in your template before "rendering" your final page. In this case, it checks if there is copyright information and, if it is not empty, Blogger renders that part which will be visible on your blog.

In our case, we just need to find the place to insert the relevant parts of the HTML code generated by Sendinblue. If you look at the code generated by Sendinblue, there are three parts with splits starting with <!-- START - ... and ending with <!-- END... These lines are comments left by Sendinblue with instructions to implement the code. Let's see:

This first comment says that you must insert the code from that line (that is, the line right after this comment that starts with <!-- START to the line before the comment that starts with <!-- END) inside the part "head" of your code. What does that mean? That you should look inside the Blogger code and insert the code indicated by Sendinblue between the lines that contain <head> and </head>

You can, for example, paste the lines that Sendinblue indicated into the next line of the line containing <head> and that's it!

Following the code generated by Sendinblue, you will see that there are already two more blocks of code: the first one tells you to include the generated code wherever the form should appears on your page, and the last one tells you to include it at the end of the page.

In my case, I put this right after a blog footer tag, on a line that looked like this:

This line indicates where the footer of our blog was, and it came by default. I simply saw where this <b:section tag ended, that is, I went to the immediately following part that had </b:section> and inserted the Sendinblue code there. When trying to save the template with the Sendinblue code, I got some error messages from Blogger, like this:

This is because Blogger is a little more "rigid" about the HTML content you put there. For example, the error noted above says that there is an error on line 5050, as a "required" attribute must be followed by an "=". Let's see what's on that line:

As we can see, the line has a "required" attribute, but Blogger requires that it should be followed by an "=" sign. Here, it is assumed to be true, so let's change the line to make this explicit:

With this, the "error" is fixed. I needed to do the same for other lines that pointed to an error.

Another error pointed out by Blogger was "open" tags. To explain, in HTML every tag has an opening and a closing. So if you want to start a line, you can put something like this:

<p>This line is opened and closed by tags</p>

Always an opening tag like <p> and a closing tag like </p>.

However, some tags do not necessarily need a closing tag, such as the <img> image tag for example, or <input> input fields. You will therefore not find an </input> or an </img>. But still, it's good practice to always "close" an open tag, and that's what Blogger requires. How can we solve this in an easy way? Simple, we can do it this way:

Since the tag doesn't have a closing tag, we put a "/" at the end of this opening tag, leaving a "/>" as in the image above. With that, the error should disappear. I had the same error for an existing <link tag, and just closing it like that solved the problem.

And with that, we already have in our Blogger the form with the list so that people can register.

By testing the form, we see that our contact list is being collected and the email is being sent correctly:

Our list is already working 😁

And the email for the subscription to the list was sent correctly!

3. CONCLUSION

Even if you don't intend to share content at the moment with your website visitors, consider creating a mailing list now so that you have a direct communication channel with your audience.

Email is still a powerful communication, sales and contact channel with people who already like your content and who have trusted you enough to share that address.

In future content, I'll show you how we can customize our outgoing emails and automate a flow of emails to convert those contacts into potential sales.

/* End of the post, see you next time */