Form Exercise: Send Form data to YOU

To complete this assignment you will need to draw upon the homework lessons from freecodecamp.org that relate to form elements such as text fields and radio buttons. You will also need to download (and unzip) a php file named contact_me.php that will receive the output of your form and email it to you.   Here's how.

  1. To begin, download contact_me.php.zip unzip it, and move contact_me.php into your mysite folder as well.
    1. Open contact_me.php with Brackets and substitute your email address for my email address. FYI: Ideally, use an email address other than your UGA address because UGA mail can move very slowly with form data for some reason.
    2. Modify the email subject line as well.
    3. THESE ARE THE ONLY MODIFICATIONS YOU WILL MAKE TO contact_me.php. 
  2. Create a new html document named contact.html and save it into your mysite folder. Give contact.html a nice big greeting (within the <body> tags of course). Something like <h1>Contact Me </h1>
  3. Underneath the greeting, create a form that sends data via the post method to contact_me.php (as shown below).

    In our next few steps we are going to add text fields that request a visitor's first and last names, telephone, and email address. The names of the text fields that you create must match the $_post values that are set in contact_me.php on lines 37 - 43. Here is the $_post value for first_name for example:
    This may seem a little confusing, but when a user submits your form, contact_me.php will receive the information that they submit, process it and send you an email. The information must match for everything to work properly.

  4. Now add a text field that requests a user's first name.  Like this:
    Make sure that the text field is between the form tags! 
  5. Repeat the process for Last Name. Note the <br><br> tags that add line breaks between the fields.

  6. Now add email and telephone text fields, following the same model that you used for first name and last name. You can do this.
  7. Your form also needs A TEXT AREA <textarea> that requests user comments. Textarea fields are different from text fields. Here's how that should look.

  8. The last thing we need, other than a submit button, is a set of radio buttons that tracks user satisfaction on a scale from 1 to 5.

  9. Add a submit button:  <input type="submit"> underneath the radio buttons.
  10. Open your index.html file and create a link to contact.html. Now upload everything, index.html, contact.html, and contact_me.php to your server. Visit your website and test it out. If everything works properly, you should receive an email. Or I will if you forgot to change the mail_to address!

HELP!

If you are really stuck, here is a link to an image of the whole contact.html file that worked successfully for me. Use this as a last resort!

Print Friendly, PDF & Email