Hello friends! I have prepared for you a simple and concise subscription page template in html format for uploading to hosting. And, of course, instructions for editing it.

The template is responsive different devices, comprises:

title and subtitle,
3D info product boxes for visualization,
list of benefits (shootouts),
subscription forms - by email and via VK,
basement with important information(links to your website or VK group, privacy policy, social networks).

An example of this template:

And here is a video tutorial on editing it:

I also post text editing instructions below.

1) Download the template first link.

2) It is packed into an archive, after downloading it needs to be unpacked into regular folder. Click on archive right click mouse and select "Extract to current folder".

You must have an archiver installed on your computer!

Or double-click to open the archive and drag the folder from the archive to the desktop.

3) Make a copy of the template folder. What for? So that you keep the template, and with the current copy you continue editing.

Right-click on the folder, select "Copy".

Then right-click on the desktop and select "Paste".

4) Open the copied folder by double-clicking the mouse, inside you will have two files. The index.html file and the assets folder. Let's start by editing index.html - this is our template. And in the assets folder, we only need a subfolder with pictures - images. I'll show you how to replace the 3D box layout with your product cover.

Other folders do not need to be touched - they are responsible for styles, scripts and the correct display of the page on different devices.

To edit the index.html file, you will need to download and install the free Notepad++ notepad.

This is what its icon looks like.

Once installed, right-click on the index.html file and select "Open in notepad". You will open the template code.

What are we editing here?

First, the title (title), which is displayed in the browser - just write your own text instead of the current one.

I show a novice partner using the example of my dictionary.

Below is the “GET ACCESS” button, when clicked, the person is redirected to the end of the page to the subscription form. Here you can write your name on the button instead of the current one.

Just substitute your text instead of mine.

Here it is important to describe what values, benefits, benefits the subscriber will receive from your free. And it works best in the form of such a list - clearly point by point.

By default, it has 4 items, if you need more, you can copy, for example, last paragraph by highlighting the relevant part in the code. I showed what needs to be highlighted in the screenshot, it is important to copy carefully here!

click on screenshots to enlarge

Thus, you can copy and add the number of points you need.

If, on the contrary, you need to delete an item, then select the block in the same way, as in the screenshot:

And press Delete on your keyboard. Odd space in the code can also be deleted using the Backspace (Back) key.

Important: this part of the code is more difficult, so it is no longer for beginners. 4 items in the list are the optimal number of benefits on the subscription, so you don't have to delete or add anything in the code!

Now we need to replace the subscription form. It is easier here, since the part of the code that we will change is marked with comments.. We need to completely remove the content between the two comments and paste in the subscription form code from our mailing service.

click on the screenshot to enlarge

In my case, it's Justclick. I previously created a subscription form in the "CRM" - "Subscription Forms" section.

Now I just copy its code to paste it on the subscription page.

And I paste it instead of the current code - I completely select this fragment and use the Ctrl + V key combination to paste the code of my form.

click on screenshots to enlarge

The text above the form "Enter your email in the form below ..." can also be replaced.

Important: to save your changes, do not forget to periodically click on the "Save" floppy disk icon in Notepad ++.

And to see how your signature changes in the browser, just open the index.html file in the folder by double-clicking on it with the left mouse button (this is how you open the template preview in the browser).

You can also choose which browser to open the file in by right-clicking on it. Select "Open with" and click on the desired browser in the list (if you have more than one).

Next in the template code is the subscribe button via VK- in it you simply insert a link to subscribe to your free via Vkontakte. For example, in Senler, you must first create a group of subscribers for this freebie and copy the subscription link to the group.

Then paste it into the button instead of the # sign between the quotes. You can also change the inscription on the button, as well as the text “Or get material on Vkontakte”.

If you want to unsubscribe from VK, select a piece of code, as I showed in the screenshot, and press Delete on the keyboard.

Now it remains to edit the text and links in the footer of the site. Be sure to leave the Privacy Policy here. I showed how to make a policy for my site here.

And at the very bottom, instead of the text Your full name, write your data.

And now we will replace the 3D cover of the information product with a signature one.. To do this, you will need to create your cover. If you do not know how to do this, then I recommend

