Logins You will need PHP to test this code, all modern web hosting companies will provide this,...
11
Forms… attempt #2 Professor Josh Miller Lehigh University | Spring 2012
-
Upload
myrtle-gibbs -
Category
Documents
-
view
217 -
download
0
Transcript of Logins You will need PHP to test this code, all modern web hosting companies will provide this,...
Forms… attempt #2
Professor Josh MillerLehigh 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 = "[email protected]";$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 = '[email protected]'; // <-- 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 mailif (mail($to,$subject,$body,$headers)) {
// redirect use to the thanks pageheader( '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 messagesjQuery("#contactForm").find('label').remove();
// first validate the formvar 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('<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.
