work contact blog

Code a Custom Contact Form


HTML, CSS & PHP



Laurent Chevrette | September 16, 2020



This short guide is intended for beginners or intermediate level web developers who wish to code their own contact form - that sends an email through your server - in HTML, CSS and a few simple lines of PHP. You should already be familiar with HTML markup and have some basic understanding of CSS styling.


    
        <form method="POST">
            <h2>get in touch</h2>
            <input name="name" placeholder="Name">
            <input name="email" placeholder="Email*" required>
            <textarea name="message" placeholder="How can I help?*" rows="8" cols="30" required>
            <input name="submit" value="Submit" type="submit">
        </form>
    

This is the most basic HTML markup of a contact form. The <form> tag contains the <h2> title, two <input> fields and a <textarea. Finally, we have a third <input> field that will be the submit button. Note that <input> elements don't need a closing tag and you should not use one, as it will be simply ignored by the browser. Let's have a look at the visual result of that HTML code.

See the Pen Simple Responsive Contact Form - HTML markup only by Laurent (@larrytherabbit) on CodePen.

OK, not too bad. Let's add some styling with a few lines of CSS. If you are new to CSS or just starting out, please take a minute to read the comments I have added directly in the CSS code below. Comments in CSS are marked between /* and */ and are not processed by the browser.

See the Pen Simple Responsive Contact Form - HTML and CSS with extensive css code explanations by Laurent (@larrytherabbit) on CodePen.

See the Pen Simple Responsive Contact Form - HTML and CSS with extensive css code explanations by Laurent (@larrytherabbit) on CodePen.

Great, so as you see can we're getting closer to our goal with the added CSS code. Again, I have commented extensively the entire CSS code directly in the codepen if you need a refresher or are just starting out. You should avoid simply copying and pasting code as it will slow down your learning curve.

Now that we have a cool-looking form, how do we actually make it save the data from our visitors and send it somewhere? Here comes PHP. This can be done many other ways than using PHP but for the sake of simplicity we'll see this simple method here in this guide. Please start by noting the POST value of the action attribute inside the form tag. This tells the browser what method to use when we submit the form. More here (2 minutes read).

    
        <?php 
            $name = $_POST['name'];
            $email = $_POST['email'];
            $message = $_POST['message'];
            $formcontent="From: $name \n Message: $message";
            $recipient = "email@here.com";
            $subject = "Contact Form Website";
            $mailheader = "From: $email \r\n";
            mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

        ?>
    

First we define the variables. The first there ones pull the data the is typed inside the input fields 'name', 'email' and 'message' (see HTML markup above). Then we define the recipient and other basic email values. Finally, we use the mail() function to send the email to the recipient we chose. Note that 'or die("Error") means the PHP script execution will stop there if any of the variables is not properly define, if the mail() function execution fails or if any other error is encountered, but you *will not* get an error message unless you debug the PHP execution live. If you want to add an alert pop-up window that tells the user that the form was properly sent, you can add the following line like this right before the closing ?> tag.

    
        echo ' <script language="javascript">alert("Thank you, we\'ll be in touch shortly!"); </script>';
    

That's it! If your contact form does not work or you don't receive the emails from it, check your spam folder, check your code line by line, and eventually you can contact me by email and I'll try to help you out as soon as I can. You can also send me demo suggestions on some other stuff you would like to learn how to code. Cheers and happy coding!

get in touch

(438) 521-2472
hello@
laurentchevrette.digital
1525-A Sherbrooke West, Montréal
H3G 1L7
Québec (Canada)

Digital Privacy: How To Protect Your Data Online


Tags: Digital Privacy, Security, Crypocurrencies | September 11, 2020

4 min read

Code a Custom Contact Form in HTML, CSS & PHP


Tags: CSS & UX/UI, Web Development | September 11, 2020

15 min read

Mine Your Own Ethereum: 5-Minutes Guide

Tags: Cryptocurrencies, Open Source Projects, Digital Privacy | October 2, 2020

4 min read