Formidable Pro and Gravity Forms are among the best WordPress form builder out there that offers easy to use and a versatile drag and drop builder canvas. We can create highly advanced forms with them in a matter of minutes. Adding created form with these plugin to different pages and in widgets is a kid game across the WordPress. Formidable Pro adds a button above text editor with the help of which we can add not only forms, but also form views and graphs. We can also add custom options for a single form in different pages.
Formidable Pro provides a unique link for every form and if we open that link in browser, it loads form without any header or footer or any other extra component. This way you can add any created form to an external website. It means you can add generated form in an external website embedding it as an iframe. Forms are responsive and they adjust their size on resizing the iframe.
But there is an issue
A couple of years back this trick was working fine. But now, due to some security reasons, Formidable Pro doesn’t allow embedding of a form in an external website as an iframe.
How to overcome this issue and make the embedding to external website working
There is only and effective method to embed Formidable Pro form or form created with any other plugin (like Gravity Forms), you need to have a blank page template in your WordPress theme. Create a page with blank page template and add the form shortcode to that page.
What is a blank page template in WordPress
A blank page template doesn’t contain header,footer or sidebar and it consists of post area only. If you assign a blank page template for a page, it will come without header, footer, sidebar or any theme styling. This page displays what you add to your post area, either a shortcode, images or text.
Step by step tutorial how to add Formidable (or Gravity Forms) form to any html webpage outside WordPress
- Download the blank template file (download link)
- Upload this file to your WordPress theme folder (watch how to upload files to your WordPress)
- Now create a new page in your WordPress and assign the blank page template as shown in image below
- Also add the form shortcode to that page and publish the page
When you will open this page in browser, it will show only form covering the entire page
- Now add this page link to iframe as shown in the code below;
- Replace the red text with the exact url of the page with blank template and form.
- Add this iframe code to any external webpage and it will work perfectly
Another Way to add Formidable Forms create form to a other WordPress website or any none-WordPress website page
Thanks to Formidable Forms excellent knowledgebase and support, we found a readmade code snippet that lets us add any Formidable Pro created form to any HTML page
<script type=”text/javascript”>
jQuery(document).ready(function($){
var frmapi=$(‘.frmapi-form’);
if(frmapi.length){
for(var frmi=0,frmlen=frmapi.length;frmi<frmlen;frmi++){
frmapiGetData($(frmapi[frmi]));
}
}
});
function frmapiGetData(frmcont){
jQuery.ajax({
dataType:’json’,
url:frmcont.data(‘url’),
success:function(json){
frmcont.html(json.renderedHtml);
}
});
}
In the above given code replace red text with your site URL and blue text with your Formidable Forms’ Form ID
