Design custom form in CSS, JavaScript and PHP tutorial Pt1

Today we are going to focus on forms. I think that you will agree with that forms are very important part of website. It does not matter in what kind of business you are or what kind of website do you have, you can always implement some small form there. In order to create functional form you have to know something about HTML, CSS, JavaScript and also PHP to be able to send input data anywhere you want. Without these skills, form will be only decoration. Let’s start …

In this three-part tutorial we will create form that will be ready to use wherever you want. It will include all the necessary parts – HTML, CSS, JavaScript and some short PHP code. This project will require two external resources. First will be font “Open sans” hosted on Google Fonts CDN, second, will be little JavaScript library called “-prefix-free”. This library automatically checks your browser and prefix all CSS properties that are not supported. The last resource will be JavaScript library called “Modernizr”. We will use this library for checking features related to forms to be able to cover all the gaps.

Resources:

Font:

http://fonts.googleapis.com/css?family=Open+Sans:700,400

-prefix-free:

http://leaverou.github.io/prefixfree/

Modernizr:

http://modernizr.com/

Codepen live demo:

https://codepen.io/d3v3r0/pen/jcxbL

GitHub repository:

https://github.com/d3v3r0/Custom-form-in-CSS-JavaScript-and-PHP

HTML

As always, we will start by creating HTML structure for the form. Form will consist of three fields for name, email, number and button. To start, we will create form element with id of “js-form”, action now set to “#”, method to “post” and four divs with class “input-container” nested in it. Inside each of these divs, except the last one, will be one label and one input element. Every label will have “name” attribute that will be same as the id of input we will connect it to.

Note to method attribute. When it comes to web, there are various types of request methods you can use. These methods are, “get”, “post”, “put” and “delete”. Each of these methods is for something different. For forms, the most interesting of them are “get” and “post” method. You will use “get” when you request some data to be sent from server. On the other hand, “post” method will be used in situations when you want to send some data from website to server. Great example for this can be form. With “post” method, all the data user will enter into the form will be sent on place specified by you.

HTML:

<form id="js-form" action="#" method=”post”>
 <div class="input-container">
  <label></label>
  <input />
 </div>
 <div class="input-container">
  <label></label>
  <input />
 </div>
 <div class="input-container">
  <label></label>
  <input />
 </div>
 <div class="input-container">
  <button></button>
 </div>
</form>

First div will contain label and input for name. Label will have “for” attribute set to “js-name”. Input element for name will have “id” attribute of “js-name”, name set to “name”, its type will be “text” and placeholder will be “Adam Turing”. We will also use “requred” attribute. With this, the user will have to enter his name before hi will be able to submit the form. We will use this attribute on all input elements (name, email and phone). The last thing we will do is to also use “autofocus” attribute, but only on this one input element. Now, when user load the page, this first field will automatically get focus and user can type his name without the need to select it first.

HTML:

<div class="input-container">
 <label for="js-name">Enter your name:</label>
 <input id="js-name" name="name" type="text" placeholder="Adam Turing" autofocus required />
</div>

Second div will contain label and input for email. Label will have “for” attribute set to “js-email”. Input element will have id set to “js-email”, name will be set to “email”, type to “email” and placeholder to “adam.turing@mail.com”. Also, don’t forget to include “required” attribute. When we set the type of this input to “email”, user on mobile phone with browser supporting this type of input will get modified keyboard, so they don’t have to switch to use various symbols.

HTML:

<div class="input-container">
 <label for="js-email">Enter your email:</label>
 <input id="js-email" name="email" type="email" placeholder="adam.turing@mail.com" required />
</div>

Third div will be for phone. Label nested inside it will have “for” attribute set to “js-name”. Input will have id of “js-name”, name and type attributes set to “tel”, placeholder to “999-3010” and the last attribute will be “required”. As with “email”, type set to “tel” will provide users with numeric keyboard designated for phone numbers.

HTML:

<div class="input-container">
 <label for="js-tel">Enter your phone:</label>
 <input id="js-tel" name="tel" type="tel" placeholder="999-3010" required />
</div>

The last div will contain only one element and that will be button. We are going to use button element instead of input with type set to “submit” because there can be some display issues with input element on mobile devices. Button element will have id set to “js-name”, type set to “submit”, value will be “Submit” and, for better accessibility, we will also set role attribute to “button”. Role attribute is primarily designated for screen readers and various devices for people with health disabilities.

