Classic Form Processing Model for Web Development - Lehigh University 2012

Forms… attempt #2 Professor Josh Miller Lehigh University | Spring 2012

Logins • You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not. • I've given you an account on des170.com: • SFTP server: des170.com • Login: • Password: • Directory: web

Standard Forms • DW: insert> forms> form • Insert > form > Text field, text area, checkbox, radio button, select • Button • Standard Code <form id="form1" name="form1" method="post" action="process.php"> <input name="name" type="text" /> <textarea name="contact" id="contact" cols="45" rows="5"></textarea> </form>

Code from last semester… <html><head><title>mail</title></head><body> <form method='post' action='mail.php'> Email: <input name='email' type='text' /><br /> Subject: <input name='subject' type='text' /><br /> Message:<br /> <textarea name='message' rows='15' cols='40'></textarea><br /> <input type='submit' /> </form> </body></html> ---- save as mail.php in same directory, change $to line <?php $to = "YOURADDRESS@mail.com"; $email = $_REQUEST['email'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail( $to, "Subject: $subject", $message, "From: $email" ); header( 'Location: thanks.html' ); ?>

Classic Form Processing Model Web Application Development

Form Processing (the PHP) • Still need the HTML, PHP (slightly modified), and some javascript… • messageHandler.php: <?php $username = $_GET['username']; $phoneNumber = $_GET['phoneNumber']; $message = $_GET['message']; $email = $_GET['email']; // setup the mail headers $subject = 'New contact received through the website'; $to = 'jamr02@lehigh.edu'; // <-- put YOUR email address here. $from = $email; $headers = "From: $from" . "\r\n" . "Reply-to: $from" . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $body = "New email received, details below\n\n"; $body .= "Full name: $username\n"; $body .= "Email address: $email\n"; $body .= "Phone number: $phoneNumber\n"; $body .= "------------------------------\n"; $body .= $message; // send the mail if (mail($to,$subject,$body,$headers)) { // redirect use to the thanks page header( 'Location: thanks.html' ); } else { // this should never happen... echo("ERROR"); } ?>

HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Contact Form</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style type = "text/css"> body { font-family: verdana; font-size:12px; } #container { margin:20px 20px 0px 20px; } #contactForm label { color:red; display:block; } </style> </head>

HTML part 2 <body> <div id = "container"> <h1>Contact Me</h1> <form id="contactForm" action="contact.php"> Full Name:<br /> <input type = "text" name = "username" id = "username" /><br /><br /> Your Email Address:<br /> <input type = "text" name = "email" id = "email" /><br /><br /> Phone Number: <br /> <input type = "text" name = "phoneNumber" id = "phoneNumber" /><br /><br /> Your inquiry: <br /> <textarea name = "message" id = "message" rows = "6" cols = "40"></textarea><br /><br /> <input type = "button" id = "submitButton" value = "Send Now" /> </form> </div> </body> </html>

Validation • Almost always done client side (perhaps also server side), with javascript • jQuery simplifies this tedious task • Example: if (jQuery("#username").val() == '') { jQuery("#username").after('<label>Please fill in your name.</label>'); jQuery("#username").focus(); return false; }

All Validation Add to the <head> section of your HTML <script type = "text/javascript"> jQuery(document).ready(function() { jQuery('#submitButton').click(function() { // remove any error messages jQuery("#contactForm").find('label').remove(); // first validate the form varapos=jQuery("#email").val().indexOf("@"); dotpos=jQuery("#email").val().lastIndexOf("."); if (apos < 1 || dotpos-apos < 2 ) { // email address lacks an '@' symbol or a '.' jQuery("#email").after('<label>Please enter a valid email address.</label>'); jQuery("#email").focus(); return false; } if (jQuery("#username").val() == '') { jQuery("#username").after('<label>Please fill in your name.</label>'); jQuery("#username").focus(); return false; } if (jQuery("#phoneNumber").val() == '') { jQuery("#phoneNumber").after('<label>Please fill in your phone number.</label>'); jQuery("#phoneNumber").focus(); return false; } if (jQuery("#message").val() == '') { jQuery("#message").after('<label>Please enter a message.</label>'); jQuery("#message").focus(); return false; } jQuery("#contactForm").submit(); }); }); </script>

Homework • Research form stylizing CSS (customizing the look, color, focus css form forms) – try to make something unusual. • Forms can be beautiful: • http://www.webdesignerdepot.com/2010/05/beautiful-contact-forms-for-your-inspiration/ • http://www.1stwebdesigner.com/inspiration/91-trendy-contact-and-web-forms-for-creative-inspiration/ • Create a contact form that has additional fields than what was shown in this demo, at least 3 additional fields (try to use more than just standard text boxes) • Create a beautiful stylized form with validation, that sends a formatted email. • Feb 17 – work time. Due Feb 24. Must post on des170.com because PHP does not work on lehigh’s server. Email link.

Classic Form Processing Model for Web Development - Lehigh University 2012