Framer Forms for Beginners: HubSpot, Mailchimp & More Integrations

Summary

In this video, Nandy from Framer University demonstrates how to create fully customizable forms using Framer's new form feature. The tutorial walks through setting up the form, customizing input fields, and integrating with platforms like HubSpot, Mailchimp, and Google Sheets using Zapier. Viewers learn how to design sleek, functional forms and connect them to various apps for seamless submission handling. The video highlights the ease of use and versatility of Framer's form builder, showcasing its potential for various use cases in a simple, intuitive way.

Takeaways

• 😀 Framer's new form feature allows users to create fully customizable forms with ease.
• 😀 Forms can be connected to various apps like HubSpot, Mailchimp, and Zapier for seamless integration.
• 😀 Setting up a form in Framer is simple – drag and drop the form builder onto the canvas.
• 😀 Customizing form fields, such as text inputs and buttons, is highly flexible with a range of style options.
• 😀 You can customize the focus state of form fields for a more interactive experience.
• 😀 Framer forms allow you to adjust properties like text color, field color, padding, and border radius.
• 😀 The submit button in Framer forms is a component with multiple states (default, loading, disabled, success, error), which can be customized for different interactions.
• 😀 Submissions can be collected via email, Google Sheets, or webhooks, with webhook integration being useful for connecting to third-party apps.
• 😀 Using Zapier, users can connect Framer forms to various apps like HubSpot and Mailchimp for automatic form submission processing.
• 😀 With Zapier, form data can be mapped to other apps like HubSpot, allowing easy integration of form submissions into CRM systems.
• 😀 Framer forms can be expanded with additional fields like checkboxes or radio buttons and styled further to match your design preferences.

Q & A

What is the first step in creating a form in Framer?

The first step is to open the Framer workspace, go to the insert menu, search for 'Form Builder,' and drag it onto the canvas to get started with building your form.

How can you customize the fields in Framer's form builder?

You can customize the fields by selecting the label and input, then editing their properties such as name, placeholder text, required status, and appearance (e.g., text color, border radius).

What feature allows you to group form elements horizontally in Framer?

You can group form elements horizontally by selecting multiple fields, pressing 'Option + Command + Enter' to wrap them in a stack, and then setting the stack's direction to 'Horizontal.'

How do you customize the appearance of input fields in Framer?

You can customize the input fields by adjusting properties like text color, placeholder color, opacity, field color, border radius, and even the focus state of the field (e.g., changing the border color when the field is active).

How can you make a button in Framer interactive with different states?

Framer's button component includes multiple variants, such as 'default,' 'loading,' 'disabled,' 'success,' and 'error.' You can customize these states, including the button's color, radius, text, and hover behavior.

What is the purpose of setting up a webhook for form submissions?

Setting up a webhook allows you to send form submissions to other apps, such as CRM tools or email marketing platforms, through services like Zapier.

How do you connect a Framer form to an external app using Zapier?

You create a new Zap in Zapier, select 'Webhooks by Zapier' as the trigger, and copy the provided webhook URL into Framer's webhook field. After submitting the form, the data is sent to the connected app, like HubSpot or MailChimp.

What is the benefit of connecting a form to Google Sheets?

Connecting a form to Google Sheets allows you to store all form submissions in a spreadsheet, making it easy to manage and view the data. This setup can also be automated for ongoing form submissions.

Can you add extra fields to a form in Framer, and how?

Yes, you can add extra fields like radio buttons or checkboxes by clicking the button in the form builder to add the desired field. New labels and input components will automatically be created.

How can you ensure that form submissions are sent to your email?

To send form submissions to your email, select the 'Email' option under 'Send To' in the right panel, enter your email address, and all form submissions will be sent as email notifications.