How to Embed Form on Your Website

Simple steps to embed a form on any website within seconds. A javascript code that is responsive and simple to copy/paste. No coding.

Embedded forms are one of the most effective and easy methods for collecting data. And embedding the code on your website shouldn’t require calling a tech guy to do it. 

We’ve built EmbedForms as a forms builder for everybody that is free to use and has all options required to build and embed all your web forms.

So, If you’re looking for a quick and easy way to do this right now, by yourself, here are the steps.

First, create a free EmbedForms account, and follow these steps:

  1. Choose a form template or start from scratch
  2. Configure form labels, checkboxes, or other input fields in the inline editor 
  3. Click ‘Preview’ to check the form in the preview pop-up and
  4. Click ‘Save’ if you are ready with editing
  5. To embed the form, click the ‘Share‘ tab
  6. Copy the provided code snippet in the left sidebar
  7. Paste this code in your website HTML or CMS editor (such as WordPress or Shopify)

That’s it. 

Here is how the form will look like on your website:

Please, note we designed EmbedForms with the embedding functionality in mind, so you will get a high loading speed, responsive designs, and embeddable code that is simple as one copy/paste.

That being said, you won’t be needing any HTML, CSS, or advanced JavaScript and styling code knowledge to implement EmbedForms on your website.

Bellow, you will find the entire tutorial with screenshots on how to create and embed any form on any website:

Steps to embed form on a web page

Here is how to start, create a form and get an embeddable code to display the form on your website:

1. In the welcome popup, choose a form template or start from scratch

You can preview this template or go back and choose another form in the form templates library.

forms templates library

2. Setup and customize your form if needed, click ‘Save’ and click ‘Publish live’

publish form live
get code to embed form on your website

4. In the form widget editor, just copy the provided code

embed code for form on. website

4. To embed the form just paste the code into the body section of your website where you want to appear

If you use WordPress check the instructions below. For other CMS or eCommerce platforms feel free to reach out to our support team for additional help. You will not need any integrations, you definitely embed your code into any other web builder by using the same code provided in the EmbedForms platform.

The HTML code of the form can be embedded pretty much anywhere on your website. The key part is that they should be visible to everyone and presented at the right time. For instance, business owners usually ask for an opinion after a customer had some interaction with their business and the impressions are still fresh when it comes to feedback forms

This means that if you are conducting a post-purchase survey on your e-commerce website, the best place to embed would be the thank you page, and it should be displayed a few seconds after the purchase is completed. 

For more details on how to create embedded form check Forms Setup Guide

Embed form in WordPress

Note: EmbedForms works for any WordPress website and WordPress page, and there is no need for installing additional plugins or widgets that may slow down your website. The steps apply to every form, whether it is a feedback form, contact form, sign-up form, registration form, or survey

For creating an embedded form for WordPress you don’t need to install any WordPress plugin. Once you are ready to paste the code into your page or post, just follow these steps.

First, log in to your WordPress site and open the page where you will need to embed the form. 

1. Click the + icon in the editor and choose HTML block

insert HTML block in WordPress post

2. Paste the embed code in the textarea of the block

embed form code in wordpress

3. Click ‘Update’

And that’s it. This code works for any platform that supports JavaScript or iFrame embedding.

Embed Form Widgets

If you need to customize the way the forms appear on your website, you can use Forms Widgets

Instead of just embedding the forms inline, EmbedForms provides a few different types of widgets that will transform your form into interactive web widgets. 

You can choose to show Banner, Floater, or Button that, when clicked, will open the form. 

These widgets are designed to save space, load fast and help you showcase the forms in prominent positions on your website so you can increase their response rates. 

To create a form widget, 

1. Go to Widgets, and open the form widget you want to appear differently on your website. If you don’t have a widget, click Create widget to create one.

Step 1 to create website form widget

2. Pick Banner, Floater, Button, or JS trigger and click ‘Save‘.

choose forms widgets

3. Finally, copy/paste the top-right code into the page where you want the widget to appear. 

That’s it. Now you can easily embed any form on your website in different formats and collect more data from your web visitors.

Do more with EmbedForms

surveys and forms builder

EmbedForms is a complete forms builder with advanced form building options. All forms are responsive and fit perfectly to mobile devices. Also, it has a Privacy Policy option so users can comply with GDPR requirements.

In the following text, you can find more options that will help you to embed the best web forms:

1. Customization options

When you open a specific form page, you can use the editor to choose different form fields like radio buttons, paragraphs, drop-down menus, rating, opinion scales, etc., when you want to create a completely new form. Also, you can use other formatting options, such as changing the entire theme, changing the header background image, uploading your own logo, etc.

2. Email notifications 

To turn on the email reminder, go to general settings and click on email notifications and you will receive an email with the link to the latest form response.

3. Thank you message

Add your thank you message by navigating on the general settings and writing down your thank you note. 

When a user clicks the submit button after filling in the form, there is an option to add a redirect link that will navigate your customers to a specific landing page by adding a link in the field for redirect after submit.

5. Responses Share & Export option

Export all form submissions in Excel, Google Sheets, or any other spreadsheet app. Plus, you can use the ‘Share’ option that will allow you to share the respondents with other team members so they can view the responses collected from a specific form.

6. Create and embed a popup-form 

Embedding forms is simple but embedding forms in different viewing formats should be simple too. So if you want to embed a popup-form EmbedForms has the option for you. It is a type of form widget that has the functionality to show your form in a popup.

You can also explore other embed options such as popover, button, floater, and similar. 

Bonus: Embed Google forms 

Using Google Forms, the form’s embedding is very similar to embedding forms created with EmbedForms or any other web forms builder.  

Here are the steps how to embed a Google form: 

Step 1: Click on the top-right ‘Share’ option

steps to embed google form

Step 2: Click on the tab with the code icon and click on the ‘Copy‘ button

copy Google Forms code

Step 3: Paste the code into the page HTML where you want the form to appear

That’s it.

Wrap up 

Embedding a web form no longer requires advanced knowledge in code. The technical creation of the forms and the construction of the questions are now drastically eased by the automation of online form builders. 

With EmbedForms, All you have to do is have a clear goal of what you want to learn about your customer, choose the suitable template, and copy-paste the code on your website.

Sign up now and get your forever free interative forms builder

Try EmbedForms and embed engaging web forms on your website, in seconds.

Forever free · Easy setup

embed forms widget