Code Monkey home page Code Monkey logo

gravity-forms-iframe's Introduction

Gravity Forms Iframe Add-on

Embed a Gravity Form in an iframe on any site.

Contributors: Brady Vercher
License: GPL-2.0+

The typical process to embed a Gravity Form on a site where the plugin isn't installed requires:

  1. Developing a custom page template with necessary code to output form scripts and styles.
  2. Creating a new page in WordPress.
  3. Inserting the form shortcode in the new page.
  4. Manually writing an iframe tag with the page permalink and giving it a static height.

With the Gravity Forms Iframe add-on, just enable a setting to allow the form to be embedded and copy the code snippet. That's it. As a bonus, the iframe automatically resizes whenever the form height changes -- for instance, when fields are shown or hidden due to conditional logic.

Features

  • Selectively enable embedding for individual forms.
  • Auto-resizing iframes.
  • Override embed templates in a theme or child theme.
  • Override settings via the embed src query string.
  • Extends the Gravity Forms add-on API to seamlessly integrate with the WordPress and Gravity Forms interface.
  • Protocol-relative URLs for embedding on secure sites (both sites need SSL).

Settings

The form title and description can be hidden independent of regular form display by toggling a checkbox after enabling the embedding setting.

Form Iframe Settings Screenshot The form's iframe settings panel.

Overrides for Individual Iframes

If the title and description settings need to be changed per embed, they can be modified in the iframe src query string.

  • dt: Set to 1 to display the form title; 0 to hide.
  • dd: Set to 1 to display the form description; 0 to hide.

Example: gfembed/?f=1&dt=0&dd=0

Auto-resizing Script

If the auto-resizing functionality isn't needed for a particular form, adjust the iframe's height attribute to accomodate the form and don't include the <script> tag when copying the embed code. Leaving off the script tag will save an HTTP request.

Confirmation Screen

If you redirect users to another page upon submission and would like the iframe to automatically resize, include the following in the confirmation page: add_filter( 'gfiframe_print_resize_ping_script', '__return_true' );

Template Hierarchy

Templates can be added in a theme or child theme to override the plugin's template. Use the following template names:

  • gravity-forms-iframe-{$form_id}.php
  • gravity-forms-iframe.php

Installation

Upload

  1. Download the latest release from GitHub.
  2. Go to the Plugins → Add New screen in your WordPress admin panel and click the Upload tab at the top.
  3. Upload the zipped archive.
  4. Click the Activate Plugin link after installation completes.

Manual

  1. Download the latest release from GitHub.
  2. Unzip the archive.
  3. Copy the folder to /wp-content/plugins/.
  4. Go to the Plugins screen in your WordPress admin panel and click the Activate link under Gravity Forms Iframe.

Read the Codex for more information about installing plugins manually.

Git

Clone this repository in /wp-content/plugins/:

git clone [email protected]:bradyvercher/gravity-forms-iframe.git

Then go to the Plugins screen in your WordPress admin panel and click the Activate link under Gravity Forms Iframe.

Changelog

2.0.2

  • Updated embed code field in the admin panel to work with Gravity Forms 2.5+.
  • Passed an object instead of a string in the auto-resize message.
  • Changed the method for hiding the admin bar to improve reliability.
  • Added GitHub Update compatibility.

2.0.1

  • Made GravityFormsIframe_Addon::form_settings_fields() compatible with the parent class.

2.0.0

  • Moved to the Cedaro GitHub account.
  • Refactored the plugin structure.
  • Introduced a 'gfiframe_head' action in the template header.

1.0.3

  • Defined 'gravityforms_iframe' capability in the Add-on class to integrate with the Members plugin.

1.0.2

  • Fixed a long-standing bug that may have prevented scripts from loading in the iframe template.
  • Fixed deprecated notices in Gravity Forms 1.9+.

1.0.1

  • Deprecated the .php extension in the embed rewrite rule to prevent conflicts with WordPress Multisite.
  • Disabled the WordPress toolbar in iframes when forms are embedded on the host domain.
  • Added a POT file for translators.