It is desirable to reduce the size of the final image, since when created in the service I recommend, it turns out to be large (the size can be changed in any image editor, including online). The image format must be png.

For example, I halved the size from 1500x1500 pixels.

The finished image must be placed in the images folder, which is located in the assets folder - be sure to give it the same name as the current cover - maket, and delete my image.

That is, you need to replace the current image with yours, but always with the same name and format. Again, your image must be named maket and must be in png format!

When you replace the product cover with yours, but with the same name and format, it will also change in the signature template.

How to add Yandex.Metrica or a pixel code from Vkontakte to a subscription?

Very simple, Metric or pixel can be placed in the code before the tag< /head>by making a space. If you place both this and that, you can immediately after each other.

When the template is edited, it's time to send the hosting subscription page to publish it on the Internet.

Greetings, dear friends! Now we will talk about what a subscription page is, what it is for and how to make it yourself. And also at the end of the article I will share my small collection of subscription pages, or as they are also called “capture pages”. This lesson will be useful to everyone: both novice bloggers and novice infobusinessmen.

As I wrote above - subscription pages, this is a very important part for those who maintain their blogs and build a business on the Internet. More than one, you hear, more than one blogger and information businessman will not be able to do without capture pages!

Many of you know that the subscriber base is a Golden Asset, and you should take care of it at the very beginning! There is no need to "score" on it, or say to yourself "later, later, later", you need to act now!!! Of course, I won’t talk about all the subtleties of recruiting subscribers now, because. I think soon to write a series of articles on this topic, or even write free book. And it will be this summer, I think in early July. I advise you not to miss it!

We will do without subtleties, but in short, of course, I will tell you what and how ...

In order to gain subscribers, first of all, you need to create your own free information product, such as a video course or a book. Then create a subscription page (more on that in this article), and advertise your product! It is in this way that at first you can collect a base of subscribers.

And now we will talk about only one of the parts of the set of subscribers, this subscription page(capture page).

Signature page is a special page to which you will invite people with the insidious purpose of making them your subscribers using the subscription form.

I am more than sure that you have already met this page more than once. Therefore, do not waste time explaining what it is ... Let's talk about what they should be and how to do it yourself!

What should a funnel site look like?

There is a lot of debate about what the subscription page should be like, both among beginners and professionals. Therefore, the exact answer to this question is this moment just no ... And everyone uses what he likes, but you should still stick to some very important rules!

- There should be a "loud" and catchy headline.

- There should be a subtitle that will “finish off” the client.

— should be visible without scrolling the window.

— The subscription form should attract attention.

- The client must trust you and give his mail address.

— illustrative example what the client will receive.

These are the rules that everyone who creates subscription pages in order to get subscribers should adhere to. Now, let's analyze each of the points in a little more detail so that there are no questions left. But before that, I would like to say the following: these tips are only suitable for subscription pages, a slightly different tactic is used for selling pages, somewhat similar, but gives less result.

1. There should be a “loud” and catchy headline.

By loud and catchy, I mean that the title should simultaneously carry the essence of your free product, and "impose" it to the client! Also, the title should be readable and memorable!

No need to rush into a headline. You need to sit down, think carefully, think everything over, and then only make decisions about what the headline will be. It may take several days, or even weeks!

Header example:

“They thought I couldn’t do it. But they were wrong… I managed to make my first million online.”

2. There should be a subtitle that will “finish off” the client.

This subtitle is a very important part of the selling page, it should be written immediately after the title. The subtitle should be readable and carry a direct meaning of what your product is about. It can even be the name of the product, or its slang.

Subtitle example:

"Detailed instructions on how to earn a million!"

3. The subscription form should be visible without scrolling the window.

Well, I don't think it's even worth explaining. In the subscription page, the subscriber collection generator, that is, the subscription form, should be visible to the client immediately after entering the page, without scrolling down (). And by the way, this applies not only to the subscription page, but also just to the blog!

4. The subscription form should attract attention.

Standard subscription forms that offer specialized services, such as Smartresponder, are an eyesore. And therefore, such forms no longer attract as much attention as they did a few years ago. It is worth thinking about it carefully, and making something special and attractive.

