Hello,
In what seems to be our first PHP tutorial I am going to talk about creating a form using CSS and XHTML and then sending the input values to an email address. But before we can start on this, lets get to work creating the basis on the form.
Creating the Form
Firstly to create our form I decided to use CSS as this brings more flexibility in designing and styling out forms than using the conventional table based layout
Firstly we need to create a form, to do this we use the <form> tag. Below is the structure that the form will take.
<form name=”contact_form” action=”sendform.php” method=”post”><br />
</form>
You will notice that we have a couple of values within the opening form tag. Firstly name assigns the name of the form. The action value is used so that when the form is submitted this is the page that the browser will go to while giving the method of post which is how the data will be received.
However no visible elements are displayed within the browser at the moment. To do this we will apply the following code within the <form> tag.
<label>Name</label>
<input type=”text” class=”text_input” name=”name” value=”"><br />
<label>Email Address</label>
<input type=”text” class=”text_input” name=”email” value=”"><br />
<label>Comments</label>
<textarea name=”comments” rows=”10″ cols=”50″></textarea><br /><br />
<input type=”submit” value=”Send”>
So from this we can see that there is the <label></label> tag. We use this so that the user can see what value they need to place within each <input>
The <input> tag is used to define a input.
Within this form we can see that we use 3 different types of input.
Text – this is used when a text data value needs to be entered into the field
Textarea – this is used when a large number of characters needs to be inputted
submit – this is used to submit the form so that the values can be used within the action value
Additionally ‘class’ is used for styling the input type and is used within the CSS which we will later cover. Furthermore we need to define each input field with a unique name which is entered within name=”" so that they can each be identified in receiving the values of the particular input field.
Now if we run this within the browser we will see that all of the form elements are displayed however there are no style elements associated with the form so the design of the form will be poor. So now we will go on to styling the form.
Styling the form
As I earlier said, I chose to style the form using CSS instead of using tables as CSS reduces the use of repetitive tags as all styles are defined by each class value.
Now firstly add the following code within the <head></head> section of the document, css comments are added within the file to demonstrate the effect that each class will have on the input value.
Note
/*comment text*/ indicates a CSS comment
<style type=”text/css”>
label {display: block;} /* make sure that the input will be displayed below the label */
.text_input {width: 450px;margin-bottom: 5px;} /* each input field with a class value of text_input will be 450px wide and will have a margin of 5px on the bottom */
textarea {width: 450px ! important;height: 150px;} /* each <textarea> tag will be 450px wide and have a height of 150px*/
</style>
We have now created the main elements of the form and styled it appropriately (although additional styling can be applied to make the form more inkeeping with the theme of your website).
We will call this page ‘contact.html’.
Now we will be going on to creating the PHP code that will actually send the input values to a particular email address.
Using the mail() function to send the form
We will now create a new page called ’send_form.php’
This will be the main core of the form as this page will be what actually sends the data that has been inputted in ‘contact.html’. But remember to keep ’send_form.php’ and ‘contact.html’ into the same directory.
You will need to add the following code within this new page.
As again with the CSS comments have been included within the code so that you can establish what each variables particular job.
Note:
// is also the comment code for PHP
$variable_name is the way variables are implemented within PHP
<?php
// receive the values from name=”” and give each a variable name
$name = $_POST['name']; // receive the name value
$email = $_POST['email']; // receive the email value
$comments = $_POST['comments']; // recieve the comments value
// add all of the required information which will be shown in the body of the email $message= “From $name using an email address of $email sent:<br><br>$comments”;
// Send the message
$send=mail(‘email address to’,'Contact Form’, $comments);
if($send){
echo ( “Thanks for contacting us $name” ); // if the email was sent give a thankyou message
}
else{
echo ( “There was an error with your request” ); // or if not give error message
}
?>
Now if you run contact.html and submit the form with all of the values entered you should receive an email containing all of the fields that you entered in the body of the email.
Well, I hope you enjoyed the first part of creating the form as in the next part of the contact form series we will be enhancing the form using validation and preventing spam.
