Functional Subscribe Form

Today I installed a simple mailing list builder on my Becoming an Internet Affiliate website. So simple that it creates a widget on the sidebar and that's it. So it's not going to be super persuasive, but I like it that way for some of my websites.

The plugin is called Mail Subscribe List. It's a free plugin making it particularly attractive. And it keeps the names and emails in your database (no third parties involved.)

The plugin offers a Widget that you can install in your sidebar. Go to

Appearance » Widgets

and then select the Subscribe Form widget to install it.

This widget includes various fields, one of which is in link with thanking people who subscribe to the list.

One of the field is called the Thank You Type. It should be correct by default: Widget Header. This is what you want. It means that the thank you message will be added to the subscribe form header. More or less it will be nearly invisible and people won't know you thank them.

Below, you another field named Thank You Message. This is the where you enter a message that thanks your users for registering. To make it obvious, I changed that field with the following HTML code:

<div style=position:fixed;margin:0;top:0;left:0;right:0;bottom:0;background:white;z-index:10000;display:flex;align-items:center;>
  <div style=text-align:center;width:100%;>
    Thank you for registering with me.<br>
    <br>
    <button onclick=jQuery(this).parent().parent().hide();return(false)>Close</button>
  </div>
</div>

Note that you must be double careful to NOT ADD SPACES in the styles or onclick script. This is because the text gets some quotes added somehow, but not correctly.

(Yeah, I guess I could have put the CSS in the Additional CSS text box and have an identifier in the main div... It would make the CSS cleaner. For the onclick, I could have a separate JS script too. But in this way, it's all in one place, so easy to copy/paste to other websites.)

This code will put your Thank You Message in a full screen popup and show a Close button. When you click the Close button, it just hides that popup.

This makes that registration results way better wich really not much work on your part.

I hope it helps you.

Put it in a Box

I have the Subscribe form in a box. If you have the default Wordpress theme (twentyseventeen) then it's going to merge with your other sidebar items. I added a box around which requires a little bit of CSS code.

I clicked on Appearance » Customize to go to the theme customization and then selected Addtional CSS.

Here you are shown a text box where you can enter CSS. I prefer to put it in this CSS than the main CSS because I prefer to get updates on the main CSS, in case such happen to be pushed from Wordpress.

The code I added is as follow:

section#sml_subscribe_widget {
  border: 1px solid black;
  padding: 1em;
  margin-bottom: 3em;
}
.sml_submit {
    text-align: center;
}

It adds a 1 pixel black box around the form and gives it a little breathing air (5px padding) to make sure it does not look like everything is stuck together.

Also I align the button using center. I think it looks better. By default the button is on the left side otherwise.

You can see the results on my Becoming an Internet Affiliate website.

So... what emails are these people going to receive?!

None.

It will add the emails and the user name in a table in your database. That's it.

If you want to do more, you'll either need more plugins, or get the emails and add them to your mailing list.

Look closely, on the left side you see a new menu in your Wordpress Administration screen. It's called Subscribers. Go to that page and you'll see a button that says Export as CSV. This is how you can get your list of subscribers on your computer. The list is a CSV so you can upload it in many places. For example, you could have a mailchimp account (in which case you probably should use the Mailchimp plugin?) and any other accounts/system that allows you to send emails in an email campaign.

On my end, I already have an email campaign system on my server so I am using that and thus I do not need more than that. That is, my system can already grab the emails and send my email campaign to those emails in a completely automated way. That's one advantage of being a programmer.

There is an example of how the table looks like for one of my website:

mysql> SELECT * FROM bia_sml;
+----+----------+------------------+
| id | sml_name | sml_email        |
+----+----------+------------------+
|  1 | Alex     | alexis@m2osw.com |
+----+----------+------------------+
1 row in set (0.00 sec)

So any Linux command line tool could be used to retrieve the info and send an email to all your users. Linux is more than powerful enough to do such things.