AIM 2

Assignment 4: Tant= alizing Form

Due da= tes:

Week 11 (4/16) HTML5 form faceplate

Week 12 (4/23) PHP processing<= /b>

<= /span>

Design a form that would be useful to you in gathering information and responses from either your personal project participants, o= r from your design team target audience.

Everyone hates forms, so your form will need to be cra= fted in a way that will compel users to expend some of their precious time and energy.

Technologies:

The form will make use of HTML5 inputs, with PHP scrip= ting on the backend which will make use of the mail() function to send you the participant submissions. The form will also need to provide feedback as to whether or not the submission process was successful.

You can use the HTML5 Basic Template for this assignme= nt, unless you prefer to develop this as a responsive form.

Form faceplate:

You can consult the following on the use of HTML form inputs:

http://www.w3schools.com/tags/tag_form.asp

http://www.w3schools.com/tags/att_input_type.asp

You can also look at my demo for an example:

http://ecbrown.org/aim2/demos/html5_form2.htm

Although you are welcome to use <input> and <datalist> in place of the HTML4 <select> and <option>, I won't hold it against you if you decide to use the latter, given that the H= TML5 replacement is not completely stable right now.

Semantics: Make sure to give your form elements= an id, and refer to that id with any <label> used for text prompts. For example:

&l= t;label for=3D”yourName”>Your name:</label><= /span>

&l= t;input id=3D”yourName” type=3D”text” name=3D”user_name”>

PHP processing:

Your PHP must be able to process user inputs to send t= o your own email, and give the user confirmation as to whether or not the form has been successful.

<= /span>

Step 1: double-che= ck the HTML form.

Be sure that all of your = HTML form elements have a name and value that can be processed by = the PHP file.

Note that with a <sele= ct> drop-down menu, it needs to be written like this:

&l= t;select name=3D””>

&l= t;option value=3D””></option>

&l= t;option value=3D””></option>

&l= t;option value=3D””></option>

&l= t;/select>

Use this format for check= boxes:

     <input type=3D”checkbox”name=3D”whatever[]”>

--= don't put anything inside of the square brackets.

Fi= nally, and most importantly, add the following to <form>:<= /p>

     <form metho= d=3D”post” action=3D”form_handler.php”>

Step 2: create the= PHP form-handler

a. Download form_handl= er.php from the Week 11 page of the class site.

b. The POSTdata-to-variab= le conversion statements are started for you on lines 12 and 13.= Use the longer statement format for any input where the user can type in his/her own characters.

c. If you would like to v= alidate any inputs, use the optional validation statement on line 24&nbs= p; for each appropriate variable.

d. If you are using check= boxes in your form, unhide and finish the code that converts and implodes the array data.

e. When constructing the resultant email, recopy the code on lines 58-60 to account for each variable created from the form data.

f. Make sure the values f= or every $errorString and $okString are completed.

Note: every inc= lude() assumes that your form page is entitled index.php. If it isn't, then change these lines of code!

<= /span>

Step 3: enable the= HTML form to write confirmations.

Add the following to the <body> of your form (it doesn't matter where):

    <?php if (isset($errorString)) {echo $errorString;} ?>

    <?php if (isset($okString)) {echo $okString;} ?>

<= /span>

Step 4: upload to = the server and test the form.

Your form should send al= l the input results to your email, and the page should refresh to give you some s= ort of confirmation message.

Here are links to my dem= os:

ht= tp://www.ecbrown.org/aim2/demos/contact_form/contact_form.zip

http= ://www.ecbrown.org/aim2/demos/survey_form/survey_form.zip

I used an isset() functi= on inside of the input values on the index.php of both examples in order to re= tain a user's typed data if the form page refreshes but fails to process. You do= n't have to go to this length for this assignment.

<= /span>

Step 5: Getting th= is graded

Naturally, the form shoul= d be on your portfolio site, but you will also need to create a zipped file containing your form and form-handling files, and email this to me.<= /p>

[Optional] Using a redirect in form processing

Would you prefer that users be taken to a different pa= ge instead of refreshing the same index.php?

Use this format:

if ($success){

$okString =3D"SOME AFFIRMATION= TEXT HERE";

&n= bsp;   header( 'Location: URL= ' );

&n= bsp; exit;

}

else{

$errorString =3D"SOME ERROR ME= SSAGE HERE";

&n= bsp;   header( 'Location: URL= ' );

}

For example:

&n= bsp;   header( 'Location: thank_y= ou_page.php' );