Framer

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: https://web3forms.framer.website/

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.

Remix Button in the Pre-made Demo

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.

Web3Forms 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.

Replace Access Key with yours

Step 3: Customize yourself

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