Finally! The last part of this tutorial series that will make your form work smoothly. In previous parts we first created the foundation for form in HTML and CSS and then we added JavaScript fallback for cases when browser does not support form validation provided by HTML5. Today, we are going to work in PHP and create file that will be used to manage sending all the information from form to server, mail or whatever place will you choose.
If you want you can take a look at the previous parts of this tutorial – Part 1 that was all about HTML and CSS. Part 2 was focused on testing the browser features with Modernizr library and also about providing some basic fallbacks. In part 3 we finished the JavaScript part for validation fallbacks.
Below are links to Github repository with complete code and also link to live demo on Codepen where you can see the form.
Resources:
Codepen live demo:
https://codepen.io/d3v3r0/pen/jcxbL
GitHub repository:
https://github.com/d3v3r0/Custom-form-in-CSS-JavaScript-and-PHP
In order to be able to send the data from form to our mailbox, we have to provide some server-side solution which will take care about all the required actions. In this tutorial we will choose PHP to create a small snippet of code that will be saved in separate file. After that, you have to open the HTML code of your the form and input the name of this PHP file as a value for action attribute in form element.
Let’s call the PHP file “contact.php”. The form element will looks like this:
HTML:
<form id="js-form" action="contact.php" method="post"> … </form>
We are going to use a PHP function that were created to deal with data filled into the form. If you have no previous skills in PHP, don’t worry about that. We will use only few lines of code that will contain variables for individual input fields and then form function mentioned above this function is mail(). So, let’s start by creating the variables. It is important to note here that, as opposed to JavaScript, all variables in PHP start with dollar sign ($). There is no var keyword involved. First variable will be called “myemail” and it will contain your email or mail where the form data should be sent. Second variable will be “name” for the input field for name. Third will be “email” for email input field. The last one will be “phone” for phone input field. To access the values of input fields and store them inside the variables, we will use $_POST[] array with the value of “name” attribute of individual inputs inside square brackets.
PHP:
<?php $myemail = "yourmail@mail.com"; $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone'];
– note: In situation when you would use “GET” method for your form, you would also use $_GET[] array instead of $_POST[].
We could also use couple of if statements here to add a validation for all the values, but this is already handled by HTML or JavaScript. However, you should at least know that it is possible and often common to write some snippets of code for validation inside the PHP file. One good reason for this can be, for example, covering situations when either HTML or JavaScript validation are possible. Today, we will skip this part.
Next thing is to create a template for email that will be sent to our mailbox. Sure, we can just write down what data we want to receive and let the PHP do its work, but the result we would get would not be that nice and friendly. Let’s create new variable called “message” which will contain whole template for the email. Inside this variable we will use the names of $name, $email and $phone variables to include the values (data) stored in these variables. This message can be pretty simple.
PHP:
/* Message template */ $message = "Hi, This message has been sent by: Name: $name E-mail: $email Phone: $phone ";
Now let’s specify what data do we want to get and use mail() function to send them to our mailbox. We will provide all these data in form of parameters for this function. First parameter will be our email. Second parameter will be the subject of the mail. Let’s say the form is on your portfolio and you are looking for clients, so the subject can simply be “Job”. The last parameter will be the message ($message variable).
Whole syntax of mail() function is mail(to,subject,message,headers,parameters). The first three parameters – to, subject and message – are all required by default, the rest is optional and you can omit them as we will do today.
PHP:
mail($myemail, “Jobs”, $message); ?>
– note: You can also specify your email address here in first parameter like “yourmail@mail.com” instead of using variable as we did in the beginning.
This is all you need to get the form send successfully to your mailbox. If you want to redirect the user somewhere after sending the form, use header(‘Location: ‘) with HTML file or address as value for Location.
Below is whole PHP code in one piece.
PHP:
<?php $myemail = "yourmail@mail.com"; $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; /* Message template */ $message = "Hi, This message has been sent by: Name: $name E-mail: $email Phone: $phone "; mail($myemail, “Jobs”, $message); ?>
Summary
This is all. With this we finished this tutorial and have fully functional form in flat design with additional JavaScript fallbacks and also PHP for sending the form to our mailbox. Since I didn’t want to confuse those of you who are not familiar with PHP I skipped explaining the function we used. However, in some of the future posts, we will take a look at what functions are available in PHP for handling form and how do they work. Until that time I hope this tutorial will be sufficient for you. One more thing … Don’t forget to include the PHP file into action attribute.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
