Let's get started with a Web Form!

  1. Open Notepad++
    1. Open your index.html file.
    2. Open your styles.css file.
    3. Click: New -> File
    4. Click: Save
    5. Name that file: form.html
    6. Click: Save
    7. Copy the Form Page Template (HTML) code (below).
    8. Paste that code into your form.html file.
    9. Change your page title, your Author name, and your page heading to something appropriate
    10. Change: pput-your-email-address-here to your email address
    11. Change: put-your-email-address-here to your email address.
    12. Change: put-your-subject-here to your subject line.
    13. Change: put-your-form-page-url-here to the URL of your formpage.
    14. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
    15. Copy the Form Page Styles (CSS) code (below)
    16. Paste that code into your styles.css file.
    17. Change some styles.
    18. In your index.html file
    19. Add a link to this page.
      Change: <li>Create a Form Page</li>
      to: <li><a href="form.html">Create a Form Page</a></li>
    20. Click: Save
    21. Name the file: form.html
    22. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    23. Click: Run
    24. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    25. View your web page
    26. Make any changes
    27. Save your changes

Form Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line -->
    <link href="includes/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <h2>My Form Page</h2>
    <form id="myForm" name="myForm" method="POST" action="https://jimgerland.com/jimMailer.php">
      <input id="to" name="to" type="hidden" value="put-your-email-address-here">
      <input id="subject" name="to" type="hidden" value="put-your-subject-here">
      <input id="source-url" name="to" type="hidden" value="put-your-form-page-url-here">
      <fieldset>
        <legend>put-legend-here</legend>
        <label for="firstName">put-label-here:</label>
         <input type="text" id="firstName" name="firstName" size="25"/><br/>
        <label for="lastame">put-label-here:</label>
        <input type="text" id="lastame" name="lastame" size="25"/><br/> 
        <input type="submit" id="submit" name="submit" value="OK Send My Data"/>
      </fieldset>
    </form>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Form Page Styles (CSS)

form {
  background-color: #CCC;
  width: 80%;
}
fieldset {
  background-color: #DDD;
} 
label {
  background-color: navy;
  color: white;
  padding: 1%;
}

Example