Here's a guide on how to integrate Custom Contact Forms in Framer using Web3Forms

Framer default contact form is limited. It only allows 2-3 fields and only support a single form backend solution. Using Web3Forms, you can setup a free custom contact form in framer without any custom code. Open the demo website, duplicate the page and you can copy-paste the section to your own project and add unlimited fields and inputs without limitation.

Example Demo:

Step 1: Remix / Duplicate the Form Component

Visit our demo link above and click on the Remix / Duplicate link in the top right corner. Then a copy of the same page will be opened in your Framer Workspace.

Step 2: Add Access Key in a hidden input field

Once you duplicated the project, you can copy it again to your project. Once it's on the page you wanted, click on the Web3Forms Form Area and it will open the Sidebar with customization options.

Now, Click on the Inputs and choose Access Key in the bottom.

Then, in the panel, replace the YOUR_ACCESS_KEY_HERE value with your own access key from Web3Forms.

Step 3: Customize yourself

You can add more inputs, change name, values or even style by double clicking and edit the code. Have fun!

Last updated