Adding a form to your Webflow site is a straightforward process. Webflow provides a built-in form element that you can customize and style according to your needs. Here’s a step-by-step guide to help you add and configure a contact form on your Webflow site:

1. Add the Form Element

1. Open Your Project:

   • Log in to your Webflow account and open the project where you want to add the form.

2. Add a Section:

   • In the Webflow Designer, drag a Section element from the Add Panel to your canvas where you want the form to appear.

3. Add a Form Block:

   • Drag a Form Block element from the Add Panel into the section you just created. This will add a basic form with a few default fields.

2. Customize the Form Fields

1. Add/Remove Fields:

   • Click on the form block to select it.
   • Use the Add Panel to drag additional form elements like Text Field, Text Area, Email Field, Checkbox, Radio Button, or Select Field into the form block.
   • You can remove any default fields you don’t need by selecting them and pressing the Delete key.

2. Edit Field Settings:

   • Click on each field to customize its settings. You can change the placeholder text, set fields as required, and give each field a unique name to identify it.

3. Rename the Form:

   • Select the form element and go to the Element Settings Panel (D).
   • Under the Form Settings, give your form a unique Form Name to easily identify submissions.

3. Style the Form

1. Customize Appearance:

   • Use the Style Panel (S) to customize the appearance of your form elements. You can change fonts, colors, borders, padding, and margins to match your site’s design.

2. Add Custom Classes:

   • To maintain a consistent style, add custom classes to your form elements and define the styles in the Style Panel.

4. Configure Form Settings

1. Form Submission Settings:

   • Select the form and go to the Element Settings Panel.
   • Under the Form Settings, you can specify what happens after the form is submitted. The default action is to show a success message, but you can also redirect users to another page by entering a URL in the Redirect URL field.

2. Email Notifications:

   • By default, form submissions are sent to the email address associated with your Webflow account. You can change this by going to the Project Settings > Forms tab and adding additional email addresses.

5. Publish Your Site

1. Publish the Changes:
   • Once you have configured and styled your form, click the Publish button in the top-right corner of the Webflow Designer to publish your changes.

6. Test Your Form

1. Test the Form:
   • Visit your published site and test the form by submitting a test message. Check that you receive the submission email and that the success or redirect message works as expected.

Optional: Integrate with Third-Party Services

If you want to connect your form to third-party services like Zapier, Mailchimp, or a custom backend, you can do so using Webflow’s integrations or custom code embeds.

Example: Integrate with Zapier

1. Create a Zap:

   • Go to Zapier and create a new Zap.
   • Choose Webflow as the trigger app and configure it to trigger on a new form submission.

2. Configure the Action:

   • Choose the action app (e.g., Google Sheets, Mailchimp) and configure it to perform the desired action with the form data.

3. Connect Webflow to Zapier:

   • Follow Zapier’s instructions to connect your Webflow site and form to the Zap.

By following these steps, you can add a fully functional and styled contact form to your Webflow site, configure its settings, and even integrate it with other services for enhanced functionality.