Working with PHP and Forms

Last week I created my contact form for my portfolio site. To do this I used HTML, CSS and PHP. This was not the first time that I had tried to use PHP but it was the first time in which the code I had written actually worked. Firstly I created a form using the HTML form input tag. The input tag allows information to be entered into boxes or fields. The input tag has a ‘type’ attribute which specifies what type of information is being sent. There are many different types which can be selected when using the input tag in forms such as number, password, date and colour. I kept my form simple and only used three different ‘types’. The type=”text” attribute simply allows the user to ad text into a box; this is used for common form elements such as names. The next input attribute was “email”, which as the name suggests is for users to enter their email address. Input attributes such as ‘email’ also help to validate forms, for example if a user doesn’t use the ‘@’ symbol in the field the form wont send until the correction has been amended. This is useful as it means that there is more chance that the information will be correct. The downside to this though is that it doesn’t work in older versions of browsers, such as Safari version 5. The third attribute I used was the ‘submit’ attribute which simply allows the user to send all the previous information in the form (i.e. text, email etc) when they click on a button.

 

Another tag I used in the form was the textarea tag. The textarea tag is similar to the input type=”text” attribute in that it allows the user to type text in a field. The main difference is that the textarea allows the user to input an unlimited number of characters, where as the text input attribute is limited. This is useful if longer information is required from the user.

1

 

To get the information from the HTML form to be processed to my email account I firstly had to set the ‘action’ and ‘method’ attributes to the form tag. The action attribute determines where to send the data which has been submitted in the form, where as the method attribute lets the browser know what to do with the data. As you can see from the screenshot of my work I set the action as “form-complete.php” and the method as “POST”. This is telling the browser to send the data the user inputs on the form to ‘form-complete.php’.

2

 

What I then did was created a new PHP document and named it form-complete.php. The intention of this page was firstly to have a new page load after the form on the contact page had been submitted, and secondly to email the data that the user enters in the form to be sent to my email account. I did this by firstly defining the email address I wanted the data to be sent to. I did this by creating a variable called emailSend and assigning that variable to my email address. I then declared the variable ‘name’ and assigned it to the _POST variable I then also did the same thing with the email and message elements of the form. I then assigned the name field of the form to the variable mailHeader, which makes whatever the user inputs in the area called ‘name’ show in the header of the email. I also did the same for the message and number, although this time I used the variable messageBody to post it in the main body of the email. I had a problem with this as I could not get both the message and the phone number to be posted at the same time. I then used the mail function which allowed all the variables I added within the parenthesis’ to be sent to the email address.

4

 

One last thing I did in the forms section was added the required attribute to the inputs in html which means that if the user doesn’t input information in a certain field the form will not get sent until this has been changed. This is useful because it makes sure that the user will send important information. The problem with using this attribute is that it only works in browsers that support HTML5.

new

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s