How to attract and retain subscribers. Detailed analysis of the subscription and unsubscribe pages

Let's set up the subscription form for our newsletter service to be completely adaptive and valid!

Nowadays, in light of the events regarding the closure of smartresponder(s) services, there is a great excitement and confusion in the souls of administrators: most site owners are nervous in search of a new service!

Of course, everyone is free to choose! and we won’t talk about this today. But let’s look at how to set up and adapt so that the subscription form for the update site is beautiful and, more importantly, valid. 1- most subscription forms have invalid code, and moreover, with a lot of unnecessary attributes - let’s put all this code in order: (this is how you can customize the form of any mailing service)

Sections of the article:

website subscription form

...provided by services often has very invalid code...

But this does not mean low-quality services at all...

Any code is provided to a wide audience and has many settings options: some adjust the style this way, and some adjust the style to suit themselves. But in any case (I will say this) in the original example of the subscription form code there are still unused attributes of the configuration tags... which means it is advisable to customize the provided code. That's all!

...the classic subscription form offered by the services will look something like this:

continue reading about

As you can see, the shape of the pee is not very cute) or not at all cute - I don’t like this window design! and moreover, in some services - it's not adaptive ... you yourself know what this means in our age of adaptation...))

So the question is: how to make it so that

the newsletter subscription form was beautiful and valid

remains very relevant! And if so, let's adapt and get busy...

I hasten to assure you: there is nothing terrible in our upcoming edit, except that we will have to work a little - we won’t touch the functional component of the code (not recommended), but we’ll deal with the following:

how to set up a subscription form - html input lines

…it’s mostly in these examples that the kinks are hidden.

But let’s consider an example of such a service as autoweboffice https://autoweboffice.com/ because in its subscription form there are two windows (this was once the case in smart): a form for entering email and name - this is more useful in terms of learning...

...and I studied this service a little, looked at the code, and, based on my Smart one, combed the AutoWeb one to a decent level - now I’m sharing the solution.

I haven’t started using it myself yet... because I haven’t quite figured out the payment network (it’s somehow unclear there) or I didn’t understand something)) - maybe I’ll switch soon.

…those who spot the joke in the subscription form get a prize!!

At the end of the day:

...what you should have done...

1 - write the names of the selectors in the html code, and as a result, remove unnecessary inline CSS styles (also, clean the code from unnecessary input attributes).

2 - write the code I suggested in your CSS template styles.

3 - test, adjusting...

I didn’t go into detail about the editors, because it would confuse me more. I think these basic explanations are enough for you to understand and set up your subscription form.

But!! If you suddenly encounter difficulties, please contact...

...or write in the comments.

This is where my story now decisively ends...!

!..by subscribing to site updates -
... let's part with ignorance..!

If you have a website, you're probably concerned that your visitors can receive news, updates and offers in a variety of ways - through social networks, RSS, email and so on. In all cases, the user's path is blocked by the subscription process - and if in social networks it is simplified as much as possible, then subscribing to an email newsletter very often suffers from unnecessary complications. Therefore, we decided to devote another article on our blog to the usability of the process of subscribing to your newsletter. Based on UniSender's experience, we will tell you how to make life easier for yourself and your visitor. First, let's look at a few serious mistakes using the following example:

So what we see:

1. You need to fill in three fields – nickname, email and password. Why have a nickname if you can use email instead? To simplify, we need to get rid of this field. Offer to fill it out later.
2. Captcha - there is a high probability that they will simply spit on you. Especially if the captcha is not entered the first time, which due to absent-mindedness of people can happen quite often. And from whom are you defending yourself in this case? It works especially well when you enter the captcha incorrectly, and on a new entry you are asked to fill out the password field again at the same time, for example. It's actually easier to go to another site.
3. A pre-checked “I want to receive newsletters” checkbox is considered in a number of countries to be a violation of anti-spam legislation. We have already written about this earlier. And although in Russia this does not violate the law, it still looks quite pathetic - even if you force the client to subscribe in such a forced way, he will send your letter to spam the first time you send it.
4. Just in case, do not ask the client to enter a password or mailbox twice. It's tedious and unnecessary - you'll see that now.
5. It is not necessary to check the box “I agree to the privacy agreement” - you can simply write “by clicking the register button, you agree to our privacy policy<ссылка>" However, you can’t do without a privacy policy - create such a page on your website right away.
6. If the client entered something incorrectly, do not reset the remaining fields, for example, the password field - this is a bad practice. Write in red letters what and where needs to be corrected, but leave in place everything that the client has already entered - this is true for any data collection system.

