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 Add a WordPress Contact Form Phone Number Field
7 Best Contact Form 7 Alternatives To Use Today!
How To Edit a Contact Form in WordPress [Two Easy Methods!]
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
Hey John,
Thank you for sharing this important feedback with us.
We definitely would love to improve how we communicate the steps. Would it be useful to include a link to the documentation pages where the terms are explained or would you rather have a more extensive explanation on the article itself?
Best,
To echo John, I share his frustration, and I'm very technically inclined. The add-on isn't even called API Webhooks add-on. It's called Formidable API, which, by the way, you can't even download from your account area, but instead only within the dashboard of the site you have Formidable Pro on.
Also, why does your "features pages," which performs better in search results, not link to documentation to help guide your users?
Your documentation is shallow, complicated, and messy. As good of a product Formidable is, you could make it that much better by improving your docs.
Hey Brandon,
I understand what you're saying, and I'll do my best to address each point you share.
- I totally get the wording used in this post: "API Webhooks add-on" instead of "Formidable API" can be confusing. I'll raise this feedback to our Growth team.
- I just tried downloading the Formidable API add-on from the Account area, and it worked for me. I am wondering if there is something related to your account that might be the issue here. Could you create a new ticket here: https://formidableformscom.bigscoots-staging.com/new-topic/ so we can help you further with this?
- Our goal is to provide world-class documentation, we would love if you could share some examples where we could further improve it. All feedback is welcome.
Best,
i am running into CORS error, how to deal with it?
Hey Martin,
Could you create a new ticket here: https://formidableformscom.bigscoots-staging.com/new-topic/ so we can help you further with this?
Hi Jonathan,
yes i could, but its a rather general question on how to deal with cors errors.
Its not uncommon to run in to security issues with content from mixed sources, and u do state that "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."
which may have been valid years ago, but Cross-Origin Resource Sharing (CORS) is widely used nowadays.
For me, ill find a way, but it may be addressed in this text
Hi Martin,
Thanks for reaching out!
Usually, a Cross-Origin Resource Sharing error is caused when you have some HTTP resource loaded on your HTTPS, for example: If an image is loaded like http://www.yourdomain.com/uploads/image.png, therefore it'll return a CORS error since your website has the HTTPS protocol.
My teammate asked to create a support topic where we can investigate your CORS on your website, but reaching out to your hosting company support could help!
We're happy to help.