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:
- Choose a form template or start from scratch
- Configure form labels, checkboxes, or other input fields in the inline editor
- Click ‘Preview’ to check the form in the preview pop-up and
- Click ‘Save’ if you are ready with editing
- To embed the form, click the ‘Share‘ tab
- Copy the provided code snippet in the left sidebar
- Paste this code in your website HTML or CMS editor (such as WordPress or Shopify)
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.
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.
2. Setup and customize your form if needed, click ‘Save’ and click ‘Publish live’
3. To get the form code, in the top-left corner click the ‘Embed form on website’ link
4. In the form widget editor, just copy the provided code
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
2. Paste the embed code in the textarea of the block
3. Click ‘Update’
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.
2. Pick Banner, Floater, Button, or JS trigger and click ‘Save‘.
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
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.
4. Redirect link
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
Step 2: Click on the tab with the code icon and click on the ‘Copy‘ button
Step 3: Paste the code into the page HTML where you want the form to appear
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