# Webflow x Getform Installation

# Installation

# Step 1 — Adding Form Component to Your Webflow Page

(If you already have a form, open it in the Designer and proceed to Step 2.) Open your website in the Webflow Designer and follow these steps:

  1. Click on Add Elements (+ sign).
  2. Unfold the Forms dropdown.
  3. Drag Form block onto the page.
drag and drop form block element to your webflow page

# Step 2 — Obtaining Getform Endpoint

  1. Navigate to getform.io.
  2. Click on Create form (+), select a timezone and enter a form name.
  3. Copy the Form ID located at the end of the form endpoint (getform.io/f/{form-ID}).
create and obtain your Getform Form ID

# Step 3 — Adding Getform.js to your Webflow page

  1. Click on Pages.
  2. Click on Edit Page Settings.
  3. Paste the below code and ensure you replace GETFORM_FORM_ID with your Getform Form ID.
  4. Select the form and click Element Settings.
  5. Insert your Getform endpoint into the "action" field, and set the method to POST.
  6. Add form as the ID for the form element
  7. Send a test submission and preview your submission on Getform.
<script type="text/javascript" src="https://getform.io/lib/v1/getform.js"></script>
<script>
	Getform.init("#form", { // Form selector
      formId: "GETFORM_FORM_ID", // Form ID from getform.io
      toggleOnSuccess: ".w-form-done",  // Element toggles on submit
      toggleOnError: ".w-form-fail",  // Element toggles on error
      onSuccess: function (form, event) { }, // Success callback
      onError: function (err) { } // Error callback
	});
</script>
Add getform.js before </body> Config your form block

# Email Notifications

You can receive notifications at your chosen email addresses for every submission received from your Webflow contact forms.

  1. Click on the Automation icon on the form detail page.
  2. Click Edit on the “Send an email notification” action
  3. Enter the email addresses where you wish to receive notifications for each form submission. Your email address is set as the default.
Webflow form sending email notification with Getform

# Adding reCAPTCHA or hCaptcha

We recommend that all our users include a CAPTCHA solution in their web forms. Currently, we support reCAPTCHA v3 and hCaptcha captcha solutions.

# Step 1 — Adding “captcha” site key

Add the following properties as options to the Getform.init() function:

<script type="text/javascript" src="https://getform.io/lib/v1/getform.js"></script>
<script>
 Getform.init("#form", { 
  formId: "GETFORM_FORM_ID",
  toggleOnSuccess: ".w-form-done", 
  toggleOnError: ".w-form-fail",
  captcha: {
    provider: "recaptchav3", // recaptchav3 or hcaptcha
    siteKey: "YOUR_SITE_KEY", // Sitekey
  }
});
</script>

# Step 2 — Adding “captcha” secret key

  1. Click on Automation icon on the form detail page.
  2. Click “Captcha” action
  3. Add your “reCAPTCHA v3” or “hCaptcha” secret key
  4. Click Save and also Save your Automation
Webflow contact form reCAPTCHA

# Sending confirmation emails (Autoresponse)

Autoresponse feature allows you to send customized autoresponse emails to your form submitters. Make sure your form has type="email" field to be able to receive the email address to send the autoresponse emails.

Sending autoresponse (confirmation) emails from Webflow form

# Form Redirections

To redirect the form submitter to another URL, set the "redirect" option.

<script type="text/javascript" src="https://getform.io/lib/v1/getform.js"></script>
<script>
 Getform.init("#form", { 
  formId: "GETFORM_FORM_ID", 
  toggleOnSuccess: ".w-form-done", 
  toggleOnError: ".w-form-fail", 
  redirect: "https://google.com", // Redirection URL
});
</script>

# Integrating Your Webflow Form with Zapier

Integrating your Getform form with Zapier lets you directly route form submissions to various apps like Google Sheets or Salesforce. Visit Zapier x Getform page for more information Zapier x Getform (opens new window)

# GDPR & Security & Data Storage Location

We keep your data safe. Getform uses Amazon Web Services (AWS) to host all of our applications and static resources.

Our application and data servers reside in the 🇪🇺 EU regions of AWS. AWS meets a variety of industry compliance standards such as SOC1, SOC2, SOC3, ISO 27001, ISO 27017 (cloud security), ISO 27018 (Cloud Privacy), PCI DSS v3.2 and HIPAA verified by a third party. For more information, please visit security page (opens new window).

← Simple HTML Setup →