The Linux and Unix Menagerie: Collecting Emails On Your Site Maintenance Page

Note - Click on the above for the full size example of the page today's HTML script will create!

Hey There,

I thought we'd start the week off and take a break from Linux and Unix Perl and Shell script porting to take a look at something a lot of admins have to deal with routinely.

If you are in any way responsible for your company's website maintenance and/or design, you may have been asked to set up some sort of a solution for handling maintenance, or downtime, situations that keeps the customer in the loop.

The simplest way to do this, is to create and HTML landing page with a form to collect email addresses. This is relatively simple to do (although hard to post correctly on blogspot, as you can see in our previous post on problems with posting Perl, Shell and other code to blogspot. Unless I make a huge mistake or two, the ampersand symbols in the code below are there on purpose and the converted ampersands are showing up as HTML tag boundaries ;)

The next step, which we'll look at tomorrow, is to create the Perl action script that your landing page will redirect to when a customer enters his or her email and submits it.

For today, enjoy this simple front-page. I created it with expansion in mind, hence the tabular structure (Good for filling with logos and custom spacer images, etc) and it should be relatively easy to modify.

Enjoy :)

This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License

<html>
<head>
<title>XYZ - TEMPORARY SITE MAINTENANCE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
</head>
<body bgcolor="003366">
<!-- 2008 - Mike Golvach - eggi@comcast.net -->
<!-- Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
   <td rowspan="2" height="47" width="15%">
<p>&nbsp;</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
    <td width="5%">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td width="5%">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td width="5%">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td>&nbsp;
        </tr>
        <tr>
          <td width="5%">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td>&nbsp;</td>
        <tr>
          <td width="5%">&nbsp; </td>
          <td width="5%">&nbsp;</td>
          <td>&nbsp; </td>
        </tr>
      </table>
 <td width="1%" height="51" >&nbsp;</td>
 <td width="79%" height="51">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td width="2%">&nbsp;</td>
          <td width="98%">
            <table border="0" cellspacing="0" cellpadding="0" width="545">
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
</td>
   </tr>
  <td bgcolor="#FFFFFF" width="2%">&nbsp;</td>
          <td width="97%" bgcolor="#FFFFFF" valign=bottom>&nbsp;</td>
   </tr>
   <tr>
      <td bgcolor="#FFFFFF" width="2%">&nbsp;</td>
      <td width="97%" bgcolor="#FFFFFF" height="22" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="92%" valign="top" height="1">&nbsp;</td>
        <td width="8%" height="1">&nbsp;</td>
    </tr>
         <tr>
                <td valign="top">
<p>We regret that our site is down for temporary maintenance. As soon as our work is complete the site will be available immediately. We apologize for the inconvenience!</p>
<p>Please enter your email address and we will contact you as soon as our site becomes available!</p><p>&nbsp;</p>
<form ACTION="http://xyz.com/cgi-bin/notify.cgi" METHOD="POST">
<table border="0" width="100%">
<tr>
<td align="right" width="30%"><font size="2" FACE="arial, helvetica, geneva"><b>E-mail Address:</b></font><br><font size="1" FACE="arial, helvetica, geneva">(e.g. bobby.joe@host.com)</font></td>
<td align="left" width="40%">&nbsp;<input NAME="email" TYPE="TEXT" SIZE="30"></td>
<td width="30%" valign="middle" align="left"><font FACE="arial, helvetica, geneva" SIZE="2"><input NAME="name1" TYPE="submit" VALUE="Notify Me When The Site Is Back!"></font></td>
</tr>
</table>
</form>
</td>
            <td width="13%">&nbsp;</td>
         </tr>
    <tr>
        <td width="92%" valign="top" height="1">&nbsp;</td>
        <td width="8%" height="1">&nbsp;</td>
    </tr>
      </table>
      </td>
   </tr>
   <tr>
      <td bgcolor="#FFFFFF" width="2%">&nbsp;</td>
      <td width="97%" bgcolor="#FFFFFF" height="22" valign="top" align="center">&nbsp;</td>
   </tr>
   <tr>
      <td bgcolor="#FFFFFF" width="2%">&nbsp;</td>
      <td width="97%" bgcolor="#FFFFFF" height="22">&nbsp;</td>
   </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>