How to Add the contact page on your Website in Few Steps

You actually do not need to add a contact page using Bootstrap.

Your contact page is part of your WWW.MGTRADERS53.COM platform and is always present, but not automatically linked from your menus (see next section).
The contact page can always be viewed at the relative URL /contact at your shop.
For example:
WWW.MGTRADERS53.COM/CONTACT US

The HTML Markup
The first thing we need to do when building the contact form is to setup the proper HTML structure with the appropriate Bootstrap classes. 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.
To help us get started, we’ll use the following HTML markup and we’ll go through each block in more detail.


CODE :-

<form class="form-horizontal" role="form" method="post" action="index.php">

<div class="form-group">

<label for="name" class="col-sm-2 control-label">Name</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">

</div>

</div>

<div class="form-group">

<label for="email" class="col-sm-2 control-label">Email</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">

</div>

</div>

<div class="form-group">

<label for="message" class="col-sm-2 control-label">Message</label>

<div class="col-sm-10">

<textarea class="form-control" rows="4" name="message"></textarea>

</div>

</div>

<div class="form-group">

<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">

</div>

</div>

<div class="form-group">

<div class="col-sm-10 col-sm-offset-2">

<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">

</div>

</div>

<div class="form-group">

<div class="col-sm-10 col-sm-offset-2">

<! Will be used to display an alert to the user>

</div>

</div>

</form>

The Below code will show something like this type on your CONTACT US page:

 

Initially, it looks like we’re using quite a bit of code but notice that a lot of it is repetitive.
First, let’s break down the HTML markup.
- It's whole divided into 3:
1. FORM
2. LABEL
3. INPUT

<Form>

First, everything is contained inside our <form> tag which is used to declare a form requiring user’s input.  Within the form tag, there are a variety of attributes.
Method: There are two different form methods that can be used, get and post. If we use get, the form data is appended in the URL upon submission. For example, if we submitted the form with a name of “Chris”, the URL would show http://domain.com/?name=chris.
On the other hand, using the post method will send the form-data as an HTTP post transaction. Generally, the post method should be used for contact forms.
Role: Bootstrap added the role="form" attribute in order to help with accessibility. It’s good practice to add this in.
Action: The action attribute is used to indicate the location of the PHP script. In this case, we’ve included the script on the same page as our contact form. For the sake of this tutorial, we’ll just use index.php.

<Label>

Labels are used to specify what information should be entered in each of the inputs. The for attribute is used to associate the label with the input name. In our example above, we set our name label to for="name". This will then associate the label to the input type that has id="name". If you click on the label “Email”, notice that your cursor will now be activated on the email input.

<Input>

Now that we have our labels, we need to declare our inputs.

Input Type: There are several different kinds of input types and it’s important to specify the correct one, especially when it comes to mobile. If we select an “email” input type, the email keyboard will be displayed on mobile devices. If we select the “tel” input type, mobile users will be able to click on the telephone number and make a call on the spot.
In our contact form, we’ve used input types of text, email and submit. Notice that text area is not a type of input and rather its own HTML tag. Also note that you can specify the total amount of rows you want the text area to take up by default. In our example we used 4 rows.

- Id: The id attribute allows you to provide a unique identity for your HTML element. As we just discussed, this comes in handy when associated the labels to your inputs.

- Name: The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. In our case, we’ll be using the name in conjunction with our PHP code.

- Placeholder: Placeholders enable you to display text inside the form inputs, mainly for extra instructions. Notice that as soon as a user begins typing into the form inputs, the placeholder text disappears.

- Value: The value attribute varies depending on the type of input. In the case of our text inputs, the value is used to define the initial input value of the form. We’ve left this blank for now but we’re going to be introducing PHP code. You’ll see why later on.
In the case of buttons, the value attribute is used to display the button text.

That just about covers all the HTML markup we need to get going. Before we start adding our PHP, let’s go over the Bootstrap classes we included in our markup.

-Anytime there for support
-Thanks & Regards,
 -Abbas Ghadiali