How can I add a contact form to my Framer website?

Framer comes with a set of built-in form components, including a native solution that allows you to collect leads, bookings, and signups using different types of forms. You can also embed other forms using our Embed component.

Using our native form solution

With Framer's native forms, you can create a customizable editing experience with over 10 input types, design various states, and easily send data via email, Google Sheets, or custom Webhooks, all while benefiting from built-in security features like spam protection and rate limiting. To drop a form into your website, simply navigate to our Insert Menu → Forms.

Using our built-in forms

You can choose the perfect integration depending on your use case. Simply navigate to our Insert Menu → Forms.

Drag and drop any of them onto your page, and start using them. A basic overview of what our insert menu offers:

  • Formspark: Simple contact forms with optional Name, Email, and Message fields

  • Calendly: Booking appointments and meetings

  • HubSpot: Adding leads to your CRM with a focus on marketing

  • Intercom: Requesting customer support

  • Typeform: Rich contact forms with full customization without coding

You can also use our Input Component. It allows you to easily capture email signups on your sites. It currently supports Loops.so, MailChimp, FormSpark, and GetWaitlist.

Connecting to other third-party form services

You can also embed any other third-party forms or services like Beehiiv and Tally by simply copying their HTML script into our embed component.

Alternatively, you can use Code Components to create your own completely custom forms.