Framer Forms: Build a Complete Contact Form

In a fully functional website, a contact form is an indispensable core module. It not only provides visitors with a convenient channel to submit requests and feedback but also serves as a vital bridge between the website and its users in online marketing. As a mature SaaS website builder, Framer comes with a variety of Forms components, including native components and wrapped third-party options, to meet different form requirements across scenarios.

In this article, I will focus on the usage of Framer native Forms component—specifically, how to build a form that forwards visitor submissions directly to a predefined email address. As for the packaged third-party form components, I will cover them in future blog posts. Therefore, this article is dedicated to creating and implementing native Forms without diving into third-party integrations. By the end, you will learn how to quickly set up a complete, functional, and easy-to-manage contact form in Framer, enabling an efficient communication channel between your website and its users.

How to Use the Framer Forms Component

Finding and using Forms components in Framer is very intuitive. All form components are organized under the “Forms” list in the editor, allowing users to quickly locate the elements they need. With just a few simple steps, you can add a fully functional contact form to your webpage.

1 Finding Forms Components

First, in the top toolbar of the Framer editor, click the “+” icon on the left to open the component insertion menu. In this menu, you will see the “Forms” category. Hover over this category to view the various Forms components provided by the system, including the native Forms component at the top, as well as third-party wrapped components listed below, such as MailChimp, Calendly, Intercom, Typeform, and Hubspot.

2 Drag the Component onto the Canvas

Once you’ve located the component named “Forms,” simply drag it to the desired position on the canvas. This operation is not only quick and convenient but also preserves the component’s responsive layout and default styling, ensuring the form displays properly across different devices.

Settings for the Framer Forms Component

Although Framer native Forms component comes with built-in submission functionality, to have the form automatically forward user input to a specified email, it still needs to be properly configured in the properties panel. A complete contact form typically involves editing field labels and placeholders, setting the recipient email or redirect page, and configuring the submit button’s name and interaction states. The following sections will explain each of these in detail.

1 Editing Form Field Labels and Placeholders

To help users quickly understand what to fill in, clear field labels and appropriate placeholders are essential.

1). Editing Label Text

In the Layers panel, select a Label to see that it contains two subcomponents: a Text component (Name) and an Input component.

• The Text component represents the form’s label, such as “Name” or “Email.”

• After selecting the Text component, go to the Properties panel on the right → Text → Content, where you can directly modify the label text.

2). Setting Input Field Placeholders

Similarly, under the Label, select the Input component. In the Properties panel on the right → Input → Placeholder, enter the desired placeholder text, such as “Please enter your name” or “Please fill in your email address.”

Placeholders help users understand what information is required and enhance the form’s user-friendliness.

2 Setting Recipient Email and Redirect Page

After a user submits the form, you need to decide where the data will go. Framer offers two common configuration options:

1). Setting the Recipient Email

In the Layers panel, select the top-level Forms layer, then go to the Properties panel on the right → Form → Send To. Enter the email address that should receive the submissions, and the form data will be forwarded to that address.

2). Setting Redirect After Submission

In addition to email forwarding, you can set a redirect page for users after they submit the form. In the Properties panel → Form → Redirect, enter the target page URL, such as “/thank-you,” so that users are redirected to a thank-you page or the next step after submission. This not only enhances the interaction experience but also guides users toward subsequent conversions.

3 Editing the Submit Button’s Name and Interaction States

The submit button is a key interaction point in the form. Framer provides multiple preset states for button components in the design, helping designers quickly create a more professional user experience.

1). Editing Button Text

In the Layers panel, select the button component, then in the Properties panel on the right, go to Button → Edit Component to enter the button’s editing interface. In this interface, simply select the button text to modify it—for example, changing “Submit” to “Send” or “Submit Now.”

2). Configuring Button Interaction States

Framer Button component supports four interaction states:

• Loading: Displays a loading indicator after the user clicks.

• Disabled: A disabled state where the button cannot be clicked.

• Success: Feedback shown when the submission is successful.

• Error: Feedback displayed if the submission fails.

In the button’s Properties panel → Form State, you can customize the four states mentioned above, ensuring the form provides intuitive interaction feedback in different scenarios.

With these settings, Framer native Forms component not only meets the basic needs of information collection but also delivers a smooth interaction experience and a controlled user flow. These configurations lay the foundation for further form optimization, such as styling enhancements and field validation.

Input Types in Framer Forms and How to Add Them

By default, Framer native Forms component includes only three Labels: Name, Email, and Message. The input fields for these three labels are all text-type, which is sufficient for basic visitor information collection. However, for real-world websites, more complex form structures are often required, such as adding contact methods, service selections, or preference settings. In such cases, it’s important to understand the different types of input fields and expand the form according to your needs.

1 Input Types Supported by Framer

