Form in Iframe
An iframe lets a form be used and its thank-you message published without leaving the page.
The site visitor stays right there on the page. No need for them to click the back button after using the form to return and continue reading your content.
To implement, you'll need two web pages with content that will fit into the iframe size of your choice. One of the pages is the form. The other is the thank-you page.
The iframe tag can be put on the page without scrollbars and it can have a seamless appearance.
The form in the iframe is submitted to the form handling software. The form handling software redirects the iframe content to the thank-you page, which is displayed in the iframe instead of the form.
To implement the system, first create the web page with the form and the thank-you page. Verify the form submits OK and that the thank-you page loads after the form is used.
Then, put it into the iframe.
Implementing the System
Determine the dimensions of the area on the web page where the form and thank-you page will be displayed, height and width in pixels.
Adjust the design of the form and thank-you pages so they fit into those dimensions.
Test the form to verify it works correctly and that the processing software redirects the browser to the thank-you page.
If you need form handling software, here are several, both free and paid:
When everything works as it should, make a note of the form page's URL. The URL will be used in the iframe tag.
The Iframe Tag
The iframe tag is a container where the form page is published and, after the form is used, where the thank-you page will be published.
Here's an iframe tag example. (Extra attributes are specified. Remove the ones you don't need.) Notes follow.
<iframe src="http://example.com/script.php" style="width:200px; height:300px; border:none; overflow:hidden;" seamless width="200" height="300" frameborder="0" scrolling="no"> </iframe>
Notes:
Replace the src value (colored purple) with the URL of the form page.
The attributes to include with your iframe tag depends on whether or not it's an HTML5 web page. (If your doctype tag is <!doctype html> then it's HTML5.)
If your iframe tag is on an HTML5 page, include the attributes colored blue and colored green. Specify the width and height as CSS rules in the style tag. Other CSS rules may be added to the style attribute, float:left; for example. (Optionally, the CSS may be moved to an external file.)
If your iframe tag is not on an HTML5 page, include the attributes colored red and colored green. Specify the width and height with the width and height attributes.
The scrolling="no" attribute requires special consideration. Although HTML5 pages are supposed to honor the overflow:hidden; CSS rule, some browsers won't. Therefore, specify scrolling="no" in iframe tags of both HTML5 and non-HTML5 pages.
Testing the Form in the Iframe
Give it a try.
If it works as it should, the form/thank-you page sequence functions the same in the iframe as it did on the stand-alone pages.
The form is submitted and the form handling software redirects the iframe content to the thank-you page. (When a browser is redirected by content in an iframe, only the content of the iframe changes with the redirection.)
Should you need the functionality, a related article, Auto-resize Iframe when Content Size Changes, describes how to change the iframe size when the thank-you page is loaded.
(This article first appeared in Possibilities ezine.)
Will Bontrager