If you have knowledge graphic editor and html, then there is nothing complicated, and if you are not familiar with them, then you should contact freelancers.

The signup form should be eye-catching as soon as you land on the page, but don't turn it into a Christmas tree.

5. The client must trust you and give his mail address.

You must write to your future subscriber that his e-mail address will remain with you, it will not fall into the wrong hands, and spam will not be sent to him! This is very important, you must let them know that you can be trusted! And, of course, you should not send dozens of letters to the subscriber a day, they did not agree to this ...

6. A clear example of what the client will receive.

Also an important part of the subscription page. You must visually show the future subscriber what he will receive in practice. simple words small, so it would be nice to provide a product cover, or some screenshots, or a video clip.

These are the rules you must follow without fail if you want to achieve decent results for short time. Of course, these are not all the rules and tips, there are many more, but at the initial stage, these are quite enough. If you want more, then please write me about it in the comments. I will then speed up with writing a free book.

How to make a subscription page?

A subscription page can be made without special knowledge of programming languages, including html. Everything can be done much easier, because for this there are a large number of different special ones. It is not difficult to find them, just write in the search: “Program for creating html sites”, or something like that.

Personally, I use the program for these purposes. Web Page Maker. I talked about how to create a simple subscription page with it in my free video course “ How to create a video course: from A to Z“, which you can download absolutely free of charge here.

And so I decided, in order not to repeat myself, especially for you to post this lesson in open access. You can view it below:

Well, how are you, is everything clear? If you have any questions, then write in the comments - I will definitely answer and help!

Recently, one of my subscribers, an elderly woman, wrote to me and asked for help in one issue related to working online. I won't go into the details of what I did for her, but I helped. And in response, she wrote to me that now she will definitely achieve best results online. Certainly, because I believed in […]

How do most people use Instagram? Exclusively for posting your photos. It turns out a kind of vanity fair. Metaphorically speaking, a typical photo is something like this: But Instagram (who would have thought!) has a “second bottom”. I'm talking about the ability to customize in this social network targeted advertising that will be shown exactly to those categories of people that we need. […]

We got around to reviewing the live training Infotraffic and conversion 2017, which I recently organized and conducted together with Alexander Dyrza. It will be a big article)) So - November 25 - 28, 2017. Moscow, hotel Izmailovo Alpha. Go! It's a cool feeling when people start to pull themselves into the hall before the start of the event. You meet them and […]

What are the costs in infomarketing (infobusiness)

I do not claim to be inclusive. I deliberately did not include some expenses in this article, I simply forgot about some. But the main points are reflected here: For equipment I will immediately make a reservation - it is very expensive to buy all this at once. Most best way out- just gradually form your home studio. And one more thing - I'm not the best specialist in all this, […]

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

Subscription form

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

Unfortunate example of form placement in the footer of the Yves Rocher website

A good example of the location of the subscription form from Mokselle

The main elements that the subscription form should contain:

Input fields. Best to ask for name and email. You can limit yourself to one mail, but then you lose the ability to send personalized letters.

Too many extra fields (found on the UniSender blog)



Enough form input fields by Ecco



Lack of information in the formQuelle

A clear schedule of letters on the sitePhoto warehouse

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

Too general text on the site 123.ru

Attractive text from Nike



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



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



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





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

The form is lost (Lamoda website)



Uniform - part of the design on the Adidas website



And a few more creative subscription forms for inspiration.

Sweet Jedi by Seonews:



Bright Popup by Quelle:



Nice offer to become friends from Kiehls:

Subscription Page

Yes Yes, whole page! It is easier to invite users to a separate page and you can tell more about the mailing list.

So, what should be on it:

An example of a good headline from Netology



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



Concise description of mailing lists on the Lenta.ru website



Benefits or reason for subscribing. Just like for the form, on the subscription page you need to show why the user needs the newsletter. You can not highlight it as a separate block, but combine it with the description of the mailing list.

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



Bulleted list is easy to read (H&M)



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



Subscription form. What should be in it, we have already discussed in the previous section.

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





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



Photos of employees have to subscribe (Service 1PS)