- Open the page you wish to add a form to:
- Navigate to your Red OnX admin dashboard.
- Go to Manage Site on the left side menu.
- Click on ‘Pages’ and find the page you want to edit. You can also add forms to Blog posts, and templates.
- Click on the ‘Edit with Designer’ button for that page.
- Locate the Form Widget:
- In the Designer editor panel on the left, type “form” into the search bar at the top or scroll the widgets available.
- Drag the Form Widget Onto the Page:
- Drag the “Form” widget to the desired section of the page.
- Customize Your Form:
- With the widget in place, its settings will automatically show up in the left panel.
- Adding Fields:
- Click on the ‘Add Item’ button to add fields.
- Type: Select between options like text, email, text area, URL, tel, radio, select, and more.
- Label: Define the visible name of the field.
- Placeholder: Add placeholder text if necessary.
- Required: Toggle this on if the field is mandatory.
- Field ID: By default, the Designer might use IDs like field_c211069. You should update this to something more understandable, like “first_name” for a First Name field. This makes later data processing easier and more intuitive. You can find this setting under the Advanced tab for each field.
- Rearrange fields by dragging them.
- Additional Options:
- Navigate to the ‘Additional Options’ section beneath ‘Form Fields’ in the left panel.
- Form Name: If you’re managing multiple forms, assign a unique, recognizable name to this form. This aids in identifying it when reviewing submissions or troubleshooting.
- Styling and Adjustments:
- To fine-tune the look of your form, go to the ‘Style’ tab in the widget settings. Adjust aspects like colors, typography, spacing, etc., to align the form with your site’s aesthetics.
- Save Changes:
- Once satisfied, click the green ‘Update’ button at the editor panel’s bottom.
With these steps completed, you’ve adeptly added and tailored a form in the Designer, ensuring easy identification and management of user data.
Setting Up reCAPTCHA v3:
Why is reCAPTCHA Important?
reCAPTCHA is a security measure designed by Google to determine whether the user is a human or a bot. By integrating it into your forms, you significantly reduce the risk of spam submissions and automated bot attacks. This helps keep your website secure and ensures genuine user interactions. There are two main versions of reCAPTCHA:
- reCAPTCHA v3 (Enabled by default): This version runs in the background and offers a frictionless experience for users since it doesn’t require any interaction. It uses a score to decide whether the user is a human or a bot and acts accordingly.
- reCAPTCHA v2: This older version requires users to interact with a checkbox labeled “I’m not a robot.” In some cases, it might also prompt users to solve image-based challenges. Although this adds an extra step for users, it offers robust protection against bots.
Note: “reCAPTCHA v2” (the “I’m not a robot” Checkbox) is activated only upon request. Should you need this version, reach out to the Red OnX Support team.
Given the advancements in bot technology, incorporating reCAPTCHA into your forms is more critical than ever.
Instructions:
- Add the reCAPTCHA Field:
- Within the the Designer editor and the form you’re working on, click on ‘Add Item’ under the ‘Form Fields’ section.
- Choose “reCAPTCHA” for the field type.
- Configure reCAPTCHA v3:
- Once the reCAPTCHA field is inserted, you’ll see configuration options:
- reCAPTCHA Type: Opt for “reCAPTCHA v3”. This version provides background verification without user interaction.
- Once the reCAPTCHA field is inserted, you’ll see configuration options:
- When to Use reCAPTCHA:
- Consider incorporating reCAPTCHA into your form when:
- The form is openly accessible, such as contact or registration forms.
- You’ve faced issues with spam or automated submissions in the past.
- Consider incorporating reCAPTCHA into your form when:
By following the above steps, you’ve enhanced your form with reCAPTCHA v3, balancing user convenience with security against potential spam or bot interventions.
Actions After Submit in the form:
When setting up your form, you can select one or multiple actions from the list based on what you want to achieve. It’s essential to configure each selected action’s settings appropriately to ensure they function as intended.
For instance, for the “Email” action, you’d need to specify the recipient email, subject, and the content of the email. Similarly, for the “Redirect” action, you’d need to provide the URL to which users should be redirected after submission. Always remember to test your form after setting up actions to make sure everything works seamlessly!
- Collect Submissions:
- This action allows you to store form submissions. This means you can review and manage the collected data.
- Email & Email 2:
- These actions send notification emails after a form is submitted.
- Email: Typically used to notify the site admin or relevant staff about a new submission.
- Email 2: Can be configured to send a different email or notify another recipient. This can be useful for sending a confirmation email to the user who filled out the form.
- Redirect:
- After the form is submitted, users can be redirected to a specific URL or another page on the site. This is helpful for leading users to a “thank you” page or another relevant area.
- Webhook:
- Sends data to a specific URL when the form is submitted. This is a powerful feature for developers and can be used to integrate with other systems or custom scripts.
- Slack:
- Sends a notification to a specified Slack channel upon form submission. This is ideal for teams that want real-time notifications of submissions in their Slack workspace.
- Discord:
- Similar to the Slack integration, this action sends a notification to a Discord channel when someone submits the form.
- Popup:
- Trigger a popup to display after the form is submitted. This can be used for special offers, thank you messages, or to guide users to another action.
- Email Marketing:
- The “Email Marketing” action integrates form submissions with the CRM (Customer Relationship Management) system. This ensures that the data collected from the form is seamlessly transferred to the CRM for further use, like email campaigns, automations, or customer tracking.
Actions After Submit in the form:
When setting up your form, you can select one or multiple actions from the list based on what you want to achieve. It’s essential to configure each selected action’s settings appropriately to ensure they function as intended.
For instance, for the “Email” action, you’d need to specify the recipient email, subject, and the content of the email. Similarly, for the “Redirect” action, you’d need to provide the URL to which users should be redirected after submission. Always remember to test your form after setting up actions to make sure everything works seamlessly!
- Collect Submissions:
- This action allows you to store form submissions. This means you can review and manage the collected data.
- Email & Email 2:
- These actions send notification emails after a form is submitted.
- Email: Typically used to notify the site admin or relevant staff about a new submission.
- Email 2: Can be configured to send a different email or notify another recipient. This can be useful for sending a confirmation email to the user who filled out the form.
- Redirect:
- After the form is submitted, users can be redirected to a specific URL or another page on the site. This is helpful for leading users to a “thank you” page or another relevant area.
- Webhook:
- Sends data to a specific URL when the form is submitted. This is a powerful feature for developers and can be used to integrate with other systems or custom scripts.
- Slack:
- Sends a notification to a specified Slack channel upon form submission. This is ideal for teams that want real-time notifications of submissions in their Slack workspace.
- Discord:
- Similar to the Slack integration, this action sends a notification to a Discord channel when someone submits the form.
- Popup:
- Trigger a popup to display after the form is submitted. This can be used for special offers, thank you messages, or to guide users to another action.
- Email Marketing:
The “Email Marketing” action integrates form submissions with the CRM (Customer Relationship Management) system. This ensures that the data collected from the form is seamlessly transferred to the CRM for further use, like email campaigns, automations, or customer tracking.
Email Marketing Action Configuration:
When setting up the “Email Marketing” action, it’s essential to ensure that all fields are mapped correctly, especially mandatory fields like the email. This ensures that the data flows correctly into the CRM without any hitches. After setup, it’s a good practice to perform a test submission to verify that the data is being transferred to the CRM as intended.
Let’s review the options available to you.
Field Mapping: This section allows you to map the fields from your form to corresponding fields in your CRM.
- Name Prefix: The title or prefix of the person (e.g., Mr., Mrs., Dr.).
- First Name & Last Name: The individual components of the name.
- Full Name: The full name of the person.
- Email: The email address of the person. (Mandatory, as indicated by the asterisk).
- Timezone: The timezone the person is in.
- Address Line 1 & 2, City, State, Postal Code, Country: Address details.
- Phone: Contact number.
- Date of Birth: The birth date in the format yyyy-mm-dd.
For each of these, you’ll need to select the corresponding field from your form using the dropdowns. If a particular field is not used in your form, you can leave it as “- None -“.
Select Lists: This is where you select the specific email list(s) in your CRM where you want the form submissions to be added.
Select tags: When you’re adding a new contact or updating an existing one via the form, you have the opportunity to assign specific tags to these contacts. In the context of the CRM, these tags aren’t just labels; they play a significant role in automating various processes and campaigns.
Add Only:
- If set to “Yes”, only new contacts will be added to the CRM, and existing ones won’t be updated.
- If set to “No”, it will update the details of existing contacts if they resubmit the form.
Double Opt-in: This is a measure to ensure that the email address provided is valid and that the person genuinely wants to receive communications.
- If set to “Yes”, an opt-in email will be sent to the person, and they must click a link in that email to confirm their subscription.
- If set to “No”, the person will be added to the CRM as a subscribed state without any confirmation.
