Form Blocks

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here. 

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

Allow your visitors to interact with you using the dedicated Otter Form blocks:

🗒 Form

The forms are helpful for evidence of the information and engaging the visitors. You can choose the Contact form or the Subscribe form.

📝 Note: If you choose to skip, the Contact form will be added by default.

Settings Tab

Input fields - add new input fields, reorder, or edit them in this tab. If you choose to edit an input field, you can select a field type (Textarea, Checkbox, Stripe, Date, Email, Hidden, etc.), change its label or hide it, select a percentage width, insert placeholder and help text, or make it required.

📝 Note: Each field type has specific settings, e.g. Checkbox allows you to insert options, File allows you to insert allowed file types, etc. A common option for all fields is the mapped name which helps in the process of webhooks. You can read more about this here.

• Form Options - here, you will find the configurations of the email itself for the main address where you want to store emails, as well as for Cc and Bcc:
  • Email To - send form data to another email ( Admin is the default ). If you need help with configuring the server, check this doc.
  • Email Subject - customize the email title by adding an email subject.
  • Submissions - allows you to store the form submissions to the database, send them via email without storage, or store them to the database and also notify via email.
  • From Name - set the name of the sender.
  • CC, BCC - insert the corresponding emails to send copies to.
  • Redirect on Submit - redirects the user to another page after successfully submitting the form to a particular URL.
  • Enable reCaptcha - enable this checkbox for protection against bots. You will need an API key for reCaptcha, and you can get it from here >> http://www.google.com/recaptcha/admin. Also, you can use hCaptcha to ensure Bot Protection - check this doc to learn more about it.

• Autoresponder - customize the subject and body of the autoresponder email, ensuring your users are aware that you received their submission.
• Webhook - ensures communication between the form submissions, which collects real-time data, and another application. After enabling this form option, you will be able to select an existing Webhook or to create new ones, using the Edit Webhooks button. Read more about the Webhooks in this doc.

📝 Note: The reCaptcha in Otter will work only after you create an API key and insert it in Dahsboard > Otter > Settings > Integrations.

The fields from Form Options become available only after you enable them by clicking on the three dots and selecting from there:

• Submit Messages - configure the content of the submit messages
  • Success Message - show this message after the form is successfully submitted.
  • Error Message - the message will be displayed when there are problems with the server.
• Marketing Integration - Mailchimp and SendinBlue providers are available.

📝Note: Using Otter Blocks' Mapped Name, you can retrieve form data in the Mailchimp Dashboard. More details can be found here.

Style Tab

For an appealing style, you can customize the  Colors of several areas such as Label, Input Text, Background, and many more. More than that, you can use the global defaults colors of those areas if you have previously configured them by clicking on the three dots:

• Button - configure the Submit button for normal and hover styles using colors, size, padding, and alignment.
• Labels - here, you can change the size and spacing of Labels ( Name, Email, Message ).
• Input Fields -  adjustments for size, field spacing, and input padding.
• Border - adjust the border radius and width.
• Helper & Submit Messages - adjust the size of the helper text and success/error message size.

📝 Note: Boost your form's appearance using the Block Tools to add Animations, control its visibility, Transform it to a sticky block, or add your own CSS.

Form Submissions

All the form submissions will be visible inside Dashboard > Otter Blocks > Form Submissions:

After clicking on View, you will be able to see the submission made by the user:

Each form submission can be edited, deleted, marked as read, or unread. Only the administrator has access to the form submissions.

📝 Note: This feature is part of Otter Pro, which you can get from here.

📝 Contact Form

🔔 Subscribe Form

Allow your visitors to remain up to date using a subscribe form that ensures their engagement. 

💻 AI Form

Unlike the Contact and Subscribe forms, which are part of the Form block, the AI-based form is a standalone block, part of the AI Block, which you have to add to your editor.

📝 Note: Please note that in order to use it, you have first to generate an OpenAI API key and insert it into the block. Use this article to learn how.

1

Search for the AI Block and add it to the page.

2

Click on the AI Form Generator and insert the API key.

3

Type in the search field the topic of the form, then click on Generate.

Once you have done this, some suggestive fields will appear. If you click again on the Generate button, the generated form will be stored in the history list, which can be accessed using the navigation arrows.

Scroll down to see the available actions:

• Replace - replace the AI Block with a Form block, which allows you to edit the fields. After making this change, the prompt cannot be modified. 
• Create AI Form - this button appears when you select the regular Form (after clicking on the Replace button) and inserts a new AI form below.

• Insert below - insert the generated form below the Ai Block/Prompt Editor with the regular form settings (add new fields, email to, etc).
• Regenerate - if you are not satisfied with the result, you can click on the Regenerate button to send the prompt again. This will replace the current form, which means that it is not stored in the history list.

📝 Note: In order to save the AI form, you have to click the Replace button and save the changes.

🎥 Video - How to Use Otter's AI Form Block?

Use Cases for the Form Block

• traffic tracker - read more

Built with Hidden Input

• create a popup that appears while scrolling on a page

Built with AI Block

• create a donation form using the Stripe field - read more

Built Stripe Input

📝 Note: Unlock more features using the PRO version of the plugin.