OK, yet time for another tutorial – though this time I have had requests for PHP and MySQL interaction; if you do not know what PHP or MySQL you can take a look at their main sites: http://www.php.net and http://www.mysql.com. Though, as a quick cover-up, PHP is yet another coding language, though it works with both the client-side and server-side. With PHP you are able to adapt a lot of new features that your site might be lacking, such as forms, database interaction, search features, log in / register / membership features, etc. PHP allows you to communicate with a database, though this is not its only purpose, in order to display or interact with a client (user/viewer).
MySQL on the other hand is a basic database – just like SQL and others. Though, when searching for PHP, you often find that MySQL is in sync with each other – this is because the usually are the best two combinations when wanting to code for database interaction using PHP. Though, the tutorial I am going to post today is not dealing with MySQL or database interaction, though it could be altered to do so, it is just a basic PHP Contact Form.
If you do not know the basics of PHP, try reading up on some tutorials or look for one of mine regarding its basics and overall knowledge. Though, you probably will not get lost if you are knowledgeable on some coding language – note this is a simple, basic Contact Form.
Lets start off by creating our HTML page; if you do not know HTML coding please take a look at my tutorial here and read up on some of the basic HTML coding.
Do not worry, I will walk you through all of the steps that I just gave you in the HTML markup.
The above code marks the beginning of the form we are about to create; the id and the name could, and usually are, the same and help if you decide to add some code to determine where the message was sent from. The method can be one of two things: post or get. I’ll describe the difference in another tutorial – just trust me when I say leave it to “post.” Than finally, the action is where you want your form to be sent to. There are a bunch of techniques to where and how to make a contact form work – I enjoy having it all on one page, if not only two; which you will find out why we did this the way we did later.
The rest of the coding is just basic HTML coding to create a basic form setup for a Contact Form. You can decorate or mess around with the coding and design how ever you like. Though, make sure you keep the concept and coding the same when it comes to the input part of the form.
Now is time to code the PHP; below is how the full PHP coding, with the contact form, should look and function. Then I will go into detail after, this is for those who are impatient and want just the code right away.
Some of you may be wondering, why is the PHP code stuck on top? Well the truth is code is usually read from top to bottom, like a book, by the browser. So, if we did not have the code on top – than the browser would read the HTML than wherever the PHP coding will be is when it will run that function we just wrote.
Now there is a lot of coding to go through, so I will just cover the basics for now.
Remember that coding above where we started and said that the form started? Well under the action of that form we had: contact.php?action=send. The reason I prefer this method is because it allows for easy interaction, displays errors as most forms should and gets rid of that extra page that you would have to write anyways.
Just like other coding languages, PHP deals with variables. You can create a variable like above, with the dollar sign ($) than the name of that variable; you can also set these variables to have value with the equal sign (=). Though, you may see that it’s set values are to things with $_POST[‘bla’]. This is the code used to grab information that was sent with the post method; the same method that we designated in the form area above. The part inside the apostrophe (‘) is the name of that post; so the id and name fields of those input fields in the HTML.
PHP can use if and else statements. I can cover those another time. Though, basically what that is saying is: IF (condition) – in this case if the variable $name is equal to (==) blank (‘’) – THAN the variable $errorN is equal to <span class=”error”>ERROR: Name field was left blank.</span>.
We did this to help display errors, in this case blank fields, and we will display those errors below in our HTML.
The second to last part of our PHP coding is when we actually send the email to our email address. Again, there is an if statement that we will use. Though, what on earth is that !isset and && signs? Well the isset is a basic PHP code that says “if it is set” which means if a variable is set to something other than blank, 0, etc. than that condition would be true. The && signs are another form of PHP coding saying “as well as” or just basic “and.” The exclamation point (!) in front of the isset basically says “if the variable IS NOT set (isset)” than we have our coding. After we check if all the errors were NOT set, than we email it to ourselves.
Below that we have the header() code for PHP which we will use to redirect our user to the contact_success.html page which will have something like “Thank you, your message has been sent” or you can change that to go back to the homepage, or whatever you may like.
In our HTML, after our labels for our form, we have added some coding. This is the code that we will use to display any errors, though if there are no errors to be displayed, than nothing is shown.
Also, we have added that in our HTML in the input markup we have added that the value to our inputs are equal to their posts; so basically instead of having a user retype everything over again, maybe because of one error, we keep that data and display it in the forms to save them from that hassle.
Well this is it for this tutorial; it may have been long, yet I hope it was informative. I will post more, and possibly the way to make this interact with the database, MySQL. Also, be sure to save this as contact.php instead of contact.html!!!
--
This tutorial was brought to you by Fg Designs.
Source: FutureGamers.
MySQL on the other hand is a basic database – just like SQL and others. Though, when searching for PHP, you often find that MySQL is in sync with each other – this is because the usually are the best two combinations when wanting to code for database interaction using PHP. Though, the tutorial I am going to post today is not dealing with MySQL or database interaction, though it could be altered to do so, it is just a basic PHP Contact Form.
If you do not know the basics of PHP, try reading up on some tutorials or look for one of mine regarding its basics and overall knowledge. Though, you probably will not get lost if you are knowledgeable on some coding language – note this is a simple, basic Contact Form.
Lets start off by creating our HTML page; if you do not know HTML coding please take a look at my tutorial here and read up on some of the basic HTML coding.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple PHP Contact Form - Fg Designs Tutorials</title>
</head>
<body>
<form id="contact" name="contact" method="post" action="contact.php?action=send">
<label>Name:<br />
<input name="username" type="text" id="username" />
</label><br />
<label>Email:<br />
<input name="email" type="text" id="email" />
</label><br />
<label>Subject:<br />
<select name="subject" id="subject">
<option selected="selected">- Please Select -</option>
<option value="questions">Questions/Concerns</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</label><br />
<label>Message:<br />
<textarea name="message" rows="4" id="message"></textarea>
</label>
<br /><br />
<label>
<input type="reset" name="Reset" value="Clear" />
</label>
<label>
<input name="Submit" type="submit" id="Submit" value="Send" />
</label>
</form>
</body>
</html>Do not worry, I will walk you through all of the steps that I just gave you in the HTML markup.
Code:
<form id="contact" name="contact" method="post" action="contact.php?action=send">The above code marks the beginning of the form we are about to create; the id and the name could, and usually are, the same and help if you decide to add some code to determine where the message was sent from. The method can be one of two things: post or get. I’ll describe the difference in another tutorial – just trust me when I say leave it to “post.” Than finally, the action is where you want your form to be sent to. There are a bunch of techniques to where and how to make a contact form work – I enjoy having it all on one page, if not only two; which you will find out why we did this the way we did later.
The rest of the coding is just basic HTML coding to create a basic form setup for a Contact Form. You can decorate or mess around with the coding and design how ever you like. Though, make sure you keep the concept and coding the same when it comes to the input part of the form.
Now is time to code the PHP; below is how the full PHP coding, with the contact form, should look and function. Then I will go into detail after, this is for those who are impatient and want just the code right away.
Code:
<?php
// Simple PHP Contact Form
// By Fg Designs Tutorials
// Checks if form was submitted
if($_GET['action'] == 'send') {
// Creates variables for posted information
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
// Checks to see if any information was left blank - than sends error to user
if($name == '') {
$errorN == '<span class="error">ERROR: Name field was left blank.</span>';
}
if($email == '') {
$errorE == '<span class="error">ERROR: Email field was left blank.</span>';
}
if($subject == 'select') {
$errorS == '<span class="error">ERROR: Subject field was left blank.</span>';
}
if($message == '') {
$errorM == '<span class="error">ERROR: Message filed was left blank.</span>';
}
// If there were no errors - emails person the form
if(!isset($errorN) && !isset($errorE) && !isset($errorS) && !isset($errorM)) {
// Emails user
mail('[email protected]', $subject, $message,"From: $name <$email>");
// Relocates messagner to success page
header("Location: contact_success.html");
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple PHP Contact Form - Fg Designs Tutorials</title>
<style type="text/css">
<!--
.error {
color: #FF0000;
font-size: 10px;
padding: 0px 0px 0px 10px;
}
-->
</style>
</head>
<body>
<form id="contact" name="contact" method="post" action="contact.php?action=send">
<label>Name:<?php echo $errorN; ?><br />
<input name="username" type="text" id="username" value="<?php echo $_POST['name']; ?>" />
</label>
<br />
<label>Email:<?php echo $errorE; ?><br />
<input name="email" type="text" id="email" value="<?php echo $_POST['email']; ?>" />
</label><br />
<label>Subject:<?php echo $errorS; ?><br />
<select name="subject" id="subject">
<option selected="selected" value='select'>- Please Select -</option>
<option value="questions">Questions/Concerns</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</label><br />
<label>Message:<?php echo $errorM; ?><br />
<textarea name="message" rows="4" id="message"><?php echo $_POST['message']; ?></textarea>
</label>
<br /><br />
<label>
<input type="reset" name="Reset" value="Clear" />
</label>
<label>
<input name="Submit" type="submit" id="Submit" value="Send" />
</label>
</form>
</body>
</html>Some of you may be wondering, why is the PHP code stuck on top? Well the truth is code is usually read from top to bottom, like a book, by the browser. So, if we did not have the code on top – than the browser would read the HTML than wherever the PHP coding will be is when it will run that function we just wrote.
Now there is a lot of coding to go through, so I will just cover the basics for now.
Code:
if($_GET['action'] == 'send') {Remember that coding above where we started and said that the form started? Well under the action of that form we had: contact.php?action=send. The reason I prefer this method is because it allows for easy interaction, displays errors as most forms should and gets rid of that extra page that you would have to write anyways.
Code:
// Creates variables for posted information
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];Just like other coding languages, PHP deals with variables. You can create a variable like above, with the dollar sign ($) than the name of that variable; you can also set these variables to have value with the equal sign (=). Though, you may see that it’s set values are to things with $_POST[‘bla’]. This is the code used to grab information that was sent with the post method; the same method that we designated in the form area above. The part inside the apostrophe (‘) is the name of that post; so the id and name fields of those input fields in the HTML.
Code:
if($name == '') {
$errorN == '<span class="error">ERROR: Name field was left blank.</span>';
}PHP can use if and else statements. I can cover those another time. Though, basically what that is saying is: IF (condition) – in this case if the variable $name is equal to (==) blank (‘’) – THAN the variable $errorN is equal to <span class=”error”>ERROR: Name field was left blank.</span>.
We did this to help display errors, in this case blank fields, and we will display those errors below in our HTML.
Code:
// If there were no errors - emails person the form
if(!isset($errorN) && !isset($errorE) && !isset($errorS) && !isset($errorM)) {
// Emails user
mail('[email protected]', $subject, $message,"From: $name <$email>");
// Relocates messagner to success page
header("Location: contact_success.html");
}The second to last part of our PHP coding is when we actually send the email to our email address. Again, there is an if statement that we will use. Though, what on earth is that !isset and && signs? Well the isset is a basic PHP code that says “if it is set” which means if a variable is set to something other than blank, 0, etc. than that condition would be true. The && signs are another form of PHP coding saying “as well as” or just basic “and.” The exclamation point (!) in front of the isset basically says “if the variable IS NOT set (isset)” than we have our coding. After we check if all the errors were NOT set, than we email it to ourselves.
Below that we have the header() code for PHP which we will use to redirect our user to the contact_success.html page which will have something like “Thank you, your message has been sent” or you can change that to go back to the homepage, or whatever you may like.
Code:
<label>Name:<?php echo $errorN; ?><br />In our HTML, after our labels for our form, we have added some coding. This is the code that we will use to display any errors, though if there are no errors to be displayed, than nothing is shown.
Code:
<input name="email" type="text" id="email" value="<?php echo $_POST['email']; ?>" />Also, we have added that in our HTML in the input markup we have added that the value to our inputs are equal to their posts; so basically instead of having a user retype everything over again, maybe because of one error, we keep that data and display it in the forms to save them from that hassle.
Well this is it for this tutorial; it may have been long, yet I hope it was informative. I will post more, and possibly the way to make this interact with the database, MySQL. Also, be sure to save this as contact.php instead of contact.html!!!
--
This tutorial was brought to you by Fg Designs.
Source: FutureGamers.