Thank you page

After the client has filled out the form and clicked “register”, he will see the so-called “thank you page”. Take a close look at the example below and tell me why this is a bad example:

Right answers:

1. Thank you – that’s ok, it’s in the example. Although you can speak in less clerical language.

2. Tell me from whom the letter will come - in this case, it is better to indicate from which mailbox it will come.

3. Show which mailbox the letter was sent to!
Thanks to this, there is no need to ask the client to enter the mailbox twice - he can see that he sent the letter to the wrong place if he does not receive a letter confirming registration. Otherwise, without receiving confirmation and without being able to navigate your site, the client will leave. Example:

Thank you for registering. A confirmation email has been sent to the mailbox %email-address%.

4. Tell me what to do if the letter does not arrive!
As a rule, a registration confirmation letter may not arrive for two reasons. The first is that your mechanism does not work. Therefore, “if the letter has not arrived, write to us” is a relevant phrase. However, you should not rush with it, since more often the letter ends up in spam, so first write - “If you do not see the letter in your inbox, check your spam folder.” To ensure that future emails from us reach you correctly, please add<ОТПРАВИТЕЛЬ>to your contact list." After such words, it is appropriate to add that if the letter has not arrived anywhere, “write to us.”

The ability to use your site should be given immediately

After they quickly left you an email and password (without any captcha, nicknames or other bells and whistles), you automatically send the client a registration letter. But don’t rush to send it to his mailbox like an obedient cow. Give him the opportunity to use the site now, but write somewhere at the top that “you are currently using the site in limited mode. In order to…<например, оставлять комментарии или сделать заказ>you need to confirm your mailbox. Registration confirmation sent to<ПОЧТОВЫЙЯЩИК>»

Registration confirmation letter

The simplest registration confirmation letter contains a number of necessary elements, namely:

1. Information about why you received this email: because you or someone else has registered on the site<САЙТ>
2. A link to confirm registration, which is accompanied by two phrases. The first one says that “in order to complete registration, follow the link.” And the second is “if the link is not clickable for some reason, copy it and paste it into the browser window.” Attention! Think about the page that the client will see after following the link. The standard phrase is “Thank you, your email address has been confirmed.”
3. A message that "If you received this email in error, you do not need to take any action." Plus, you can add a few more words that can reassure the client.

In the registration confirmation letter, you can immediately use it as a correct mailbox (instead of noreply, it is customary to use mailboxes to which the client can later write to your CRM), you can also place the header of a corporate letter.

Welcome email

Typically, after registration is confirmed, a Welcome Email is sent to the subscriber and the subscriber is placed in the appropriate chain. In the Welcome email, you can provide a link that will send the client to manage their subscriptions, tell them about the opportunities they received by registering on your site, hand over the keys to the product, and much more.

Subscription management page

The client can get to this page via a link from your Welcome email, and also if he clicks on a link that must be in each of your emails - this is the opportunity to unsubscribe or set up notifications. It might look like this:

From here the client gets into his cozy account, where he has the opportunity to configure subscription parameters. You can add here the setting of the frequency of sending your news and notifications, as well as the ability to change the account password and the “delete account” field.

Thus, we have looked at how you can thoughtfully make the process of subscription and account management so that it is as convenient as possible for the client and - at the same time - does not lead to you losing a lead. We have provided here as many options and steps as possible, but the ones you choose specifically for your site depend on its topic and goals. So, for a selling site, various marketing manipulations will need to be included in this standard chain. To subscribe to new posts on a news resource, you can significantly reduce the number of steps - take the email address on the site and include the option to set up an account in the next newsletter letter. Then the whole process will look like this:

We hope our instructions were useful to you and you use them to improve the process of subscribing to your newsletters through the site. Of course, there are situations when you are simply told what to do, and you simply will not be able to put into practice the generally good advice given in this article. In this case, unless you have the opportunity or desire to change jobs, you can leave the subscription process as it is now, even if you are not satisfied with it. Then look at the statistics - what is the refusal process, how many people came to the site and did not register, and - most importantly - how many started to register, but did not complete the registration. This will give you a factual argument that your current email subscription process isn't working. And perhaps you can configure this process better.

We will write about how to properly organize the unsubscribe process in a week.

Before you create a form, you need to understand why it is needed at all. To understand this, let's look at several ways to recruit subscribers.