In Framer, each input field type corresponds to a specific use case. Choosing the appropriate input type makes the form more intuitive and user-friendly.

1). Text (Text Input Field)

The most common input type, used to collect textual information from users, such as name, company, phone number, or message content.

2). Select (Single-Choice Dropdown)

Suitable for situations with many options, such as letting users choose their country, business type, or service category. Dropdown selection helps prevent user input errors and ensures data consistency.

3). CheckBox (Multiple-Choice Box)

Used to allow users to select multiple options at the same time, such as interests, additional service choices, or types of newsletter subscriptions.

4). Radio (Single-Choice Button/Toggle)

Unlike a CheckBox, a Radio button allows only one selection within the same group. It is commonly used for choosing gender, selecting a plan tier, or single-choice questions in surveys.

2 Adding New Input Fields in Framer

Once you understand the input field types, you can add more fields to the form to meet specific requirements.

1). Steps to Add a New Input Field

1. In the Layers panel, select the Form layer.

2. A “+” icon will appear at the bottom of the form on the canvas.

3. Click the “+” icon to open a selection menu.

4. Choose the desired input type from the menu (Text, Select, CheckBox, or Radio).

5. The new input field will be automatically added to the bottom of the form, and you can drag it to adjust its order and position as needed.

2). Configuration and Optimization

After adding the fields, you can modify the labels and placeholders in the Properties panel on the right to ensure the field meanings are clear.

For Select, CheckBox, and Radio types, you can also define the option contents in the Properties panel to ensure they align with actual business requirements.

3 Plan the Number and Types of Input Fields Wisely

Although Framer provides flexible expansion capabilities, more input fields are not always better. Too many fields can reduce users’ willingness to complete the form.

• Keep it concise: Only include the most essential required fields, such as Name, Email, and Message.

• Expand based on business needs: If additional information is needed (e.g., budget range, service category), ensure the purpose is clear and avoid redundancy.

• Optimize user experience: Choose the appropriate presentation for different input types—for example, use dropdowns instead of free text input to reduce errors.

By following these guidelines, you can not only master the input field types in Framer Forms but also learn how to add and configure different fields according to actual requirements, creating a contact form that is both complete and efficient.

Design and Styling of Framer Forms

After completing the form fields and functional configuration, the final step is to design and optimize the form’s styling. The visual appearance of a form—whether clean and appealing—directly affects the user’s experience and conversion rate. Framer provides a rich set of style controls in the Properties panel on the right, allowing you to flexibly adjust details such as colors, borders, shadows, and corner radius.

1 Adjusting Form Size

In actual design, the form’s size needs to coordinate with the overall page layout. Framer provides two methods to adjust the form’s size:

1). Adjusting via Canvas Dragging

After selecting the form on the canvas, move your mouse to the form’s edge and drag the blue control points to resize it freely. This method is intuitive and fast, making it suitable for quickly adjusting the form size during visual layout.

2). Entering Exact Dimensions in the Properties Panel

For more precise control, you can directly enter width and height values in the right-hand Properties panel → Size. This method is ideal for adhering to design specifications and ensuring consistency of forms across different pages or modules.

2 Main Style Options

In the Styles section of the Properties panel on the right, you can customize the form’s visual appearance:

• Opacity: Adjust transparency to make the form blend better with the page background or stand out.

• Fill: Set the form’s background color, preferably consistent with the page’s theme color to ensure overall harmony.

• Radius: Adjust the corner radius of the form. The higher the value, the rounder the corners, creating a softer visual effect.

• Border: Add or remove borders, and set the border style (solid, dashed, etc.).

• Shadows: Add shadows to create depth and make the form more prominent on the page.

These style settings not only enhance visual appeal but also help emphasize the form’s importance within the page.

3 Tips for Form Style Design

In practice, consider the following guidelines:

• Keep it simple: Avoid using too many colors and complex shadows, ensuring users focus on entering information.

• Highlight the button: Design the submit button with higher contrast so users can easily locate the action point.

• Maintain a consistent style: The form’s background color, corner radius, and shadow effects should align with the overall website style to avoid a disjointed look.

By adjusting size and style appropriately, Framer Forms can not only fulfill data collection functions but also serve as an important visual element that aligns with your brand on the page.

Conclusion

Through this article, you should now have a complete understanding of how to create a fully functional contact form in Framer. From calling the Forms component, configuring field labels and placeholders, setting the recipient email and redirect page, to extending input types and designing styles, each step ensures both the practicality and visual appeal of the form. A well-designed and smoothly functioning contact form not only serves as a bridge between your website and users but also plays a crucial role in enhancing user experience and driving conversions.

If you want to create more efficient and brand-aligned form designs for your website, feel free to contact Jane Framer Studio — we specialize in custom Framer website design and development, helping you achieve the best balance between aesthetics and functionality.