How to Add Contact Form Widget to Webflow Website

Nowadays one can't imagine a website that wouldn’t give you an opportunity to submit your feedback. Various response forms, message or feedback forms and other tools, which help keep in touch with your audience, are essential. Shape any of this yourself without any coding!

Simple Contact Form for Your Webflow Site

If you need a comprehensive and functional contact form to receive maximum responses from your clients and boost performance of your site, then our widget is the ultimate option for you. Learn more about the widget on the widget page.

Our main features:

  • Premium design;
  • Responsive template;
  • Captcha protection included;
  • Popup and onpage options;
  • Two-minute installation.

Keep in touch with your visitors 24/7, receiving their feedback on requested email and get more leads for your business!

Video Guide

Steps of adding the widget

Installation of our widget is ultimately easy and intuitive; it will take you not more than three minutes. Follow all steps described below to create your widget.

Step 1. Generate your personal plugin

Shaping of the plugin

Follow the link (Live Editor) to create a plugin. Pick out the design and presentation type to shape the plugin that will fit your website in the best way.

Get the code of the plugin

The last step in setting up Elfsight app is to obtain the plugin html code.

Step 2.1: Add a full size contact form to a page

Pin your form to one of the pages.

Enter you WebFlow account

Sign in at WebFlow to start editing the site.

Choose the website

On the dashboard, choose the site where you want the plugin to be installed.

Add HTML element to the page

Find the right place for the plugin and drag the HTML element from the right-hand menu.

Insert plugin code

In the appeared window of HTML element editor, insert Contact Form script received on Elfsight Apps, and save the changes.

Publish the changes in the website

After all the steps are taken, press «Publish» button in the upper menu to apply the changes to the website.

Installation is complete!

Enter the page to see your new contact form.

Step 2.2: Add a popup contact form to follow visitor’s scroll

Popup form can be added to each and all pages of your website.

Enter the dashboard

Sign in and go to the setting of the required page.

Go to the «Project Settings»

Open the main menu and click on the «Project Settings».

Start code editing

Out of tabs on the upper panel, choose «Custom code». In «Footer code» field, insert the code which you received on Elfsight Apps website. Save and publish the changes.

Done! You have successfully installed the plugin

Visit your website to check the work of the form.
*Sometimes you need to clear the cache to see the updated version of the site.

Elfsight's Extensive Collection of Webflow Contact Form Templates

Explore our extensive collection of the best contact form templates and transform your Webflow website:


Popup Contact Form
Create a form to collect contact details in the pop-ups using the template for website.
Email Contact Form
Create a form for collecting contact details and emails using the template for website.
Sms Contact Form
Create a form to collect contact data and integrate SMS notifications using the template for website.
Sign Up Contact Form
Create a form to let users contact the website owner and sign up for newsletters using the template for website.
Quick Contact Form
Create a quick form to stay in touch with the audience using the template for website.
Paypal Contact Form
Create a form to gather contact detail and integrate the PayPal payment service using the template for website.
Horizontal Contact Form
Create a horizontal form to collect contact info using the template for website.
Footer Contact Form
Create a contact collecting form with a built-in footer feature using the template for website.
No Suitable Form Template?
Create your form with Elfsight AI by describing your requirements in plain language, or build your own form using our form builder.

Customizing the widget with Elfsight account

After the widget is ready, you can also adjust it the way you like. To do so, visit Elfsight apps website and start Live Editor. You are free to correct texts, change templates, or choose the most suitable display variant. All changes made in the Live Editor will be introduced on your resource immediately.

To see other effective Webflow widgets developed by Elfsight and set up them, go to your account.

Check unique Contact From free!

Free live editor for fast creation of widgets.