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 FormsStandard Forms DW: insert> forms> form Insert > form > Text field, text area, checkbox, radio button, select Button Standard Code
Code from last semester…Code from last semester… mail Subject: Message: ---- save as mail.php in same directory, change $to line <?php $to = $ = $_REQUEST[' '] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail( $to, "Subject: $subject", $message, "From: $ " ); header( 'Location: thanks.html' ); ?>
Classic Form Processing Model Web Application Development
Form Processing (the PHP)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']; $ = $_GET[' ']; // setup the mail headers $subject = 'New contact received through the website'; $to = // <-- put YOUR address here. $from = $ ; $headers = "From: $from". "\r\n". "Reply-to: $from". "\r\n". 'X-Mailer: PHP/'. phpversion(); $body = "New received, details below\n\n"; $body.= "Full name: $username\n"; $body.= " address: $ \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 1HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Contact Form body { font-family: verdana; font-size:12px; } #container { margin:20px 20px 0px 20px; } #contactForm label { color:red; display:block; }
HTML part 2HTML part 2 Contact Me Full Name: Your Address: Phone Number: Your inquiry:
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(' Please fill in your name. '); jQuery("#username").focus(); return false; }
All ValidationAll Validation Add to the section of your HTML jQuery(document).ready(function() { jQuery('#submitButton').click(function() { // remove any error messages jQuery("#contactForm").find('label').remove(); // first validate the form var dotpos=jQuery("# ").val().lastIndexOf("."); if (apos < 1 || dotpos-apos < 2 ) { // address lacks an symbol or a '.' jQuery("# ").after(' Please enter a valid address. '); jQuery("# ").focus(); return false; } if (jQuery("#username").val() == '') { jQuery("#username").after(' Please fill in your name. '); jQuery("#username").focus(); return false; } if (jQuery("#phoneNumber").val() == '') { jQuery("#phoneNumber").after(' Please fill in your phone number. '); jQuery("#phoneNumber").focus(); return false; } if (jQuery("#message").val() == '') { jQuery("#message").after(' Please enter a message. '); jQuery("#message").focus(); return false; } jQuery("#contactForm").submit(); });
Homework Research form stylizing CSS (customizing the look, color, focus css form forms) – try to make something unusual. Forms can be beautiful: 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 . Feb 17 – work time. Due Feb 24. Must post on des170.com because PHP does not work on lehigh’s server. link.