All Collections
Troubleshoot end user requests
Create a Newsletter Subscription form
Create a Newsletter Subscription form

In this article we will show you how to create and configure a form for your users to subscribe to your newsletter.

Lara Macarena Sastre avatar
Written by Lara Macarena Sastre
Updated over a week ago

A Newsletter is a digital bulletin that is sent with a certain periodicity (for example weekly, monthly or quarterly) to a list of contacts. These contacts must have previously accepted their express agreement to send them.

This action is essential to encourage users to subscribe to plans, buy new publications, keep them informed with news, offer discounts or promotions, etc.


💡 Some ideas that you can include in your newsletter:

  • "Best-selling ebooks of the month" or "Ebooks you can't stop reading" : you can promote the ranking of these ebooks and add a brief synopsis, images, direct links to the store and share a discount coupon to purchase them.

  • "Upcoming releases" or "Promotions of the week" : share the news with your users to keep them informed about the content and promotions of the store. You can use attractive images and texts, direct links, and more!


You have two ways to send these emails:

1. From the store you can configure lifecycle emails : This will serve to encourage subscription to plans and will be sent to all your users who have not purchased any plan.

2. Creating a subscription form linked to Mailchimp: This will allow you to configure the data you want to request from your users and create a contact list that you can manage from Mailchimp.


In this article, we'll show you how to create a form in Mailchimp and connect it to the store.

Mailchimp is a marketing automation platform that helps you share email and advertising campaigns with your reader users. By connecting it to the store you will allow your users to subscribe and receive periodic emails with news, promotions, campaigns, etc.

Mailchimp Free Icon of SuperTiny

From Mailchimp

1. Sign in to Mailchimp and create an account. You can choose a free plan or a paid one.

2. Once you have entered, go to the administration panel.

3. Click Create > Signup Form. The section to build the form will then open where you can edit the fields: you can change their names, delete them or add new ones.
💡 We recommend you mark the Email as required.


4. When you're done editing the fields, click Create again and choose the Embedded form option . Stay in the Classics section and scroll to access the form code.

5. Copy the code provided by Mailchimp.

Watch the video with the step by step :

:post it:

From the store in Publica

6. Go to Control Panel > Settings > Advanced and paste the code from the previous step into Custom before </body> code

7. We share the CSS styles used in the example of the image at the beginning, if you have knowledge of CSS you can modify them to your liking:

<style>
body {
overflow-x: hidden !important;
}
/* Formulario de suscripción a NL */
/* Desktop */
#mc_embed_signup h2{
text-align: center !important;
}
#mc_embed_signup {
background: url('https://i.ibb.co/kBFbKZ3/mails.png') !important;
color:#fff;
box-shadow: inset 0 0 20px rgb(0,0,0,0.5);
padding: 60px 0px;
font-family: Raleway,sans-serif;
}
#mc_embed_signup form{
opacity: 60%;
background: black;
}
#mc_embed_signup_scroll {
width:1370px;
margin-left:calc(50% - 685px);
}
#mc_embed_signup .mc-field-group {
padding-bottom:30px;
clear: none !important;
width: 32% !important;
float: left;
padding-left: 2%;
}
#mc_embed_signup .mc-field-group:first-of-type {
padding-left: 0%;
}
#mc_embed_signup .button {
background-color: #FCB0F7 !important;
padding: 0px 30px !important;
height: 45px !important;
font-size: 1.1rem !important;
font-weight:bold !important;
line-height: 20px;
width: 300px !important;
margin-left: calc(50% - 150px) !important;
color: #000 !important;
font-family: Raleway,sans-serif;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#mc_embed_signup .button:hover {
background-color: pink !important;
color: #000 !important;
}

#suscription-title {
color: white;
text-align: center;
width: 100%;
font-weight: bold;
margin-bottom: 20px;
}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{
width: 45px !important;
height: 34px;
}
/* Laptop */
@media (max-width: 1400px) {
#mc_embed_signup_scroll {
width:955px;
margin-left:calc(50% - 478px);
}
#mc_embed_signup .mc-field-group {
padding-left: 0%;
}
#mc_embed_signup .mc-field-group, #mc_embed_signup .indicates-required {
width:100% !important;
}
}

/* tablet */
@media (max-width: 984px) {
#mc_embed_signup_scroll {
width:738px;
margin-left:calc(50% - 381px);
}
#suscription-title {
font-size:1.6rem;
}
}
/* mobile */
@media (max-width: 767px) {
#mc_embed_signup_scroll {
width:97%;
margin-left:0px;
}
#mc_embed_signup .button {
margin-top: 10px !important;
}
#suscription-title {
font-size:1.3rem;
}
#mc_embed_signup .mc-field-group input {
left: 5%;
width: 100%;
}
}

/* Fin estilos*/
</style>


Paste this code into the Custom before </body> code box or into Custom CSS.

👉If you have the Custom CSS field , you can place the code there by removing the <style></style> tags from the beginning and end of the code.


8. Finally click Save .

Ready! You already have your subscription form linked to the store.

PRO TIP: If you want to automate emails every time you upload a new post, you can use Zapier !
Here we share our article where we teach you about this integration.

If you want to know more about Mailchimp's functionalities or need help, here we share the link to its Help Center.

We hope this tutorial has been easy for you. If you have questions, write to us at [email protected]

Did this answer your question?