Jump to the home page.

Feedback form and page tracking

Updated: Dec 22, 2004 

Quick overview

Set cookie on page. Button on page calls external JavaScript function that opens new page (feedback form) in pop-up window.

Submitting the form calls a PHP file which reads the cookie, reads the form input, puts both in an e-mail message to me (and tries to send one to you via the e-mail you type in), and loads another page in the same window.

To run PHP code, the Web server that your Web site uses needs to have PHP installed on it.

Cookie usage

In the HTML code (which is stretched out for easier reading) for this page (and most of the pages on this site), you'll see something like this near the top:

 1.  <script type="text/javascript" language="JavaScript">
 2.  // clear cookies
 3.  document.cookie = "locpath=nil"; document.cookie = "doctitle=nil";
 4.  // set harmless cookies; all I want to know is what page you were on to get to the 
     // feedback form your system should automatically delete these cookie files as soon as your 
     // browser program is closed
 5.  document.cookie = "locpath=" + document.location + ";domain=www.therotunda.net;path=/";
 6.  document.cookie = "doctitle=" + document.title + ";domain=www.therotunda.net;path=/";
 7.  </script>
 8.  <script type="text/javascript" language="JavaScript" src="../rotunda.js"></script>


Purpose of each line

  1. (and 7.) Define the section of code as Javascript.
  2. (and 4.) Informative comments.
  3. Create cookie for this site, if one doesn't exist. Set values to "nil". The values are page location (the URL) and page title (according to the TITLE tag).
  1. (and 6.) Set values for this page (location and title) in the cookie. Set the domain and path so that the cookie can be read by any page on this site. By default, cookies can only be read by the site (domain) that issues them.
  1. Make the JavaScript code in the external file rotunda.js available to the current page.

 

OK, still with me?

So, now there's a cookie on your system (it's harmless), that only stores this page's URL and title. Absolutely no marketing demographics.

Button: Send me e-mail

Near the bottom of this page, you should see a button. The code (stretched out for display) involved is this:

 1.  <form action="" class="SQZ">
 2.  <p class="sendme">Click this button to 
 3.  <input type="button" value="Send me e-mail" onClick="open_fb()" class="FDBK" 
     title="Click here to open the feedback form.">
 4.  ... or write me at: 
 5.  <span class="pop" 
 6.  title="There's no direct e-mail link here because this reduces the unwanted 
     advertising (SPAM) messages that I receive.">[e-mail address]</span>
 7.  </p>
 8.  </form>


Purpose of each line

  1. (and 8.) Define this code as a form. Do not have the form call an external file when it is "submitted" (there's no submit button anyway). Set the style to have zero space beneath.
  2. Set this span of code to have the style DESC (smaller text than normal). Line 7 has the closing tag.
  3. Show a button that says "Send me e-mail", with the style "FDBK" (which gives it the pretty colors and spacing), with "pop-up help text" that appears when you hold the cursor over the button, and do something called "open_fb" (which is in the external rotunda.js file) when the button is clicked.
  4. Put more text after the button.
  5. Set this span of code to have the style POP (zingy orange, boldface).
  6. The "title" setting gives this whole span more pop-up help text.

 

When you click the button, you call a function called "open_fb". Properly formatted, it looks like this:

function open_fb()
{	
    fb = "http://www.therotunda.net/feedback.html";
    args = "left=180,top=180,height=210,width=370";
    remote = open(fb,'',args); 
}

Nothing complex here. Set the filename, set window parameters, open new window.

The feedback form

In the code for the feedback page are these lines:

 1.  <body onLoad="theform.NAME.focus();">
 2.  <form name="theform" action="fbmail.php" method="post">
 3.  <input type="submit" value="Send the Message" name="sbmt" class="BTN">


Purpose of each line

  1. When the page is loaded, put the cursor in the first field of the form.
  2. Defines this section of a code as a form with method POST (meaning, pass along the form input internally, rather than in the address bar), and when the form is submitted, call a PHP file called FBMAIL.
  3. Make a submit button for the form with class BTN that says "Send the Message" rather than the generic "Submit".

 

The mail processor

In the code for the FBMAIL.PHP file are these lines:

 1.  $refpath = $HTTP_COOKIE_VARS["locpath"];
 2.  $refname = $HTTP_COOKIE_VARS["doctitle"];
 3.  $message="
 4.  File name: ".$refpath."
 5.  Page name: ".$refname."
 6.  Name: ".$NAME."
 7.  E-Mail: ".$EMAIL."
 8.  Comment: ".$COMMENT."
 9.  ";
10.  mail( [my e-mail] , "* Rotunda feedback *", $message, "From: visitor");
11.  mail ( $EMAIL, "Web feedback: therotunda.net", $message, "From: The_Rotunda");
12.  header( "Location: http://www.therotunda.net/fb_thx.html" );


Purpose of each line

  1. Assign variable "refpath" to result of reading the stored value for the cookie named "locpath". (Remember, this is the URL of the page you were on when you clicked to send me e-mail.)

  2. Do likewise for "refname" and "doctitle".
  3. (and 9.) Assign this section of code to the variable "message".
  4. (through 8.) This is the contents of "message". Text followed by variable. The first two lines are from the cookie. The next three are from the feedback form.
  1. Call the MAIL function with the arguments: address(es), subject line, message content, sender name. This takes the message, calls the mailer on the Web server, and sends it to me.
  2. Do the same as #12, but try to send it to the e-mail address that the user entered.
  3. When this is done, load the page "FB_THX" in the same window that called this file. This is the pop-up window with the feedback form.

 

“Thanks” page

The code is pretty simple. Notable parts include:

 1.  <meta name="robots" content="noindex, nofollow">
 2.  <body style="text-align: center">
 3.  <h2><br>Thanks for the note!</h2>
 4.  <p><br><b><a href="javascript:self.close()">close window</a>


Purpose of each line

  1. Set page so that search robots do not index the page or try to link from it. There's no reason for this page to be in someone's search results.
  2. Set all text in the body to be center-aligned.
  3. The appearance details aren't important. The generic H2 gets the job done with big, bold text.
  4. When the link is clicked, it closes the pop-up window.

 

Closing

Unlike some other pages in this section, I don't yet have any links to source material. I remember reading through a lot of pages for this one!

Was this article worthwhile? See the menu at upper right for more code used on this site - including how to do the menu. If you use these ideas on your site, I'd love to know.

 

My nifty email form stopped working ... but you can still send me email if you would like to.

Original page posted: February 17, 2003. Last tweaked: July 1, 2006.

The address for this page is [ www.therotunda.net/code/cookie-feedback-form.html ]
 
Nothing on my Web site is the official publication of anyone else. Unauthorized use for profit is not permitted.