First, you can buy a subscription base. You won't have to create any forms - you will already have the number of subscribers you pay for. Comfortable? Yes. Works? No.

In most cases, you will not be the only one who will be sold this base. This means that all users on the list will already have the habit of ignoring email spam.

Secondly, you can assemble such a database yourself. For example, from people who make their mailbox addresses publicly available. It's difficult, but at least you will have some idea of ​​your audience.

And finally, thirdly, you can invite users to add their address and name to your database. Why is this method better than buying a ready-made base? After all, not many people consciously want letters to come to them.

But this is exactly the trick - people themselves want you to write to them. That is, they are proactively interested in receiving your news and purchasing your products and services. Therefore, subscribing to the newsletter is considered the most effective.

To create the perfect shape, you need to know just a few principles:

1. The form must have a call to action;
2. The fewer fields, the better.

Let's go in order. What should the call to action look like? It’s very simple – just write “Subscribe!” in the title of the form. All. It may seem trivial, but it really works. Therefore, try to use appeals everywhere, not just in subscription forms.

As for the number of fields, ideally there should be two: name and address. The user will get tired if you ask to list all the members of his family. And if you don’t want to know his name, you will lose the lion’s share of the effectiveness of your letters. Why?

Yes, because people like to be called by name. That’s why you need to use their names in letters, for example, start a letter with the phrase “Hello, Igor!” Believe me, such a letter works better than one that does not address the person at all.

In the Western English-speaking information business, there has been a trend to leave one field altogether – email. Yes, personalization is decreasing, but people there have become so lazy (or degraded) that they are too lazy to enter their name.

Can I create my own subscription form?

Can. This process does not take much time and does not require extensive programming knowledge. It is enough to know html and, preferably, css at a basic level. If you don't want to get into all this, just continue reading from the next subheading.

First you need to enter a tag

, specifying two attributes:

1. Method. It is best to enter “post” into it. This will mean that data from the form will be transmitted in a way invisible to the user;
2. Action. Here you need to provide a link to the handler. To create form handlers, you need to know PHP. But, in order not to strain too much, you can take this link from a ready-made form that you get from mailing services.

Then inside the form you need to create two fields and a confirmation button. The tag is used for this . It needs to specify 3 attributes:

1. Type. For fields you need to specify “text”, and for the confirmation button – “submit”;
2. Name. The name under which the data will be sent to the processor;
3. Value. Some text that will be displayed on the button and in the fields.

The finished code will look like this:

EnteryoursName”>

Enteryouraddress”>

Subscribe!”>

form >

After this, you can create a mess using css. If you decide to style the form yourself, then it’s better to just take the form from the mailing service you use, and then just change the styles. Because different services have different field names and handler addresses. And, besides, there may be hidden fields.

Creating a form using mailing services

In mailing services, knowledge of html and programming when creating html forms is not required.

In many services this process is the same or almost the same. You are provided with a graphic editor for the form, and you select the elements you need. Then you can customize the colors and shapes. And also the purpose of the fields. For example, a field for entering an email address.

When creating a form in the service, you can specify which list new subscribers will be added to. By default, they will be included in all lists that you have created.

After saving the form, you will be able to copy its html code. for this it gives several options - short and long (code for web developers). What is the difference? A short code is more convenient to insert into a page, but it loads its content from a third-party source, that is, from a mailing service.

Long code, on the contrary, stores all the data within itself. By copying it, you can edit the form yourself. Just don't erase hidden fields. Otherwise, your subscribers may get lost before reaching the handler. Or the handler simply won’t understand which user should record these subscribers.

The service gives email marketers additional options:

• Possibility of choosing a ready-made form;
• The created form can pop up in the user’s browser window after a certain period of time;
• The form may always hang on the page in some corner;
• The ability to customize the letter that will be sent to the subscribed user, as well as a confirmation page, etc.

However, at the very bottom of the form on the free plan there will be a “ ” logo. If you think that this is not prestigious, use another service, but such free opportunities will not be easy to find.

In addition to the leaders in the Russian-language segment, we will mention a couple more working options.

It stands out for the quantity and quality of templates and forms in particular and the breadth of marketing tools in general. For which you have to endure his aggressive policy of extorting money and harsh behavior when banning accounts.

The restrained business style also affects subscription forms, but entrepreneurs like this balanced service more than the bright but expensive GetResponse.

How to insert a subscription form on a page?

