Alternative content

Get Adobe Flash player

Web Design Articles

Other Related Links

PayPal Star Developer Award Winner 2005

Automatically Inserting the Current URL Into Forms


By William Bontrager

When you have the same form on many pages, and it needs to contain the current page's URL, then either the form needs to be edited for every page or an automated method is used to insert the current page's URL.

This article shows you an automated method.

With this system, the form can be pasted into pages without further editing. This can save so much work!

Examples of forms that might appear on many pages are "email this page," "recommend this page," "translate this page," and "tell us if something is wrong with this page."

This article will use as an example a "tell us if something is wrong with this page" form handled with the easy and free Master Feedback

The form in the example below was designed to fit within common widths of web page navigation areas. Modify the fields and style as you see fit.

Here is an example form before the edits.

<p>Something wrong with this page? Tell us!</p>
<form 
   method="POST" 
   action="/cgi-bin/MasterFeedback.cgi">
<input 
   type="hidden" 
   name="x_url" 
   value="http://example.com/thispage.html">
<input 
   type="hidden" 
   name="subject" 
   value="Something wrong!">
<input 
   type="hidden" 
   name="thankyou" 
   value="http://example.com/thankyou.html">
Your name:<br>
<input 
   style="font-family: monospace; font-size: 12px;" 
   type="text" 
   name="realname" 
   size="19">
<br>
Your email:<br>
<input 
   style="font-family: monospace; font-size: 12px;" 
   type="text" 
   name="email" 
   size="19">
<br>
What is wrong?<br>
<textarea 
   style="font-family: monospace; font-size: 12px;" 
   name="message" 
   rows="4" 
   cols="16" 
   wrap="soft">
</textarea>
<br>
<input 
   type="submit" 
   value="Send Message">
</form>

The URL in the hidden field name="x_url" is what we want to insert automatically.

And while we're at it, let's give non-JavaScript browsers a form field where they can type in the URL of the web page.

Replace the hidden field name="x_url" in the above form with this (the JavaScript variable document.URL contains the current web page's URL):

<script type="text/javascript" language="JavaScript"><!--
document.write('<input ');
document.write('   type="hidden" ');
document.write('   name="x_url" ');
document.write('   value="' + document.URL + '">');
//--></script>
<noscript> <!-- for non-JavaScript browsers -->
Copy the URL in your browser's address bar 
and paste it here.
<input 
   type="text" 
   name="x_url" 
   style="font-family: monospace; font-size: 12px;" 
   size="19">
<br>
</noscript>

If the user's browser is JavaScript-enabled, the page's URL will be inserted into the hidden field at the time the page is loaded into the browser.

If the user's browser is not so enabled, s/he will see an empty form field with a note to "Copy the URL in your browser's address bar and paste it here:"

For reference, here is the entire form, modified as indicated above.

<p>Something wrong with this page? Tell us!</p>
<form 
   method="POST" 
   action="/cgi-bin/MasterFeedback.cgi">
<script type="text/javascript" language="JavaScript"><!--
document.write('<input ');
document.write('   type="hidden" ');
document.write('   name="x_url" ');
document.write('   value="' + document.URL + '">');
//--></script>
<noscript> <!-- for non-JavaScript browsers -->
Copy the URL from your browser's address bar 
and paste it here.<br>
<input 
   type="text" 
   name="x_url" 
   style="font-family: monospace; font-size: 12px;" 
   size="19">
<br>
</noscript>
<input 
   type="hidden" 
   name="subject" 
   value="Something wrong!">
<input 
   type="hidden" 
   name="thankyou" 
   value="http://example.com/thankyou.html">
Your name:<br>
<input 
   style="font-family: monospace; font-size: 12px;" 
   type="text" 
   name="realname" 
   size="19">
<br>
Your email:<br>
<input 
   style="font-family: monospace; font-size: 12px;" 
   type="text" 
   name="email" 
   size="19">
<br>
What is wrong?<br>
<textarea 
   style="font-family: monospace; font-size: 12px;" 
   name="message" 
   rows="4" 
   cols="16" 
   wrap="soft">
</textarea>
<br>
<input 
   type="submit" 
   value="Send Message">
</form>

The above form can be used for other types of feedback, of course, it is simply an example. Other forms can be modified in a similar manner.


Will Bontrager

Copyright © Bontrager Connection, LLC