HTML:

<div class="input-container">
 <button id="js-button" type="submit" value="Submit" role="button">Submit</button>
</div>

With this, we have completed HTML structure we need to create simple form. Below is HTML for whole form put together.

HTML:

<form id="js-form" action="#" method=”post”>
 <div class="input-container">
  <label for="js-name">Enter your name:</label>
  <input id="js-name" name="name" type="text" placeholder="Adam Turing" autofocus required />
 </div>
 <div class="input-container">
  <label for="js-email">Enter your email:</label>
  <input id="js-email" name="email" type="email" placeholder="adam.turing@mail.com" required />
 </div>
 <div class="input-container">
  <label for="js-tel">Enter your phone:</label>
  <input id="js-tel" name="tel" type="tel" placeholder="754-3010" required />
 </div>
 <div class="input-container">
  <button id="js-button" type="submit" value="Submit" role="button">Submit</button>
 </div>
</form>

CSS

Now let’s style the form a bit. Whole form will be in a flat design with use of pastel colors. We will start by setting the typography. This will involve selecting body, input and button element and creating new rule with “font-family” property set to “Open sans”, sans-serif”. Sans-serif is there as a fallback for case the “Open sans” is not available. Next thing is to select only body element and set the “font-size” property to “16px”. Then, we use the same with input and button, but size will be “1em” now.

CSS:

/*=Typography=*/
body,
input,
button { font-family: 'Open sans', sans-serif; }
body { font-size: 16px; }
input,
button { font-size: 1em; }

Because the form will have white background let’s make it stand out a bit by setting background of body to bright blue – #3498DB. We will also “fix” the way “padding” interacts with “width” and “height” of element by setting “box-sizing” property to “border-box” for all elements (*) including their “:before” and ”:after” pseudo-classes. Without this, padding might cause elements to be larger than the set width and height.

CSS:

/*=Layout=*/
body { background: #3498DB; }
*,
*:before,
*:after { box-sizing: border-box; }

Now let’s move to styling the form. Margin will be set to “1em auto”. This, with width set to “20em” will make the form centered with a bit of white space above and below it. To move content inside it from top and bottom border we will set padding to “.5em 0” (top-bottom left-right). Height will be set to “auto” so the form will adapt it to its content and background will be white – #fff.

CSS:

/*=Form=*/
form {
 margin: 1em auto;
 padding: .5em 0;
 width: 20em;/*320px*/
 height: auto;
 background: #fff;
}

Now we will select form, input elements and button and set the border-radius property to “4px”. Then we will select all the divs with class “.input-container” except the last one and set the margin-bottom to “1em”. This will add some white space between individual containers.

CSS:

form,
input,
button { border-radius: 4px; }
.input-container:not(:last-child) { margin-bottom: 1em; }

Labels will have padding set to “0 .95em” and color to dark grey – #696969. Inputs and button will have display property set to “block”, margin to “.5em auto” and width to 90%. Thanks to that, all these elements will be nicely centered. We will also use padding and set it to “.75em”. The last thing is to get rid of borders by setting border property to “0”.

CSS:

label {
 padding: 0 .95em;
 color: #696969;
}
input,
button {
 display: block;
 margin: .5em auto;
 padding: .75em;
 width: 90%;
 border: 0;
}

Let’s select input elements and set their background to light grey – #e6e6fa. Then, we will select button element and set the font-weight property to “bold”, background to vivid red – ff4523, color to white – #fff and to smoother the transition between various states let’s set transition property to “all .25s”. For focus and hover state the background will be set to tomato. Active state will have background of pure red – fe2700.

CSS:

input { background: #e6e6fa; }
button {
 font-weight: bold;
 background: #ff4523;
 color: #fff;
 transition: all .25s;
}
button:focus, button:hover { background: tomato;}
button:active { background: #fe2700;}

Before we end up today, we will prepare special class for future. This class will be called “js-hidden” and it will contain only one rule with display property set to “none”. We are going to use this class later on in JavaScript to hide placeholders.

CSS:

.js-hidden { display: none; }

Summary

This is all for the first part of this tutorial. In next part we will focus on JavaScript and will make the form bulletproof for various browsers supporting or not supporting all the form features we used today. So, dust of your JS skills and get ready for part two.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

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 Donate via Paypal