Overview

With the Joomla package, you can create and use forms to grow your subscriber list and automatically add new contacts directly to your Brevo account.

In this tutorial, you'll learn how to:

1. Create a form
2. Name your form
3. Select the list(s) your visitors will be subscribed to
4. Set up your confirmation emails
5. Customize your messages
6. Add blocks and fields to your form
7. Add your newly created form to your site 

Before getting started

You will need the following information prior to use:

• Brevo account credentials. If you don't have one, sign up for free.
• Follow these steps to install the Joomla package.

1. Creating a form

From your Joomla admin, click on Components > Brevo. Select the Subscription forms icon. To create a new subscription form, click on the New button at the top left.

On this page, you will see all your forms. You can use the standard Joomla editing buttons to manage them.

2. Name your form

Start by naming your form.

3. Select your list(s)

Here you will select the Brevo list(s) that a visitor will be subscribed to when they submit the form. You can pick any number of lists from different folders.

Good to know: You must select at least one list or the subscription form will not work.

4. Set up the confirmation email

Go to the Confirmation tab.

When a new subscriber submits a form, there are several ways to follow up:

• No confirmation - visitors will be subscribed to the selected list(s) without any notification
• Simple confirmation - visitors will be subscribed to the selected list(s) and notified by:
• A follow-up email - Select an email template from your Brevo account that will be sent to welcome your new subscriber.
• A confirmation page - By selecting "Yes", you can specify the page where a visitor will be redirected after successfully submitting a form. Simply type the URL in the "Custom confirmation page" field.

• Double confirmation - visitors that submit a form will be added to the Temp - DOUBLE OPTIN list and a confirmation email requiring them to click to confirm their subscription will be sent. Once they have clicked, they will be added to the selected Brevo list(s).
• Opt-in email - Select an email template from your Brevo account that will be used for your new subscriber to confirm their subscription. Note: the template should contain the double opt-in tag as it will be replaced with a generated confirmation link.
• Form redirect page - By selecting "Yes", you can specify the page where a visitor will be redirected after successfully submitting the form. Simply type the URL in the "Custom form redirect page" field.
• Final confirmation - By selecting "Yes" your new subscriber will receive a final confirmation email after confirming the opt-in email. Select an email template from your Brevo account.
• Confirmation page - By selecting "Yes" your new subscriber will be redirected to a confirmation page after confirming the opt-in email.  Simply type the URL in the "Custom confirmation page" field. It can be a thank you page or a landing page where you provide additional information.

5. Customize informative messages

Go to the Messages tab. This tab allows the customization of basic messages.

Good to know: By default, the Joomla integration admin panel is currently only available in English. Customized messages for your forms, however, can be created in any language.

6. Add form blocks and fields

Go to the Form blocks and fields tab to create your form. Each form is composed of blocks. You can customize each block to have different options and different visual representations.

• To create the first block click on the "+" icon at the top left of blocks subform.
• To create the next block, click on the "+" icon at the bottom right of the last block.
• To delete a block use red "X" in the top right corner of the block.
• By using the three dot icon on the left side of each block, you can drag and drop to reorder the blocks. 

There are two base groups of block types:

1. "Attribute type" blocks - Attribute type blocks will have the word "attribute" as a prefix.  These type blocks allow visitors to enter specific data.
2. "Specific type" blocks - Specific type blocks are used to create elements in the form e.g. text, images, a separator, etc.

Good to know: In order for attribute blocks to work properly, you should have corresponding attributes within your Brevo account. 

Block types:

Specific Type Blocks:

• Text and image:  used to add custom text or images to the form, add content with the text editor. Make sure you have editor set up in your user parameters.
• Divider:  used to add a divider (separator) making the form more visually readable.
• Opt-in:  used to add an opt-in checkbox.  Visitors will not be able to submit a form if this checkbox is not selected.
• Captcha:  used to add captcha to a form.  In order to use this block type, you must have the captcha plug in your website installed and enabled. It is highly recommended that every form has a captcha field.

Attribute Type Blocks:

• Email:  used to allow visitors to enter their email address. A valid email address is required and will be flagged if not entered correctly.
• Attribute text:  used to allow visitors to enter a textual value, for example, "Name".
• Attribute number:  used to allow visitors to enter a numeric value, the entry will be validated when it is a numeric value.
• Attribute date:  used to allow visitors to enter a date value, visitors will have a calendar presented to enter the value, for example, "Date of birth".
• Attribute switch:  used to allow visitors to enter Yes/No value.  The visitor will see the checkbox.
• Attribute single choice:  used to allow visitors to make a selection from a list of options. The visitor will see radio buttons or select box.

Both specific and attribute block types have the following parameters:

• visible - with this switch you can easily turn on or off a block.
• block class - class added to block.
• style - specific CSS styling rules added to a block, block element style attribute.
• block control class - class added to control elements inside a block.

Most of the attribute block types have the following switches and parameters:

• required switch - visitors must enter a value in this field.
• show label switch with the option to enter label text - you can set and select if the label is shown next to a field.
• show help switch with the option to enter help text - you can set and select if additional explanation is shown.

Good to know: The order of blocks in the finished form will be the same as the order of blocks in this tab.

When you are finished creating your form, click on the Save button at the top left.

7. Adding a form

To show the forms you've created, log into your Joomla admin:

1. Go to Extensions > Modules.
2. Click on the +New button at the top left.
3. Select Brevo subscription form.

Start by adding a title.

Within this module, you will have to select the subscription form you have just created.

There are also additional parameters for adding text before and after the module. If your website is not in English, we recommend setting the module parameter to button label.

Set other standard parameters such as:

• Show Title - If you select "Show", the title will be displayed on your site.
• Position - Choose where on your site the form will appear.

Depending on the Joomla template your website uses and the other additional styling, it is important to understand the visual representation of your finished form. 

The module is using standard Joomla form controls and classes for form rendering, and there are options to add classes and styling for every form block. For this reason, your form can be easily customized according to your preferences.

For example if you have block type "Attribute single choice" in your form and you are using Joomla's default "Protostar" template, then by setting "Block control class" parameter to "btn-group btn-group-yesno" for that block, you will get radio buttons rendered with Joomla default button classes which should also exist in many other templates.

What's next?

• Improve your deliverability by sending Joomla transactional emails via Brevo
• Set up the tracking of your Joomla website activity to automate your communication

Have a question?

If you have a question, feel free to create a new issue here.

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.