1.0.0

  • Initial release.

gravity-forms-iframe's People

Contributors

bradyvercher avatar hubdotcom avatar robneu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gravity-forms-iframe's Issues

Iframe code is not working in wordpress post

I am creating a form and i want to use that form in my wordpress post.I have tried this plugin to get iframe of form to embed in my post but that iframe is not working.what is the issue here?

Iframe pulling other links from my website, not just the gravity form - lead pages

Hi,

I'm having a weird issues that i've been asking gravity forms and leadpages about and they can't figure it out.

I'm trying to add a gravity form to a leadpage. According to leadpages, this is doable:
https://support.leadpages.net/hc/en-us/articles/203521930-Can-I-Insert-A-Survey-Gravity-Forms-Or-Other-Into-A-Leadpages-Page-

But, when I paste IFrame into lead pages it shows the gravity form AND the header menu links of my website

See for example, these two test leadpages:

Notice how underneath the gravity form there is some hyperlinks for "home", "about us", etc... these are all the links from my top menu bar on my website (see associatepi.com)

The gravity form is SUPPOSED to look like it does on this page http://associatepi.com/cpcu-and-api-practice-exam-downloads/

When I reached out to lead pages they said:
"It looks like you currently have iFrame code for the full URL you provided. Because it's for the full site, that iFrame code includes the additional links like "Home", "About Us", ect. that are being pulled from the page and onto your form in Leadpages. You'll either need an iFrame code of just the form or to host the form on a plain website without those links and get the iFrame code for that."

Do you know how I can get an "iFrame code of just the form" per leadpages suggestion?

Or have you seen this issue before and do you have any suggestions on how to fix this?

Thanks!

This is the IFrame i'm using:
iframe src='//associatepi.com/gfembed/?f=1' width='100%' height='500' frameBorder='0' class='gfiframe'

Confirmation Page not sizing properly

When I use a custom confirmation page for my form, that resultant php page doesn't get sized accordingly. Anyway to adjust the settings of the plugin to accomodate that?

Thanks!

Resize not working

Hi,
lovely plugin, thank you for sharing.
However, I can't seem to get the frame resizing to work.
The external site I'm embedding the form is not a WordPress site. I have a clean page with no layout, no CSS, no scripts and the iFrame stays at 500px (the height specified in the code).
Any ideas why?
Thanks
Daniel

Currency problem in total

I am using "Gravity Forms Multi Currency" plugin and it works fine, even in a classical frame.

But when using 'gravity-forms-iframe' plugin, currencies along the form are correct but the currency of the total field is the one coming from the general gravity settings, as you can see for example on the link below (the form is in € but the total is shown in £ (it should be in € too) : https://shopnbook.com/test-fin/
Any idea to correct that please to use this nearly 5* plugin? :-)
Thanks.

Not working with Members plugin

I've got this plugin working great on 2 sites, but on another site I have the members plugin installed, and I cannot access the Settings page for this. When I de-activate the Members plugin, I can access the page.

It appears that Gravity Forms itself has some code in the "webapi.php" file that attempts to solve this. Not sure if your plugin needs to do anything to make use of what's in Gravity Forms or if Gravity forms hasn't quite updated their GFWebAPI class properly.

Anyway, thought I'd check in with ya'll in case you know anything.

causing gravityformsapi 404 in Wordpress 4.6.1

After a wordpress update to Wordpress 4.6.1, the gravity forms api is always getting a 404 if this plugin is enabled. If we disable this plugin, the gravityformsapi works as normal.

Fields hidden beneath keyboard on iOS Safari (not scrolling correctly)

Hi,

I'm still greatly appreciating this plugin! I do have an issue I wonder if can be improved?

