How to Create a Form in HTML That Can Be Submitted to an Email Address

Using basic tools--a text editor, browser, and email client--you can create a basic form that sends information you request to an email address. This method employs basic form elements and requires no special programs on a web server.
This may work fine in a controlled, internal business environment. However, remember that this method is of limited usefulness as Internet users shift from desktop mail clients to webmail services such as Gmail. Your visitors will also receive security warnings when trying to submit forms this way. There exist many free or paid services that do allow you to collect form information from visitors who choose to use webmail.

Steps

  1. Open a blank text editor session (e.g. Notepad under Windows) or if you have access to a web page editing tool, create a basic web page.

  2. Create a web page using the basic HTML skeleton:
    <html>
    <head>
    <title>Insert Your Title Here</title>
    </head>
    <body>
    </body>
    </html>
    
  3. Enter each of these tags on a separate line, except for the <title> and </title> tags, which can go on the same line. Web pages do not require this formatting, but it does make reading web documents easier for mortal humans.
  4. In between the <title> and </title> tags, insert the name of this page or project, e.g. the information you intend that the page requests.
  5. Hit {Enter} after the <body> tag.
  6. On the resulting line, type the following code, replacing the email address with the email address to which you wish the form sent:
    <form action="MAILTO:user@emailserver.ext" method="GET" enctype="text/plain">
    
  7. Hit {Enter} twice and type </form> just before the closing </html> tag.
  8. To start your form elements, decide whether you would like to use radio buttons (only one clickable response from a list of choices), checkboxes (multiple responses from a list), dropdown list boxes, or a text box.
  9. To create any question, type it in the web document under the <form> tag on its own line. For instance,
    <p> 1. What is your favorite vacation spot?</p>
    
    would display that question on the page.
  10. To create a radio button, type
    <input type="radio" name="1" value="The Scottish Highlands"> The Scottish Highlands
    
  11. The type tells the browser to display a radio button. The name of all related buttons must share a name. All radio buttons named "1" are mutually exclusive, that is, users can select only one from the group. The value will be passed to the email message, and the text after the <input...> tag gets displayed by the browser. Create more radio buttons for all related responses.
  12. Additional radio buttons have to have a different name.
  13. Checkboxes work in the same manner, but the code uses the type="checkbox" instead. E.g.
    <input type="checkbox" name="2" value="Antarctica" /> Where there be penguins.
    Checkboxes are not mutually exclusive, i.e. you may select every member of a checkbox group.
    
  14. A text box displays a box into which a user may type an open ended answer. The code looks like:
    <input type="text" name="3" size="100">
    
  15. The size may be adjusted to enlarge the box, and represents the number of characters that should fit in the box based on the base font of the web page.
  16. Type the following code to create a drop-down box from which users may select from a number of options:
    <select name="vacation_spots">
    <option value="Choose one:" selected="selected">Choose one:</option>
    <option value="Manunka Chunk, NJ">Manunka Chunk, NJ</option>
    <option value="Arthur's Seat">Arthur's Seat, Edinburgh, Scotland</option>
    <option value="Cicely, AK">Cicely, AK</option>
    </select>
    
  17. The selected="selected" attribute means that this option appears selected as the default value when the page loads.
  18. Type the following two lines at the bottom of the document just above the </form> tag to place buttons in your document that will send or reset the form:
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    
  19. Choose File, Save As in your text processor, give your document a filename, and add the extension .htm or .html to the end of this filename so that web browsers will recognize this document as a web page.
  20. Preview your page by opening it in a web browser. In Firefox, for example, go to File, Open File, or hit Ctrl-O or Command-O to open a new document.
  21. Browse to the file you created and hit OK to open the web form.
  22. Test by selecting some buttons and clicking on Send to send the form answers.
  23. When a user clicks Send, the user responses will appear in a new mail message with the name and value written in the body of the message.


Tips

  • To get back to your document to edit it in a text processor, remember that the text file has a different extension, and so will not appear if you list files of type *.txt. Choose to list All Files to see the files with an *.htm or *.html ending.
  • Multitask to make your work easier: open instances of your text processor, browser, and email programs and switch between them.

Warnings

  • Web pages are text documents saved with an *.htm or *.html ending. Not saving with this ending may confuse the broswer which may not render your page properly.
  • E-mail is not encrypted so this is not suitable for collecting confidential information (such as health or credit card information). Fortunately, many reputable services exist to help you collect such information.

Things You'll Need

  • A text editor, e.g. Notepad.
  • A web browser, such as Mozilla Firefox.
  • A computer configured with a working mail client for testing purposes.

 

How to Get Rid of the Blogger Navigation Bar

If you want to get rid of the navigation bar on your Blogger blog/s it's a very easy process. You don't need to be an expert coder or know very much about HTML.


Steps

  1. The only real reason to get rid of the navigation bar is if you want your blog to look like a blog that isn't hosted on a free service. If it doesn't matter to you then you
  2. Place the following code just before the </head> tag:
    • navbar1 {margin: 0;padding: 0;display: none;visibility: hidden;}
  3. If for some reason that doesn't work for you, try this code:
    • navbar-iframe { height:0px; visibility:hidden; display:none; }
      • The navigation bar will be hidden from view.

Tips

  • Removing the navigation bar is not a violation of Blogger TOS (terms of service). And never has been. So don't worry about removing it.

Warnings

  • You should however, as sometimes TOS do change from time to time, periodically (every 6 months or so) check to see if it becomes a violation.

Resize and optimize an image for the Web in Photoshop

    Resize and optimize an image for the Web using the Save for Web dialog box in Photoshop.
    When you save an image for the Web, you must balance maintaining image quality with minimizing file size and thus download time. The Save for Web dialog box lets you preview different optimization settings. Each preview includes file size and estimated download time. Thus, without altering the original image, you can see the results of various settings and choose the setting that best meets your needs.
  1. Open the image in Photoshop, and choose File > Save for Web.
  2. In the Save for Web dialog box, click the 4-Up tab. The dialog box displays the original image and three previews using different optimization settings.
  3. Click a preview to select it, and then choose a file format preset from the Preset pop-up menu to see the difference in quality. Repeat as needed for each preview. Choose presets based on the file format appropriate for your image:
    • JPEG for continuous tone images, such as photographs. JPEG compression preserves a broad range of color and subtle variations in brightness, but does not support transparency.
    • GIF for animations, solid-color images, and images with repetitive color, such as line art and logos. GIF supports transparency.
    • PNG-8 for solid-color images with sharp detail. Note that many older browsers do not support the PNG format.
    • PNG-24 for continuous tone images, such as photographs. PNG-24 preserves transparency, a broad range of color, and subtle variations in brightness. Note that many older browsers do not support the PNG format.
  4. Choose 200% from the zoom pop-up menu at the bottom left corner of the dialog box. Zooming in lets you examine the detail in each of the previews.
  5. If you want to compare other areas of the image, click the Hand tool (on the upper left side of the dialog box) and drag the image. All the previews move together.
  6. If you want to resize the image, click the Image size tab on the right side of the dialog box. Enter the desired dimensions for Width and Height. Click the Apply button in the tab. (When you save the file, Photoshop resizes only the Web-optimized version.)
  7. Select the preview that best meets your needs, and click Save.
  8. In the Save Optimized As dialog box, locate the folder in which you want to save the image, type a name for the file, and click Save.