Part 3: Create a beautiful contact form from scratch using Photoshop, HTML, CSS, and PHP

Welcome to part 3 of create a beautiful contact form from scratch series. In this series we’ve covered how to design a contact form in photoshop then convert our design to HTML and CSS. In part 3 of this tutorial we will be making our contact form work using PHP. So if you’ve followed part one of then tutorial and part 2 then you’re ready for part 3. Lets begin.

Adding to the HTML

So since we’ve already have our HTML completed from the last tutorial all we have to do in this tutorial is add some code.

Change the default html code from:

to this. The code below tells the form that it is a post(Upload text) which means it can receive the message using text then the html file looks for the send.php file.

Adding The PHP

Explaining the PHP

So if you’re wondering what the heck I did with the php or what it does then I will explain. So in the php file the first line says “if php request method is post ” then to output the information that we want to output such as the variables. I also defined the variables in the html file and finally echoed out the form data. Hope you learned something from this 3 part tutorial.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Jason says:

    This is a good beginner tutorial. It shows the basic requirements for creating a form in PHP. It should be noted that the backend code (the PHP code) only shows the absolute minimum code required to send an email with the form data.

    For this to be used in the wild, a bit of security should be enacted.

    1 – The form can be hijacked and used to send emails to unintended recipients (by spammers, for one)

    2 – The backend form processing code puts too much trust in the user.

    At the absolute minimum, all the POST data should be run through htmlspecialchars() like this:

    $name_field = htmlspecialchars($_POST[‘name’]);

    This removes any trust you have placed in the user, and assumes that potentially harmful submissions in the name field will not result in the form being hijacked, and potentially harmful code being executed on the recipient’s side.

    • Dave Demon says:

      Hi,

      i think htmlentities, htmlspecialchars doesn’t work now.
      i try below :

      $str = "A 'quote' is <b>bold</b><br>";
      echo htmlentities($str, ENT_QUOTES);

      isn’t it.

  2. anthony says:

    Yes, thanks for the tutorials! I would love to see how to implement some sort of easy spam protection into this though! I currently have a webform on my site and it’s getting bombarded daily from spam. I’ve tried Captcha, and worked well, but it isn’t exactly custom and it won’t fit into my form. So I would rather just add a simple “3+4=” type of question to my form. I just don’t know any PHP.

  3. nizamghazi says:

    I just try your send.php, but i does’t work

    What i did :

    change : $to = “youremail@yourdomain.com”; to my email

    After I press send, it just say “Your Message Has Been Sent! ” but when i check email, nothing

    hope anyone help me

    • Marcell says:

      Make sure you have the correct port number and mail server address. for example my mail would be something like mail.mydomain.com and it will have a specific port number for that mail server. Then restart it and it should work. What email are you using, Google, Live?

    • Prix says:

      Just like nizamghazi!!! The “your message has been sent!” pops up but nothing else happen!…I´ve tried with hotmail and others but I don´t know why it doesn´t work!! Please help! I`m totally new at php..I mean could you be super specific bout fixing this!! Any help please…

    • Marcell says:

      Remember it did not work for me using google or live. If you have your own website use your website server? Did you try it using your website server?

  4. Scott says:

    Have you ever thought about adding ‘previous tutorial’ buttons or links at the bottom of the website? I love how helpful you are, thank you. However, I just found your page 3 and can not find the beginning of the tutorial or the ‘download sourcecode’ area.

    Thanks man!
    Have a blessed day!
    Scott

Leave a Reply