Forminit

Connect Forminit to your Webflow site and get powerful form handling with file uploads, spam protection, and detailed analytics.

What is Forminit?

Forminit is a form backend service that handles everything that happens after a user clicks “Submit.” Instead of building your own server to process form data, Forminit receives submissions, validates them, stores the data, and can notify you or connect to other apps without writing backend code.

You build the form in Webflow, and Forminit takes care of the rest.

Why Use Forminit with Webflow?

Webflow’s native forms work well for simple use cases, but Forminit unlocks advanced capabilities

Requirements

• Webflow account on Starter plan or higher. Custom code access is required.
• Forminit account: sign up free at https://forminit.com

Setup Guide

Step 1: Get Your Form ID and Endpoint

1. Create a new form in Forminit.
2. Copy your Form ID and Form Endpoint.
3. Set authentication mode to Public.

‍

Step 2: Add the Forminit Script to Your Page

1. In Webflow, go to Pages.
2. Select your page.
3. Open Page Settings.
4. Scroll to Before </body> tag.
5. Paste the code below.
6. Replace YOUR-FORM-ID with your actual Form ID, for example va0igelxfw9.

‍

Paste the code below into your Webflow Page Settings.

<script src="https://forminit.com/sdk/v1/forminit.js"></script>

<script>
 const forminit = new Forminit();

 // Your Forminit Form ID from the Forminit dashboard
 const FORM_ID = 'YOUR-FORM-ID';

 // Your Webflow <form> element must have this ID
 const WEBFLOW_FORM_ID = 'contact-form';

 const form = document.getElementById(WEBFLOW_FORM_ID);

 if (!form) {
   console.warn(`Form not found: #${WEBFLOW_FORM_ID}`);
 } else {
   const formBlock = form.closest('.w-form') || document;

   const button =
     form.querySelector('input.w-button[type="submit"]') ||
     form.querySelector('button.w-button');

   const doneBlock = formBlock.querySelector('.w-form-done');
   const failBlock = formBlock.querySelector('.w-form-fail');

   const show = (el) => { if (el) el.style.display = 'block'; };
   const hide = (el) => { if (el) el.style.display = 'none'; };

   hide(doneBlock);
   hide(failBlock);

   const originalLabel = button
     ? (button.tagName === 'INPUT' ? button.value : button.textContent)
     : '';

   form.addEventListener('submit', async (event) => {
     event.preventDefault();

     hide(doneBlock);
     hide(failBlock);

     if (button) {
       button.disabled = true;

       if (button.tagName === 'INPUT') button.value = 'Sending...';
       else button.textContent = 'Sending...';
     }

     const formData = new FormData(form);
     const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

     if (button) {
       button.disabled = false;
       if (button.tagName === 'INPUT') button.value = originalLabel;
       else button.textContent = originalLabel;
     }

     if (error) {
       show(failBlock);
       return;
     }

     // Optional: Redirect to a thank-you page
     // You can configure redirectUrl in your Forminit form settings
     // if (redirectUrl) {
     //   window.location.href = redirectUrl;
     // }

     form.reset();
     form.style.display = 'none';
     show(doneBlock);
   });
 }
</script>


Step 3: Add a Form Block

1. Open the Add Elements panel. Keyboard shortcut: A.
2. Drag a Form Block onto your page.

Step 4: Set the Form ID

1. Select the <form> element inside your form block.
2. In the Element Settings panel, set the ID to contact-form.

This must match the ID in your script:

const WEBFLOW_FORM_ID = 'contact-form';


Step 5: Configure the Form Action

1. Select the form block.
2. Open Form Settings.
3. Under Send To, remove any existing webhooks or email notifications.
4. Add a Custom Action.
5. Paste your Forminit form endpoint.
6. Set method to POST.

‍

Step 6: Rename Input Fields

Select each input field and update the Name attribute to match Forminit’s field naming convention.

For submitter information: Sender Block

FieldName AttributeEmailfi-sender-emailFirst Namefi-sender-firstNameLast Namefi-sender-lastNamePhonefi-sender-phone

For other fields: Single Blocks

See all available form blocks: /docs/form-blocks/

‍

Step 7: Test Your Form

1. Publish your Webflow site.
2. Submit a test entry.
3. View the submission in your Forminit dashboard: https://app.forminit.com

For select fields, you’ll see analytics showing how often each option was chosen across all submissions.

‍

Adding File Uploads

Webflow’s native file upload requires a Business plan. With Forminit, file uploads work on any plan.

Add a File Input

1. Open the Add Elements panel.
2. Drag a Code Embed element into your form block.
3. Add one of the following code snippets.

Single file upload:

<input type="file" name="fi-file-resume" />


Multiple file upload:

<input type="file" name="fi-file-documents[]" multiple />


4. Save and publish your site.

‍

Redirecting After Submission

By default, the form displays a success message after submission. If you’d prefer to redirect users to a thank-you page or another URL:

1. In your Forminit dashboard, open your form settings and set your Redirect URL.
2. In your Webflow page script, find the commented redirect code and uncomment it:

if (redirectUrl) {
 window.location.href = redirectUrl;
}


The redirectUrl value comes from your Forminit form settings, so you can change the destination anytime without updating your Webflow code.

Troubleshooting

Form not submitting?

• Verify the form ID matches in both Webflow and your script.
• Check that authentication mode is set to Public in Forminit.
• Open browser developer tools to check for JavaScript errors.

Success or error messages not showing?

• Ensure your form block has the default .w-form-done and .w-form-fail elements.

File uploads not working?

• File inputs must use the fi-file-{name} naming pattern.
• For multiple files, add [] to the name and include the multiple attribute.

Next Steps

• Add spam protection with reCAPTCHA: /docs/recaptcha/
• Set up email notifications: /docs/email-notifications/
• Connect to Zapier or Make: /docs/zapier/