How to Use Contact Forms & Integrations in Your Website

A contact form allows visitors to reach out to you, submit inquiries, or sign up for offers. By integrating the form with email notifications, lead management, and mailing lists, you can automate communication and data collection.

1. Adding a Contact Form to Your Page

1. Open the Elements Drawer.
2. Drag and drop the Form Element onto your page.
3. The default form includes:

• Email Field (for collecting user emails).
• Selection Field (for dropdown options).
• Paragraph Field (for messages or longer input).

You can edit, add, or remove fields based on your needs.

2. Customizing Form Fields

1. Click on a field to open its settings.
2. Modify the following:

• Field Type (Text, Email, Paragraph, Dropdown, Number, etc.).
• Required Field (Force users to fill out certain fields).
• Placeholder Text (Example input to guide users).
• Spacing & Label Position (Top, inside, or hidden labels).

Adding a New Field

1. Click Duplicate on an existing field.
2. Change the Field Type (e.g., Text for a name field).
3. Edit the Placeholder and Label (e.g., "Your Name").

Rearranging Fields

• Use the Up/Down Arrows to reorder fields.

3. Styling the Contact Form

You can customize the form’s appearance:

• Typography – Adjust font size, weight, and style.
• Colors – Change the text, background, and border colors.
• Button Styling – Choose size, shape, fill type, and hover effects.

Customizing the Submit Button

1. Select the Submit Button.
2. Modify:

• Text (e.g., "Send Message").
• Size (Small, Medium, Large).
• Alignment (Left, Center, Right).
• Icon (Add or remove an icon).

4. Setting Up Form Actions

Success & Error Messages

1. Click on the Submit Button.
2. Go to Settings > Link Options.
3. Customize:

• Success Message – Confirmation after submission.
• Error Message – Displays if the form fails to submit.
• Redirect Option – Send users to a "Thank You" page after submission.

5. Managing Form Submissions (Leads Collection)

By default, form submissions are stored in the Leads Dashboard.

1. Go to the CMS Dashboard.
2. Click Leads (under project settings).
3. View, export, or delete submitted data.

6. Setting Up Email Notifications for Form Submissions

If you want to receive an email notification when someone submits a form:

1. Select the Submit Button.
2. Click Integrations.
3. Choose Email Notification.
4. Enter:

• Recipient Email – Where notifications will be sent.
• Subject – Email subject line.
• From Name – Sender name in the email.

Now, each form submission will trigger an email notification to your inbox.

7. Integrating the Contact Form with Mailchimp & Other Services

To collect leads in a mailing list (e.g., Mailchimp, MailerLite, Zapier):

1. Click Integrations in the Form Settings.
2. Select Mailchimp, Zapier, or another email marketing service.
3. Enter your API Key (provided by the service).
4. Sync Fields (e.g., map "Email" field in the form to "Subscriber Email" in Mailchimp).

Now, all form submissions will be automatically added to your mailing list.

8. Adding reCAPTCHA for Spam Protection

To prevent spam form submissions:

1. Open Integrations in the form settings.
2. Select reCAPTCHA.
3. Follow the instructions to connect Google's spam protection.

9. Why Use Contact Forms & Integrations?

Allow visitors to contact you easily.

Collect leads & manage inquiries.

Receive instant email notifications for new submissions.

Integrate with email marketing tools for automated follow-ups.

Protect against spam with reCAPTCHA.

By setting up contact forms with integrations, you can create a seamless communication channel while automating lead collection and email marketing.