When viewing a form using the plugin on iOS in Safari, the page is not scrolling to the focused field when hitting 'next' on the mobile keyboard. Rather the cursor advances to the next field, but it is hidden beneath the keyboard.
I do NOT have the same issue when using Chrome on iOS, however I have a large amount of users on Safari :( .

I did check, and a regular Gravity form on my site inside of Wordpress (no iframe) does NOT have the same problem, it focuses correctly on each field.

Any ideas for me?
The development page I'm working on right now is https://emethgym.com/classes%20copy.html

Improper values

The add-on is absolutely great. There is a small bug however.
When the Gravity Form is opened inside a pop-up iframe, the addon provides proper {embed_url} values but improper {embed_post:ID} and {embed_post:post_title} values.

In my case the {embed_post:ID} is equal to the ID of the latest blog post nomatter where the iframe form was filled from...

Thank you.

iframe not working with rtl

Hi @bradyvercher,
it seems that when form is in iframe the rtl not working.
if i include the form in the page the form work well with rtl. but in iframe the rtl not working.
how can i fix this?

Thanks

Disable Back to Top

How can I disable the "Back to Top" link at the bottom of the embedded form? Or make it work within the embedded form?

Right now it links to the outer-wrap of the actual form, not the page, and clicking it does nothing (EX: /gfembed/?f=123#outer-wrap )

screen shot 2017-07-26 at 2 24 19 pm

error include in wp-admin or sub domain in mutisite

Hi,
i put the iframe in the wp-admin dashboard widget but the form don't be shown.
the same error in the front end.
i see the error is:
Uncaught ReferenceError: jQuery is not defined /gfembed/?f=1:39
Uncaught ReferenceError: jQuery is not defined /gfembed/?f=1:52

can you fix this?

Thanks

Blank draft post created on form submit

I seem to be getting a draft post (ie post-type: 'post') being created when a form that has been embedded using the iframe code from this plugin is submitted.

  • Have deactivated all other plugins apart from Gravity Forms and Gravity Forms Iframe Add-on.
  • Theme is set back to Twentyfifteen (latest version).
  • Wordpress version is 4.7.2 (latest version).
  • Plugin version is 2.0.1 (latest version).

Any suggestions on what else may be causing this?

Edit: On further investigation, the issue appears to be caused by the "Custom Field" type (under Post Fields) being present in the form.

Removing scroll bar from gravity form Iframe

Hi,
Could you help me figure out how to modify the IFrame to display without a scroll bar?
See this page: https://opt-insignup.leadpages.co/facebook-ad-practice-exam/

Notice how the gravity form on the right side of the page has a scroll bar? This happens whether I use this Iframe on a leadpage or on a regular HTML page. I can't figure out how to make the iframe work without using this scroll bar. I'd like it to work similar to this page http://associatepi.com/cpcu-and-api-practice-exam-downloads/

See how this page shows the entire gravity form and there's no need to scroll down?

I reached out to leadpages and they said:
"The change you're trying to make is specific to the HTML code that is provided. I would reach out to Gravity Forms and see if they can provide a version of that code that doesn't included the scrolling function."

This is the Iframe i'm using:

<iframe src="//associatepi.com/gfembed/?f=8" width="100%" height="500" frameBorder="0" class="gfiframe"></iframe> <script src="//associatepi.com/wp-content/plugins/gravity-forms-iframe-master/assets/scripts/gfembed.min.js" type="text/javascript"></script>

Could you help me figure out how to use the gravity form without a scroll bar?

Thanks!

embed a form with paypal plugin

I install gravity forms with paypal standard addons. I make a form with paypal payment. I installa Gravity Forms Iframe Add-On and the paypal forms doesn't work in a site where I embeded. Solutions?
THANKS

Alternative method

Hey there,

I've recently had to try do this for one of my clients and tried a few methods and eventually got it working.

During the process, after talking with the support team, they pointed me to your plugin which I held as a fall back if I couldn't get what I was doing working.

I was wondering if you could have a look at what I have done, and if you can see why I should instead use the iframe method this plugin uses as my PHP skills aren't great!

I used the switch_to_blog function in my method like so:

<?php
global $blog_id;
$current_blog_id = $blog_id; ?>
<?php if ($blog_id == '1') { ?>

   <?php echo do_shortcode('[gravityform id="16" name="Contact a Distributor" ajax="true"]'); ?>
           
<?php } elseif ($blog_id == '2') {?>
   <?php switch_to_blog(1); ?>

       <?php echo do_shortcode('[gravityform id="17" name="Contact a Distributor" ajax="true"]'); ?>

   <?php restore_current_blog(); ?>
<?php } elseif ($blog_id == '4') {?>
   <?php switch_to_blog(1); ?>

       <?php echo do_shortcode('[gravityform id="18" name="Contact a Distributor" ajax="true"]'); ?>
       
   <?php restore_current_blog(); ?>
<?php } ?>

This is on all 3 of my sub-sites, and basically switches to blog 1, which is where ALL the forms exist to display the form.

This worked but wouldn't allow the submissions to go through, which I solved by using this function:

// Custom gravity post url
add_filter("gform_form_tag", "form_tag", 10, 2);
function form_tag($form_tag, $form) {
    // If the current blog ID is equal to the one that the forms exists on, and the current form ID is that of a form that exists on the blog with the forms
    if( get_current_blog_id() == 1 && ($form["id"] == 17 || $form["id"] == 18)) {
        // Replace the action URL with the base url of the subsite the forms actually are on (in this case the base url)
        $form_tag = preg_replace("|action='(.*?)'|", "action='/'", $form_tag);
    }

    return $form_tag;
}

This just gets the post action url and sets it to the one the forms actually exist on, meaning the data gets posted to the right place. (for anyone wanting to use this, make sure you set the current blog id = to the blog the forms actually exist on and the form ID's to the forms that sit on the sub-sites and the action replacement to the base URL of the sub-site the forms exist on.

Thanks, Harry.

Css External Site

Hello

Is there way to overide the hosting website form and adopt the website css where I put the iframe forms?

thank you

Getting URL of iframe page

Is there any way to pass the url of the iframe page in the body of gravity form? We usually do this with {embed_url} along with {ip} - ip works obviously, but not the url embed - It shows the url of the site hosting the gravity form - not the site with the iframe code.

gform_after_submission not firing

I have a plugin that submit the form data to a remote db afther the 'gform_after_submission' action is called. It seems to fire on forms that is on the wordpress blog, but does not for forms that are iframed

Does this work on other HTML website?

Thanks for the addon.

When I used the iframe on an html site, it showed as "Embedding is disabled for this form" on that
particular page.

Am I doing anything wrong or do not support for html site. Please guide.

Plugin Settings Not Being Saved

When I go to the settings for the add-on, it seems not to be saving the settings information. See Screenshots, after updating settings, the activate checkbox clears, and the iframe embed code does not work.

I have a fairly simple single site, Roots theme, with only a few plugins activated. I am running Wordpress 4.0. It does not seem to be saving the info in the form_meta table either. Please advise. Thank you.

1

2

getting 404 for //localhost/wordpress/gfembed/?f=2

Hi,

I edited the form settings after installing this plugin. I then enabled the embedding of this form in iFrame. I got the below script tag. When I try to load the page it gives me 404 error. Can you please fix the issue?

<iframe src="//localhost/wordpress/gfembed/?f=2" width="100%" height="500" frameBorder="0" class="gfiframe"></iframe> <script src="//localhost/wordpress/wp-content/plugins/gravity-forms-iframe-master/assets/scripts/gfembed.min.js" type="text/javascript"></script>

File Uploads

First, awesome plugin. But when I embedded a form, I can't seem to get the file upload field to work. Am I doing something wrong?

Disable the admin bar by default

It's possible for the admin bar to display in an embedded iframe if a user is logged in to the site where the embed exists. It's trivial to filter this on the site where the embed is set up, but maybe that should just be the default?

No resize on Form submit with validation error(s).

First thanks for this plugin.

I have some crazy long forms. When people fill it out and forget an important field, the form will give them a validation error message on Submit. The problem is, they don't see the message. It is at the top of the form and they are way down at the bottom. The form does not shrink back and does not scroll up to the error message. They think everything is okay and leave the page. But in reality they have to fix the errors and resubmit. They don't know there are errors and leave the page with an un-submitted form.

What can I do?

Add CSS to iframe

I would like to adjust the styles in the iframe content (in my case Gravity Forms using WordPress). Is there a way to add to the CSS or add inline styles to the iframe content?

iframe gravity forms have disappeared

I've used the Iframe plug in to embed a form in another site I manage. Someone filled int he form last night, so it was working then, but this morning, it has disappeared.

I added a field to the form this morning, I don't know if that might have made a difference, or if it had something to do with the recent Gravity Forms update.

This is the link to the page: http://www.prophlebotomytraining.co.uk/course-application-form/

There should be a form, but instead there is a big blank space. the code is still in the original page, so I can't think of any explanation for this. Any help is much appreciated.

Error form_display.php on line 2250

Hi Brady,
Your plugin worked like a charm embedding a GravityForm into an iframe on my site at http://www.isoho.org/. But, an error now appears in the iframe at the top of the form, "Warning: Invalid argument supplied for foreach() in /home/mcwr2015/public_html/wp-content/plugins/gravityforms/form_display.php on line 2250".

There is no error/warning when using the same form on a regular page (NOT embedded in an iframe). See http://www.isoho.org/nominationform/.

Rob Harrell at gravityforms was unable to duplicate the issue on his server. He suggested that I contact you to see if you have some suggestions to address this problem.

Gravity Forms was just updated to Version 1.9.14 and WordPress is running on the latest Version 4.3.1.

Can you help? Thank you! Janet

iframe settings not showing up

I have up to date wordpress 4.9.1 and gravityforms 2.2.5. Does this plugin work with that combination? Are there any known conflicts with other gravityform addons or wordpress plugins?
When following your installation instructions on the readme it appears to install correctly but the iframe form settings link does not show up on the form settings page as it seems it should based on your screenshot.

I'd be grateful for any insight and guidance as your plugin would help me alot at this particular moment. :) Thanks!

ps - I think the link to the plugin zip is incorrect in the readme. It links to your old repo at https://github.com/bradyvercher/gravity-forms-iframe/archive/master.zip

I tried that zip, the master zip here in this repo and the development zip here. None of them appear to work for me.

PHP Fatal error

PHP Fatal error: Call to protected method GFAddOn::get_form_settings() from context 'GravityFormsIframe_Plugin' in .../wp-content/plugins/gravity-forms-iframe/classes/Plugin.php on line 82

Am I missing something ...

Gravity Forms 2.0

This is a great add on, but updating to Gravity Forms 2.0 seems to conflict with the plugin. After updating to GF 2.0 I received this error "Fatal error: Access level to GFIframe_Addon::scripts() must be public in /wp-content/plugins/gravity-forms-iframe-master/includes/class-gfiframe-addon.php on line 183". Any chance there will be an update to work with GF 2.0?

Wordpress Multisite breaks redirect

I've had your plugin working as expected until I enabled Multisite.

I'm now getting
The requested URL /gfembed.php was not found on this server.

Any suggestions on how to fix this?

Thanks

Submit Form Using AJAX

Maybe I'm not looking in the right spot, but I'm trying to submit the form using AJAX, and cannot seem to accomplish this. I see <?php GFFormDisplay::print_form_scripts( $form, false ); // ajax = false ?> in the template file I have in my child theme, and have tried changing false to true, but that still does not submit the form using AJAX.

What am I doing wrong here?

Warning: Invalid argument supplied

hi i have a new issue with the gravity form iframe plugin that i just saw today. i have checked the error with gravity forms and they told me that the error is coming from the iframe plugin. the following error appears:

Warning: Invalid argument supplied for foreach() in /home/olygenco/public_html/member/wp-content/plugins/gravityforms/form_display.php on line 2250

the error appears in the url:

http://bigdataworldshow.com/uae2015/form/

any solution for this?

thanks!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.