How to add a signup form?
The following article applies to our brand new Forms and Popups editor. Legacy editor help can be found here.
How to add a signup form?
To add a signup form:
- Go to Forms and popups and click on the name.
- Click Edit design.
- Click Add elements icon.
- Drag and drop Signup form into your popup.
How to configure the settings of a signup form
You can configure the form using the five sections in the panel on the right.
![Form settings.](https://us-wd.gr-cdn.com/help/sites/9/2022/05/1513/fp26-1024x577.png)
Below you will find a detailed description of each section.
Fields
This section allows you to add, edit, or remove custom or consent fields visible in your form.
The default subscription form contains email and name fields.
Click on the Add custom field button to select the custom field you want to add. You can add multiple custom fields.
![The image shows where you can add custom fields to your form.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1445/CleanShot-2024-12-22-at-15.44.44.jpeg)
You can also edit the label of the field and decide if the field should be required.
![The image shows where you can edit the label and decide if the field should be required.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1449/CleanShot-2024-12-22-at-15.48.45.jpeg)
If you want to include consent fields in your form, click on the Consent field toggle to enable it. Then click on the Add consent field button to select a specific consent field.
Decide if it should be required with the Required toggle.
Learn more about creating consent fields here.
![The image shows how you can add consent fields to your form.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1452/CleanShot-2024-12-22-at-15.52.00.jpeg)
Success view
Click on the Success view section to choose what will happen after a visitor subscribes.
Select the Show thank you page option and add a message you want your new contacts to see if you prefer them to stay on the current page. This message will be displayed in the place of the form on your website.
You can edit it under the Thank you message tab.
![The image shows where you can select and configure the thank you message setting.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1459/CleanShot-2024-12-22-at-15.58.20.jpeg)
Use the Redirect to another page or site option if you prefer to use a link.
![The image shows where you can select to redirect new contacts to another page or website.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1501/CleanShot-2024-12-22-at-16.00.36.jpeg)
There are several types of links you can use. Make sure to choose the right type.
- External page or website – use it to link another site with a URL.
- Landing page – select a GetResponse landing page that you want to open.
- Custom protocol – use it to embed protocols.
- Website – select another website created with the GetResponse Website Builder.
Subscription settings
Click on the Subscription settings section to decide what will happen with your new contacts.
Choose the list you want to add new contacts to in the List dropdown menu.
If you want a double opt-in process, set the Send an opt-in confirmation email toggle to the right (enabled).
Set the Add to an autoresponder cycle toggle to the right if you want to enable it.
Select the day you want them to start on.
You can also enable a reCAPTCHA mechanism on your form in order to protect your business from spam messages and fraudulent activities.
![The image shows how you can set up the form subscription settings](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1508/CleanShot-2024-12-22-at-16.07.11.jpeg)
Decide what to do when a contact is already in the list. You can:
- Tell them they’re already subscribed – to display an error message for existing contacts trying to subscribe to the same list.
- Update their contact details – to update the contact details for existing contacts (name, custom field, and autoresponder day).
![The image shows where you can decide what to do with contacts who are already subscribed.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1511/CleanShot-2024-12-22-at-16.11.07.jpeg)
Design
Set up design details for labels, fields, consents, and buttons in your form in the Design section.
![The image shows where you can edit the design of the form.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1519/CleanShot-2024-12-22-at-16.18.25.jpeg)
Labels
- Show labels
Choose if you want to place field labels inside or above input fields. - Mark the required questions with
Decide if you want to mark required fields with the asterisk (*) or “required” text. - Font, font size, font style, font color
Select a font type, size, style, and color for the labels.
![The image shows where you can edit the design of the labels.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1522/CleanShot-2024-12-22-at-16.21.51.jpeg)
Fields
- Shape
Choose the sharp, soft or rounded shape of the fields. - Size
Choose from three predefined sizes or click on the … button to enter your own size manually. - Font, font size, font style, font color
Select font type, size, style, and color for the text your visitors will input in the form fields.
Note: It can be different from the label’s font settings. - Background color
Choose the background color of the fields. - Error color
Select a color for the error message.
![The image shows where you can edit the design of the fields](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1525/CleanShot-2024-12-22-at-16.24.48.jpeg)
Click on the Advanced settings section to set up the border, radius, and shadow settings of the fields.
![The image shows where you can access advanced settings of the fields design.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1527/CleanShot-2024-12-22-at-16.26.40.jpeg)
Consents
- Font, font size, font style, font color
Select font type, size, and color for the consent fields in your form. - Link style, hover link style, and colors
Choose the style of your link. and its color. You can configure the same settings for the link once someone hovers over it. - Text alignment and text line height
Choose the appropriate line height. It will determine the space between your consent fields.
You will also have an option to edit the alignment of your consent field text: it can be aligned left, center, right, or justified.
![The image shows where you can edit the design of consent fields.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1544/CleanShot-2024-12-22-at-16.43.03.jpeg)
Buttons
- Type your custom text for the form’s button in the Button text field.
- Style
Select one of the predesigned styles or choose one from our library by clicking on the More styles link. - Shape
Choose the sharp, soft, or rounded shape of the button. - Size
Choose from three predefined sizes or click on the … button to enter your own size manually. - Alignment
You can move the whole button to the left, right, or center of the section.
![The image shows where you can edit the design of a button.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1556/CleanShot-2024-12-22-at-16.55.43.jpeg)
- Advanced settings
If you want to further adjust your button, click on the link to open advanced settings.
You can customize the font, colors, border, radius, and shadow. - Reset to default
To reverse all custom changes, use this link to restore the default button settings.
![The image shows where you can access advanced settings and reset the design to default.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1600/CleanShot-2024-12-22-at-16.59.47.jpeg)
Block settings
The form block is a framed workspace around your form with a Signup form label on the left. You can only see the frame after clicking on the object. It won’t be visible on your website.
You can customize its color, padding, border, radius, and shadow.
![The image shows where you can customise your block settings.](https://us-wd.gr-cdn.com/help/sites/9/2024/12/1612/CleanShot-2024-12-22-at-17.11.08.jpeg)
Mobile devices
You can also enable Hide on mobile devices to hide your signup form while your page is opened on a mobile device.
![The image shows the hide on mobile devices toggle.](https://us-wd.gr-cdn.com/help/sites/9/2024/09/2009/CleanShot-2024-09-06-at-22.08.41.jpeg)