It's not at all difficult to do this. If you have access to edit the page code, then simply paste the form code in the right place. For example, you need it in - then just paste it into the article and save. Please note that for this to work, you must have permission to use the html code.

Almost all free online website builders provide this feature. Except, for example, the setup .ru service. There this opportunity is paid. To add the form code to the text of an article on ucoz, you don’t have to work hard. You may need to go to the control panel and enable the html editor. Sometimes editing occurs exclusively using BB codes.

If you want to insert, you will need to make sure that you have the ability to edit the site design or its individual blocks. One of the most popular places for a subscription form is a sidebar or sidebar.

Typically, designers allow you to add individual blocks to them. So it won't be difficult.

In WordPress, html code can be inserted both into a page/post and into a sidebar widget, footer and other elements.

Conclusion

So we figured out how to use a very powerful and effective tool - subscription forms. The tool is really powerful because it allows

Hello dear readers of the site. I decided to get serious about my subscription base, otherwise it’s somehow frivolous to keep a blog for more than 2 years, and have only 200 subscribers via RSS and about 700 via the SmartResponder channel, I even set slightly different goals for this year.

In general, I will raise these indicators in every possible way, and today I will tell you how to create a beautiful subscription form for the site, as well as give you a huge variety of ready-made templates and help with their installation.

First of all, let's figure out what kind of thing this is, a subscription form, and what role it plays. I am sure that not everyone wants to litter the site with unnecessary things.

So you write interesting and useful articles. Visitors come to you, browse through the pages, find what they were looking for and leave. Perhaps they will never return again, especially if this person came from a search engine.

Traffic from search engines is characterized by the fact that it is aimed specifically at finding the visitor’s goal, which forced him to end up on the pages of your resource.

Having found the information he needs, with a 90% probability such a visitor will close the site page and leave, further wandering through the TOP results of Yandex or Google.

Even if he's hooked on your site, he simply won't know how to follow it other than bookmarking it in his browser.

This is where a beautiful subscription form on the site, implemented both through ( feedburner.google.com), and SmartResponder.

Your task is to make the visitor pay attention to a special window in which he enters his email and presses the subscribe button. In the future, if you write another article, he will receive a message by email that you have a new article on your site and a link to it. Agree that both sides will benefit from this.

For example, I follow a dozen sites on similar topics to mine. Just think how many extra movements I have to do every time to find out if a new article has appeared on some blog. It is much easier to check for new emails than to constantly open all sites of interest.

And one more important point: never underestimate the power of the subscription base. Gather a target audience around your projects, because search engine algorithms are constantly changing.

Today you are in the TOP, and tomorrow you are already in the ass in the last places of issue. But your subscribers won’t go away from you unless you scare them away.

So, before we start creating the miracle form, you must have accounts in feedburner.google.com (RSS) or SmartResponder.

If you don’t know how to do this, my articles “” and “” will help you.

As you may have already noticed, there are two subscription forms on my blog, one is located directly under the article.

The second form is in the sidebar at the very top.

I’ll give you an example of how I created the first type of subscription, the output of which is provided by the Feedburner service (RSS), several social network buttons and WordPress template styles.

After you have lit a feed on Feedburner, go to the “Publish” tab, and then select the “Email Subscriptions” section.

In this section, the system automatically generated a special code for you, which you will need to place in the place where you want to display the form.

I copied this code into my own and edited it a little, and this is what I ended up with.

< form style= "padding:3px;text-align:center;" action= "http://feedburner.google.com/fb/a/mailverify" method= "post" target= "popupwindow" onsubmit= "window.open("http://feedburner.google.com/fb/a/mailverify?uri=seoslim", "popupwindow", "scrollbars=yes,width=550,height=520");return true"> < h2>Subscribe to blog updates by email: < p> < input type= "text" value= "Enter your e-mail" name= "email" onblur= "if(this.value=="") this.value="Enter your e-mail";" !} onfocus= "if(this.value=="Enter your e-mail") this.value="";" !} style= "width:190px;" />< input type= "hidden" value= "seoslim" name= "uri" /> < input type= "hidden" name= "loc" value= "ru_RU" /> < input style= "width:140px; margin:10px 0 0 5px;" type= "submit" value= "Subscribe" /> !}

Subscribe to blog updates by email:

If you use my code, then replace the attribute in it action on your own, what the system will offer, since it is different for everyone.

However, in order for our form to look more attractive, we need to adjust its settings, or, to be more precise, add design styles in the file style.css.

