A 'Reveal When Needed' Feedback Form

Sometimes, your questions result in an article. Like this one. Which is one reason we like to receive your questions and feasibility inquiries.

A friend provides a websites and blogs hosting service and was wondering about the feasibility of putting a link at the bottom of a articles which, when clicked, would reveal a feedback form.

The primary hurdle was to replace the form with the thank-you page, seamlessly, without a page reload. You'll see how it was solved. And without AJAX, too.

While AJAX is very good for some things, and it could have been used here, I decided against using it. The primary reason was that most of the code needed for an alternative method was already developed. Another reason was that volume of code would be significantly higher with AJAX than with the method decided upon:

• A div tag would be used to display the form when appropriate. Code to hide and reveal was already developed and could be a copy 'n paste from the "Quick 'N Easy Layer Show/Hide" blog post.

• An iframe tag would be used for the form and its thank-you page. The iframe tag is described at W3Schools.

• Code would be developed to dynamically change the iframe's size so the thank-you page can adjust for the amount of space it needs to present its message.

With the div/iframe tag method, pretty much any form processing CGI software could be used. We urge you to have a look at our own titles, especially Master Form V4 with auto-submission protection, an effective barrier to form spam.

Besides the software, three web pages are required for implementing this "reveal when needed" feedback form:

1. The web page that reveals the form. This is the page with a form in div and iframe tags. A link reveals the form, ready for use.

2. The form web page. This is the page that will be displayed within the iframe tag, once revealed.

3. The thank-you web page. This is the page that will be displayed within the iframe tag after the form has been submitted.

Let's address the three web pages, in order.

The Web Page that Reveals the Form

This page needs three components, in addition to the regular content the web page would have.

First: The Java Component

This JavaScript can be put in the head area of the web page or in the body area above or below where the form will be. If you have no other preference, put it above the form location to keep the three components more or less near each other.

<script type="text/javascript"><!--
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}

function HideContent(d) {
document.getElementById(d).style.display = "none";
}

function AdjustSize(d,w,h)
{
   document.getElementById(d).width = w;
   document.getElementById(d).height = h;
}
//--></script>

The ShowContent() function was copied verbatim from the "Quick 'N Easy Layer Show/Hide" blog post mentioned above. The function is used to reveal the contents of the div -- the iframe and feedback form.

The HideContent() function was also copied verbatim from the "Quick 'N Easy Layer Show/Hide" blog post. The function is used to hide the the link that reveals the contenst of the div.

The AdjustSize() function was developed for this implementation. It is optionally called from within the thank-you web page to adjust the size of the iframe if needed to accommodate the thank-you message.

Second: The Div/Iframe Tags Component

In the following HTML code, you'll see an iframe tag between opening and closing div tags. The attributes of each will be addressed after the code:

<div id="uniquedivid" style="display:none;">
<iframe 
   id="uniqueiframeid" 
   src="https://example.com/formpage.html" 
   marginwidth="0" 
   marginheight="0"
   width="300" 
   height="300" 
   frameborder="0">
</iframe>
</div>

In the opening div tag are two attributes:

• The id attribute provides the div tag with a unique id. The same id should not be assigned to any other HTML element on the web page.

• The style attribute gives the div a CSS rule of display:none. This hides the div and anything within it. (The converse is display:block.)

In the opening iframe tag are seven attributes:

• The id attribute provides the iframe tag with a unique id. The same id should not be assigned to any other HTML element on the web page.

• The src attribute contains the URL of the web page with the form. If you don't yet know what that URL will be, it can be changed after the form web page (addressed later in this article) has been uploaded.

• The marginwidth and marginheight attributes specify the left/right margins and the top/bottom margins, respectively. These would be margins between the edge of the iframe and its content. The numbers may be adjusted as appropriate for the style you prefer.

• The width and height attributes are used to specify the dimensions of the iframe, in pixels. The values of these attributes will undoubtedly need to be changed to fit the content of the form web page.

  The div's width is equal to the amount of horizontal space available. The div's height, on the other hand, automatically adjusts with the iframe height.

• The frameborder attribute specifies that the iframe shall have no visible border. It may help to make the frameborder equal "1" while adjusting the size of the iframe. The border would give you a visual while doing the adjustments.

  If your preferred style has a border around the iframe, make the frameborder attribute equal "1". The attribute can use only two values, "1" for a border and "0" for no border. I know of no way to adjust the border width with HTML.

  If the default border width is not appropriate, you might investigate to see if the width can be adjusted with CSS. Alternatively, the div might be given borders according to your specifications by adding the CSS rules to the style attribute.

Third: The "Reveal Form" Link Component

The "reveal form" link would be something like

<span id="uniquespanid">
<a href="javascript:ShowContent('uniquedivid');HideContent('uniquespanid')">
Click here to send us a note.
</a>
</span>

The id attribute provides the span tag with a unique id, so its contents can be hidden when the link is clicked. The same id should not be assigned to any other HTML element on the web page.

The name between the single quote marks (apostrophes) of the ShowContent() function call must be the same as the id of the div to be revealed. And the name between the single quote marks of the HideContent() function call must be the same as the id of the span to be hidden.

When the link is clicked, the div reveals the iframe, which contains the form web page, and the link in the span is hidden.

The Form Web Page

This web page contains the form that will be displayed within the iframe.

Create the form like you would if it was on a stand-alone web page. There are no special requirements other than what the form processing software or your style requirements might have.

Once the form is created and the web page uploaded, verify the src attribute of the iframe tag is correct. Then adjust the iframe's width and heigh attributes to fit the form.

The Thank-You Web Page

This web page contains the content to be shown to the form user after the form is submitted. It will be displayed within the iframe.

If the content of the thank-you page does not easily fit within the same dimensions as the form page did, the size of the iframe may be adjusted.

To adjust the size of the iframe, put this JavaScript into the head area of the thank-you page:

<script type="text/javascript"><!--
parent.window.AdjustSize("uniqueiframeid",250,100);
//--></script>

The name between the quotation marks must be the same as the id of the iframe.

The first number is the width of the iframe. The second number the height. Adjust the numbers as necessary.

When the JavaScript is in the head area of the thank-you web page, the iframe's size adjusts (for most latest browsers) either as the thank-you page is loading or immediately thereafter. It's automatic.

 
Those are the three web pages required for implementing this "reveal when needed" feedback form.

They work together with so little friction the site visitor may never realize it isn't all one smoothly humming machine. Actually that is a pretty good description of what it is, three web pages working together as one unit to deliver a smooth user experience.

Will Bontrager