This guide will show you how to add and style the Opt-in Form element in your OptimizePress Builder.
------------------------------------------------------------------------------------------------------
Need to know how to integrate your email provider?
Click the following link to be taken to our "Integrations" section in the help guides:
https://docs.optimizepress.com/en/collection/66-optimizepress-integrations
Need to know how to setup GDPR Fields?
https://docs.optimizepress.com/en/article/553-how-to-use-the-gdpr-features-within-opt-in-form-elements
------------------------------------------------------------------------------------------------------
1. Drag the Optin Form element to the section where you want it to show in your OptimizePress Builder page.
On the left hand side, you can see the customization options for your optin form element - Design & Advanced. In the Design section, you can select the opt-in form style you prefer to use - we have several pre-designed optin form styles available for use.
The Advance section is where you can adjust the positioning (Fields/Positioning), hide the element on desktop, table & mobile (Responsive), and add CSS (Advanced).
2. Now, let's go to the OPTIN FORM itself and configure the settings.
Click the Integration Options >> Edit Integration button to set up the integration and other optin form settings.
In the first tab of the Integration Options, this allows you to select the Autoresponder or Email Service Provider you want to use. We do have integrations with various email providers (see the list here). If you already have integrated your autoresponder/s, you will see these in the Integration window. Select the said autoresponder and then click the "Next Step" button.
If you have not integrated yet your autoresponder, just click the " Add New Integration" in the upper right corner and then follow the integration process.
Once you add the integration you'll just need to choose the integrated service from the "Integration" tab in the Optin form Wizard. Once you do that and click "Next", you'll be able to select the list, tag, campaign or form where your data is sent. Just click the drop down menu to see and select the list. Some integrations also have other options such as tags or form ID (if the integration includes form ID. Each integration may be different. For example, Aweber and Mailchimp (as well as others) would not have the Form ID option.
Then select the Form Fields you want to show in your optin form. You'll notice when selecting the field, it will have a blue border around it. To deselect a field, click on one that has the blue border around it. In the example below, the only selected field is the E-Mail field, but if we click on one of the others then it will show the blue border. This is how you can tell which fields are selected or not. Not all integrations share the same fields. Some are different, but the most common is first name and email.
The next screen, if the integration supports it, will allow you to set up extra fields such as select, checkbox, and other fields where the data can be mapped to custom fields or tags (depending on the integration):
We also do have the GDPR features in the next tab of form fields. You have three (3) choices in this setting - either to set this OFF, show to EU visitors only or show to all visitors.
After selecting to show the GDPR, toggle ON the Consent section and then set the confirmed and declined tags you have set within your autoresponder.
Once done with the GDPR, the next thing to do is to set the action when form is submitted. You can select the Notification if you just want them to show a notification text after they opted in, Redirect to URL if you want them to be redirected to another page (this can be your Thank You Page) or you can show a PopOverlay instead.
You now have configured your optin form completely. Click the " Close" button to close this window.
To access the Form Styling, click the window like icon (as shown in the screenshot below). In the form styling section, you can adjust the width of the optin form, field layout and alignment.
Go to the Field Sizing tab to adjust the field width and gap.
To set a background colour of the optin form, just click the colour icon (right after the form styling icon). Nvigate to background color and set your preferred colour there.
You can also choose either to set the background colour as Linear Gradient or Radial Gradient - just click the drop down menu.
Go to the Form Borders/Shadows icon to set a border or shadow of your optin form - just click their respective tabs to access the border and shadow settings.
To further customize the look or design of the optin form, please see below -
Click directly the form field to access the Input settings. To enable the Label, just toggle it Yes to be visible and then adjust the label spacing.
Switch to the Input tab to edit the placeholder text and add the default value.
Go to the Icon tab to show an icon in the form field - there are variety of icons available to choose from.
In the Validation tab, this allows you to set URL mapping and customize the validation message.
Click the text (T) icon to access the Label Text Options - here you can change the font size and set the styling. Just switch to each tab and configure the settings.
FIELD TEXT OPTIONS
To change the font size and styling of the form field, please click the Tt icon as shown in the screenshot below.
Click the color icon tool to access the colour options - go to the respective tabs to configure the colour of the label, field, placeholder and icon.
Go to the border icon to set the borders or shadow styling of the form fields.
If you want to apply the customization to all the form fields, we do have a styling lock and override option. Just click the padlock icon to lock or unlock the styling.
You can also customize the styling of the GDPR section. Same with the form fields, you can also lock the styling by clicking the padlock icon.
Click the Checkbox Settings to access the Input, Label and Validation tabs. In the Input tab, you can choose to enable the required and checked options. The Label allows you to set the spacing, while the Validation gives the capability to customize the validation text message and add a URL Mapping.
The other two icons after the checkbox settings are for the font styling ( T) and color label.
Click the button to customize its layout or design. Go to Button Settings (arrow icon) to adjust the button height and width. You can also select the button size from XS to XL.
The Icon tab allows you to show an icon in the button. Just toggle Yes to enable this and configure the settings.
Hope this helps you understand how to use the opt-in form element. If you have further questions or encounter any issues in using this element, please contact our Support.
tags: haw to use the opt-in, use the opt-in