To do this, we enclose all the previously obtained code in any "Class", For example "subscribe". Structurally it should look like this:

subscription form code + social buttons code

If you look at the code of my file, you will see the following picture:

I talked about the code for social buttons in the article “” There you can read how to register in these services and get the code for the withdrawal buttons.

. subscribe ( background: linear- gradient(to bottom, #FFFFFF 0px, #E8EFF5 100%) transparent; border: 1px solid #DCE0E3; border-radius: 5px; color: #4B5F74; font-size: 13px; height: 124px; line-height: 36px; margin: 0px 10px 10px; text- align: center; )

Subscribe ( background: linear-gradient(to bottom, #FFFFFF 0px, #E8EFF5 100%) transparent; border: 1px solid #DCE0E3; border-radius: 5px; color: #4B5F74; font-size: 13px; height: 124px; line-height: 36px; margin: 0px 10px 10px; text-align: center; )

Then you upload the whole thing to your hosting and see the result. If you did everything correctly, it should work out the way it did for me, but I advise you to come up with something of your own, be original.

Ready-made subscription form templates

I would like to present to your attention ready-made templates for various website subscription forms. They can be used anywhere on the site, and they can also be adapted for both RSS subscription and the SmartResponder service.

You can also download all the ready-made templates proposed above. To do this, use here this link. All files have the extension .psd, so they can be easily edited in Photoshop.

Latest news

A couple of days ago, my first check from Google Adsense finally arrived. It flew to us in Belarus for a little more than one month, I’m sure that we will have to spend so much more to cash it out.

I’ll be honest, it’s nice to receive such checks, and working with contextual advertising systems is a pleasure. Look how much the famous person earns Backspark.

That's all for me. I hope you can choose a suitable subscription form for the site from the proposed templates or create your own. If you have questions, ask, I'm always happy to help. Bye!

And in this article we will talk about how to make the subscription form interesting and how to retain customers in case of unsubscribe.

Subscription form

It is best to place the subscription form in a separate block at the bottom of the page or in the side menu so that the user can easily find it. You can invite people to subscribe in a pop-up window, but use this option carefully so as not to irritate users. Ideally, you should only show it to new site visitors.

An unsuccessful example of the placement of a form in the footer of the Yves Rocher website

A good example of a subscription form layout from Mokselle

The main elements that a subscription form should contain:

Input fields. It is optimal to ask for a name and email. You can limit yourself to one email, but then you lose the opportunity to send personalized letters.

Too many unnecessary fields (found on the UniSender blog)



Enough input fields in the form from Ecco



Lack of information in the form fromQuelle

Clear email schedule on the websitePhoto warehouse

Reason for subscription. Be sure to tell us what will be in the letters and why it is beneficial to the client.

The text on the website 123.ru is too general

Attractive text from Nike



You can also give gifts: a discount, bonus material, a demo version of the service, etc. Example text from Enjoyme:



Or, if you have a website selling services, you can give a mini-audit from an expert (example from Urban Decay):



It is not clear what kind of letters will arrive in the form from Lakodom





Additionally, do not forget that the form should be noticeable (but at the same time combined with the site design).

The form is lost (Lamoda website)



Shape is part of the design on the Adidas website



And a few more creative subscription forms for inspiration.

Cute Jedi from Seonews:



Bright pop-up from Quelle:



Nice proposal to become friends from Kiehls:

Subscription page

Yes, yes, a whole page! It’s easier to invite users to a separate page and you can tell more about the newsletter.

So, what should be on it:

An example of a good headline from Netology



Content Description. Here you can tell in more detail what the letters are about and how often they will arrive. If you have several types of mailings, then briefly describe each and include checkboxes so that the user can choose the ones he likes.



Capacious descriptions of newsletters on the Lenta.ru website



Benefits or Reason for Subscription. Just like for the form, on the subscription page you need to show why the user needs the newsletter. You don’t have to highlight it as a separate block, but combine it with the newsletter description.

The advantages are invisible in unstructured text (on the Ural Airlines website)



Bulleted list is easy to understand (H&M)



If you are giving a gift for subscribing, it is better to show it on the first screen, for example, in the header (on the Lamoda website):



Subscription form. We have already discussed what should be in it in the previous section.

Examples of letters. If in the subscription form it is enough to add a link to an example letter, then it is more convenient to show it right away. Better yet, post several letters.





Without photographs, information is lost (on the Ipa-Zakon website)



Photos of employees invite you to subscribe (Service 1PS)