Download presentation
Presentation is loading. Please wait.
2
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
3
Standard FormsStandard Forms DW: insert> forms> form Insert > form > Text field, text area, checkbox, radio button, select Button Standard Code
4
Code from last semester…Code from last semester… mail Email: Subject: Message: ---- 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' ); ?>
![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 ); >](http://images.slideplayer.com./20/6032552/slides/slide_4.jpg "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 ); >")
5
Classic Form Processing Model Web Application Development
6
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']; $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"); } ?>
![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.](http://images.slideplayer.com./20/6032552/slides/slide_6.jpg "$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 ); } >.")
7
HTML part 1HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Contact Form body { font-family: verdana; font-size:12px; } #container { margin:20px 20px 0px 20px; } #contactForm label { color:red; display:block; }
8
HTML part 2HTML part 2 Contact Me Full Name: Your Email Address: Phone Number: Your inquiry:
9
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; }
10
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 apos=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(' Please enter a valid email address. '); jQuery("#email").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(); });
11
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.webdesignerdepot.com/2010/05/beautiful-contact-forms-for-your-inspiration/ http://www.1stwebdesigner.com/inspiration/91-trendy-contact-and-web-forms-for-creative-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.
Similar presentations
