html5 contact form using php

In this world of information overload, there's so much to learn.  Web development is getting more and more interesting as time goes on.  You can find so much sources on the web that it can leave you overwhelmed.  However, I'm going to show you a simple way to do a contact form.  Yes, there's some coding involved, but just follow along to get the concepts down.

The first part will be building the html.  Then styling the contact form with CSS.  Finally, doing the php back end.

You will need to be somewhat familiar with the basics, such as HTML5 and CSS3.  If not go to w3schools to do a few tutorials and read up on the basics.

Learning HTML and CSS is really easy, but it will take a couple of weeks to grasp it if you're a beginner.

Are you excited to learn how to build a html5 contact form using php?

Okay so lets get started.


How to create a html5 contact form using php?


create html5 contact form using php


Step 1:  Building the form - html5 contact form using php

Create a folder in your desktop and name it contact form.

Open up your favorite text editor.  I'm using Visual Studio Code.

Create an index.html file (this will be run in your browser to preview how it looks like)

Create a index.php file

Create a style.css file

Create a contactform.php file

See example below


contact folders


Step 2: Create HTML - html5 contact form using php


Here's the code to create the form.  All you need to do is copy and paste in your editor.

Also, I brought in some custom fonts from Google fonts.  This is a free resource to use stylish fonts other than the boring Helvetica or the regular Times Roman.

To get custom fonts go to Google fonts:

Select a font of your choice in the search box at the top.  In this case, I have picked Lato.  You can use this letter font or anything you want.

Please use your own logo because my form includes my own.  Moreover, you can choose your colors for backgrounds, font color and headings, so don't feel you need to use pink.

html5 contact form using php


html5 contact form using php


html5 contact form using php


Read more  Why trust a professional web designer vs. a website builder?


Step 3:  Style your form in CSS - html5 contact form using php

Copy and paste in your CSS file.

contact form css

Step 4:  Create php form - html5 contact form using php

This will enable you to connect to your email client.  Be careful though because Google is really weird.  You can test this out on your website directory.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href=",400,700" rel="stylesheet">
<title>Contact form php, Roxanne Reyes</title>
<a href="#"><img class="header-image" src="waetech_logo.png"></img></a>
<li><a href="#">About Wae Tech</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
<h2>Tell me about it!</h2>
<p>Do you have an idea for a new project? At Wae Tech, if you value web design as much as I do,
then we can definitely talk. Please include your type of project, goal, timeline and budget.
I'll get back to you pronto!
Thank you!
<form class="contact-form" action="contactform.php" method="post">
<p class="input-field"><label for="Fullname">Full Name</label></p>
<input type="text" id="name" name="name" placeholder="First and Last Name" required>
<p class="input-mail"><label for="Email">Email</label></p>
<input type="text" id="email" name="mail" placeholder="Your e-mail" required>
<p class="input-subject"><label for="Subject">Subject</label></p>
<input type="text" id="subject" name="subject" placeholder="What's this about?">
<p class="input-message"><label for="message">Message</label></p>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button type="submit" name="submit">Send Mail</button>
Copyright Wae Tech Solutions All rights reserved 2018

So there you have it, html5 contact form using php.  I hope you enjoyed this tutorial.

I will be creating more tutorials like these in the future.  Also, feel free to request a topic, so I can research more about it.

Stay tuned for more next time.