Framer
Here's a guide on how to integrate Custom Contact Forms in Framer using Web3Forms
Here's a step by step instructions on how to setup Web3Forms with the new Framer Forms feature.
Live Demo /Remix: https://web3forms-remix.framer.website/
Framer forms Pricing
Framer forms is providing only 50 submissions per month for free. Once you upgrade to Basic which is $15/m or Pro for $30/mo, you will get 500 & 2500 submissions per month respectively.
In contrast, using Web3Forms, you will get 250 free submissions per month. Web3Forms provides unlimited submissions for Pro plans which start from $8/mo.
Source: https://www.framer.com/pricing/ & https://web3forms.com/pricing
However, you can now use Web3Forms in Framer. Here are the step by step instructions on how you can use it.
Currently, Framer uses their own proxy for the Web3Forms endpoint which is causing to hit the Framer limit once 50 submissions are reached. You must contact Framer support and ask them to remove the proxy and let you use our endpoint directly.
Step 1: Drag and Drop the form builder
Once you are on the framer project, Click on Insert -> Form -> Form Builder. The drag them to your canvas.
Step 2: Add Web3Forms Access Key
Once you drag and drop the form, you can then add a hidden access_key you have generated from Web3Forms Home Page.
Click on the + button below the form and add a new "Text" field.
Click on the Label and remove it. We do not need that for this input.
Now, click on that textbox field which opens up a right side panel. Click on the + button right to the text Input and choose Hidden. Now click the + again to add the Value field.
Now, edit the following:
Change Type to Text.
Name: access_key
Value: Insert your access_key here
Placeholder: Remove Value
Required: Yes
Step 3: Add Web3Forms Endpoint
Now, click on the main Form wrapper which opens up a Form panel in the right sidebar.
Click on the Send To dropdown and choose Webhook. Then add the Web3Forms API endpoint in the Popup. Our endpoint is: https://api.web3forms.com/submit
Step 4: Test & Publish
That's it. Done. You can customize form fields as per your requirement or add more hidden inputs for customizing email subject, from_name etc. Once done. Click on the Play button to preview the website. If everything's good, you can publish the framer website. Now you have a fully customizable working contact form in Framer.
Currently, Framer uses their own proxy for the Web3Forms endpoint which is causing to hit the Framer limit once 50 submissions are reached. You must contact Framer support and ask them to remove the proxy and let you use our endpoint directly.
If this method does not work for you, you can choose the old method which still works. Here are the steps:
Framer Forms - Old Method
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.
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
