How to Embed Third-Party Forms in Webflow

Step 1: Choose a Form Service

Start by selecting a third-party form service that meets your needs. Popular options include Google Forms for simple data collection, Typeform for interactive forms, JotForm for extensive customization, Wufoo for templates and integrations, and HubSpot Forms for lead generation if you're using their CRM. Consider factors like customizability, integration capabilities, and pricing before making your decision.

Step 2: Create Your Form

Once you've chosen a form service, sign up or log in to your account. Begin creating your form by either starting a new one or using a template. Add the required fields like name, email, and phone number. Customize the design to match your branding, including colors, fonts, and button styles. Set up notification emails, confirmation messages, and mark required fields as necessary. Save your form once it's ready.

Step 3: Get the Embed Code

After your form is set up, obtain the embed code from your form service. Look for options such as "Publish" or "Share," then choose "Embed" to receive a code snippet in HTML format. Copy this code to your clipboard.

Step 4: Open Webflow and Navigate to Your Project

Log in to your Webflow account and open the project where you'd like to embed the form. Enter the Designer view to make changes to your site.

Step 5: Add an Embed Element to Your Page

In the Designer view, select the page for adding the form. Open the "Add" panel from the left sidebar, often represented by a "+" icon. Find "Embed" in the panel or under the "Components" section. Drag and drop the Embed element onto your desired location on the page.

Step 6: Paste the Embed Code

Upon placing the Embed element, a dialog box will appear. Click on "Add Custom Code" and paste the embed code from your form service. Save to exit the dialog.

Step 7: Customize Your Embed Element (Optional)

If needed, adjust the size of the Embed element by dragging its corners or specifying dimensions in the settings panel on the right. Ensure the form is visible and accessible to users.

Step 8: Preview the Changes

Click on the "Preview" button at the top of the Webflow Designer to see how your embedded form appears on the site. Make sure the form is functional and displays correctly.

Step 9: Publish Your Site

When satisfied, publish your site by clicking the "Publish" button in the upper right corner of the Designer. This makes your form accessible to visitors.

Step 10: Test Your Form

After publishing, test the form on your live website. Submit it and verify that responses are recorded in your form service account. Troubleshoot any issues if necessary.

By following these steps, you can effectively embed third-party forms in Webflow, enhancing your website's functionality without extensive coding. Enjoy improved engagement and data collection with your new form integration.