Guides & tutorials

Create a newsletter subscription form with Arengu & MailChimp

Import this tutorial scenario in your workspace
Table of contents

Arengu allows you to create newsletter subscription forms with a predefined template. Thanks to the MailChimp native action, you can aggregate users to your newsletter lists, without coding and in no time.

If you wish to create a newsletter subscription form with other third-party services, you can do so by sending a request to the target API. Besides being able to generate a full newsletter form, keep in mind you can also complement it with other integrations, or with your own server-side logic, without having to code.

This is how to create and configure a newsletter subscription form with Arengu and MailChimp.

Creation of a newsletter subscription form with a template

Click on Create new form and select the template Newsletter Sign-up that will generate a predefined form with the correspondent flows.

Newsletter subscription form template

After you select the template, a form will be automatically created, and you will be redirected to the form editor. Here, you can add or remove fields, configure settings for each field, set notification preferences, arrange data privacy options, or customize the design of the flow. Use the menu on the right side of the editor in order to personalize every aspect of the form.

Newsletter signup templates - form editor

On the right-side menu, click on Flows to see what flows are linked to your form, and in which stages.

In this case, the Newsletter Sign-up template aggregates two flows: a before-submission flow to verify the email address, and an after-submission flow to subscribe the user to the newsletter with a MailChimp native integration.

Form editor with server side logic

Click on the arrow symbol next to each flow to open and edit it.

Configuration of the flows

1. Email verification flow

This is the overview of a predefined email verification flow, automatically generated with the Newsletter Sign-up template.

Email verification in form templates

This flow is automatically generated and ready to work properly. Yet, if you need to change the verification rules or the if/then condition, do so by opening each action and configure it to meet your needs.

2. Newsletter sign-up flow

After submission of the flow, the user is subscribed to the newsletter with a MailChimp native action. Keep in mind you can use other third-party providers and connect to them by sending a request with an HTTP request.

Configuration of this action requires to connect your MailChimp account via OAuth and to paste the audience ID, to be found in your MailChimp Audience settings.

Plus, add the email reference in the email field. In this case, the reference is already set, thanks to the template generation. Still, you can get it by clicking on the plus button.

The MailChimp native action also allows to set custom fields for additional user information (for instance, newsletter interests). To use them, create the fields in your MailChimp Audience Dashboard, under the 'Audience fields and *|MERGE|* tags' section.

Then simply reference the tag in the left column on the action settings in Arengu, plus the variable that your want to store in the right one. Just remember to specify only the tag name, without symbols (eg. PHONE instead of *|PHONE|), to add the new fields to the form, and to get the corresponding variables by clicking on the plus button.

After configuring each action, hit the 'Publish' button to save your changes. Keep in mind you can add additional flows or actions to complement the behavior of your form.

Test your form and embed it

You can test your newsletter signup form without having to embed it in a testing environment. Go to the form editor and click on preview to test it in Arengu first. You can check the result of the testing by viewing the 'Submissions' tab (in the forms editor) and the 'Executions' tab (in the flows editor).

After everything is set, go to the 'Share' tab in the forms editor and find your preferred embedding option. Copy it and paste it in your site, regardless of the tech stack you use.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.