This will then associate the label to the input type that has id='name'. In our example above, we set our name label to for='name'. The for attribute is used to associate the label with the input name. Labels are used to specify what information should be entered in each of the inputs.

For the sake of this tutorial, we’ll just use index.php. In this case, we’ve included the script on the same page as our contact form.

It’s good practice to add this in.Īction: The action attribute is used to indicate the location of the PHP script. Role: Bootstrap added the role='form' attribute in order to help with accessibility. Generally, the post method should be used for contact forms. On the other hand, using the post method will send the form-data as an HTTP post transaction. For example, if we submitted the form with a name of “Chris”, the URL would show. If we use get, the form data is appended in the URL upon submission. Method: There are two different form methods that can be used, get and post. Within the form tag, there are a variety of attributes. įirst, everything is contained inside our tag which is used to declare a form requiring user’s input. Initially, it looks like we’re using quite a bit of code but notice that a lot of it is repetitive. Using this code, you should have something that looks like this.

To help us get started, we’ll use the following HTML markup and we’ll go through each block in more detail. Although not required, we’re going to center the contact form using the classes col-md-6 col-md-offset-3 and I’m going to assume you’ve properly nested the form within a row and container. The first thing we need to do when building the contact form is to setup the proper HTML structure with the appropriate Bootstrap classes. Our contact form will also have built-in spam prevention and form validation.

In this step by step tutorial, we’re going to be creating a working Bootstrap contact form with PHP, a popular server-side language. But since Bootstrap is only a front-end framework, we need to introduce added functionality in order for to make the contact form functional. Contact forms are one of the most common elements found on a web page, and they can be used to gather just about any type of information required from your users.įortunately, designing contact forms with Bootstrap is a breeze with all of the built-in classes available.

Contact form html css php free download