How to add Custom Forms for Framer with FormSpark

1. Copy the SuperForm component

Copy the component from our component library here and paste it to your file

After copying, you can customise the appearance, style, post success behaviour and custom fields. Keep an eye on the name field inside the inputs and this will be your identifier for your form.

2. Sign up for a Free FormSpark account.

Sign up here. With FormSpark, you can collect 250 submissions for free, get notified via email and connect it to other services via zapier without needing additional backend requirements.

3. Create a new FormSpark Form

Once you've registered, start by crafting a fresh form on the left-hand side of the dashboard. Click on type as HTML, Add you name and description

4. Configure Settings

Within that form in FormSpark, navigate to the "How-To" section located at the top. Grab the "submit-form" link from there. Paste this link into the "URL" field found in the component controls of SuperForms. For the configuration settings below the URL, ensure it's set to both "Post" and "JSON."

4. Configure Input fields & Test

Ensure that you've added required field types with their names properly configure. Once this is done, preview and test out the component You should be able to see the submissions in the submissions tab of your FormSpark form.