Want to embed a form on a non-WordPress website? With Formidable Forms, you can do it in three simple steps.
When customizing a WordPress website, you can easily add advanced features using intuitive tools. With a form builder plugin such as Formidable Forms, you can even embed online forms using the Block Editor. However, you might struggle to transfer this functionality to a non-WordPress website.
Fortunately, you can embed a form on any website using our plugin, whether it's a WordPress page or not. You'll just need to copy the API form script and paste it into your website's HTML. By doing this, you can avoid the hassle of creating a completely new contact or sign-up form on yet another Content Management System (CMS).
In this post, we'll discuss why you might want to embed a form on a website. Then, we'll show you how to use our API Webhooks add-on to embed forms on a non-WordPress site. Let's get started!
Why embed a form on a non-WordPress website?
When you have forms embedded in your website, you invite visitors to interact with your content in a specific way. The most common example is a contact form embed code. If you embed an email form in your website, it enables users to send personalized inquiries.
You can see contact forms on almost any website, but these aren't the only type you can create. A flexible form plugin will enable you to design online surveys, polls, and quizzes. With the right form template, you can even plan events and organize online registrations or create listings.
Additionally, if you're looking to add an interactive element to your website, forms can be an effective option. Rather than having inaccessible web pages, you can embed email forms to engage online users. This simple feature can help you capture new leads and collect feedback from repeat customers.
Simply put, visitors tend to prefer websites that allow them to get in touch via simple forms. Even better, you can boost user engagement and keep visitors coming back with effective form design.
How to embed a form on a non-WordPress website
Now that you know how forms can benefit you, let's discuss how to embed on a website. With our Formidable Forms plugin, creating these elements is simple. Using the drag-and-drop customizer and pre-designed templates, you can quickly design forms that meet your needs.
However, since it's a WordPress plugin, Formidable Forms can't directly embed a form on a non-WordPress website. Fortunately, it is possible to add a Formidable Form on a different site. By doing so, you can extend the features of this plugin to have forms embedded in any website.
Step 1: Sign up for Formidable Forms Pro
To get started, you'll need to access a Formidable Forms premium plan. Both the Business and Elite plans come with an API Webhooks add-on. This will enable you to send data to another website and ultimately embed a form.
To access it, go to your WordPress dashboard and install Formidable Forms Lite. Once you activate the plugin, you will see the Upgrade page.
If you've already purchased a business plan, click on Connect an Account and log in. Otherwise, select Get Formidable Now and choose from the list of plan upgrades.
After you purchase a plan, you'll be able to download and install Formidable Forms Pro. Finally, enter your license key in the General Settings to start using the advanced features.
Step 2: Insert a form on a WordPress website
Even if you want to embed a form on a non-WordPress website, you'll need to create a form in WordPress first. Using Formidable Forms, you can either use the pre-designed templates, or drag and drop certain features to customize a blank form as needed.
After you have created a form, it will be listed in your WordPress dashboard under Formidable → Forms. Here, you'll be able to preview, edit, or delete them.
On the above screen, click on the form you want to embed on your WordPress site. Then select Embed.
This will give you a list of options for where to place your form. You can click on Select existing page or Create new page to customize its placement on your WordPress site:
To embed the form on a non-WordPress website, choose Insert manually. Then copy the information under API Form Script.
Step 3: Paste the API form script in another website's HTML
Next, navigate to your non-WordPress website. Based on your CMS, there will be different ways to edit your website's HTML. Website builders such as Squarespace and Wix have their own steps for this process, so be sure to check your CMS's official documentation for instructions.
For this tutorial, we'll be using Wix. Similar to WordPress, you can add HTML code to blog posts with a block.
Then, paste the API form script that you copied earlier into your new HTML block. You'll also need to add this HTML code snippet:
<script src="https://yoursite.com/wordpress2/frm_embed/form-key-here"></script>
Simply copy and paste the code into your website's HTML. The example above will include the URL where the form is hosted as well as the form key.
When you're finished editing your contact form embed code, publish the page. Then visit the published version on your website to see if the form was imported properly.
Now you should have a functional form on both your WordPress website and a different CMS!
Embed a form conclusion
Web forms are essential tools for any business site. They can help capture leads and boost visitor engagement. With a form-building plugin such as Formidable Forms, you can easily embed a form anywhere on your WordPress website. Then, you can transfer this feature to a non-WordPress site using its API form script.
To review, here are the three steps you can follow to embed a form on any website:
- Sign up for Formidable Forms Pro.
- Insert a form on a WordPress website.
- Paste the API form script in the HTML of another website.
With our Formidable Forms plugin, you can create a variety of form types and embed them on any website. Check out our plans to access the API Webhooks add-on!
How To Change a WordPress Contact Form Style
How to Link to a WordPress Form [4 Different Ways!]
How to Link a Button to a Form in WordPress [A Simple Way!]
I like Formidable Forms, but you guys really need to learn how to communicate these steps to beginners. It's extremely frustrating that you all seem to have a habit of skipping through all the very obvious opportunities to be helpful and explain things that ANY newbie would have. "Here just paste this code and replace with your form key" -- Uh, what's a form key, and which parts of that need to be edited? There's at least 15 opportunities you had to actually EXPLAIN, but you didn't. I hope you learn from these mistakes and do better, because there's tons of videos and others on Youtube explaining your product far better than you do. Just an observation. Again, GREAT product, it's just the tutorials that need to be better thought out. Thank you