bootstrap contact form

1<!--Section: Contact v.2-->
2<section class="mb-4">
3
4    <!--Section heading-->
5    <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
6    <!--Section description-->
7    <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
8        a matter of hours to help you.</p>
9
10    <div class="row">
11
12        <!--Grid column-->
13        <div class="col-md-9 mb-md-0 mb-5">
14            <form id="contact-form" name="contact-form" action="mail.php" method="POST">
15
16                <!--Grid row-->
17                <div class="row">
18
19                    <!--Grid column-->
20                    <div class="col-md-6">
21                        <div class="md-form mb-0">
22                            <input type="text" id="name" name="name" class="form-control">
23                            <label for="name" class="">Your name</label>
24                        </div>
25                    </div>
26                    <!--Grid column-->
27
28                    <!--Grid column-->
29                    <div class="col-md-6">
30                        <div class="md-form mb-0">
31                            <input type="text" id="email" name="email" class="form-control">
32                            <label for="email" class="">Your email</label>
33                        </div>
34                    </div>
35                    <!--Grid column-->
36
37                </div>
38                <!--Grid row-->
39
40                <!--Grid row-->
41                <div class="row">
42                    <div class="col-md-12">
43                        <div class="md-form mb-0">
44                            <input type="text" id="subject" name="subject" class="form-control">
45                            <label for="subject" class="">Subject</label>
46                        </div>
47                    </div>
48                </div>
49                <!--Grid row-->
50
51                <!--Grid row-->
52                <div class="row">
53
54                    <!--Grid column-->
55                    <div class="col-md-12">
56
57                        <div class="md-form">
58                            <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
59                            <label for="message">Your message</label>
60                        </div>
61
62                    </div>
63                </div>
64                <!--Grid row-->
65
66            </form>
67
68            <div class="text-center text-md-left">
69                <a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
70            </div>
71            <div class="status"></div>
72        </div>
73        <!--Grid column-->
74
75        <!--Grid column-->
76        <div class="col-md-3 text-center">
77            <ul class="list-unstyled mb-0">
78                <li><i class="fas fa-map-marker-alt fa-2x"></i>
79                    <p>San Francisco, CA 94126, USA</p>
80                </li>
81
82                <li><i class="fas fa-phone mt-4 fa-2x"></i>
83                    <p>+ 01 234 567 89</p>
84                </li>
85
86                <li><i class="fas fa-envelope mt-4 fa-2x"></i>
87                    <p>contact@mdbootstrap.com</p>
88                </li>
89            </ul>
90        </div>
91        <!--Grid column-->
92
93    </div>
94
95</section>
96<!--Section: Contact v.2-->

1Example of .form-group
2<form>
3 <div class=”form-group”>
4 <label for=”exampleInputEmail1”>Email 
5
6address</label>
7 <input type=”email” class=”form-control” id=”exampleInputEmail1” ariadescribedby=”emailHelp” placeholder=”Provide email”>
8 </div>
9 <div class=”form-group”>
10 <label for=”exampleInputPassword1”>Your password</label>
11 <input type=”password” class=”form-control” id=”exampleInputPassword1”
12placeholder=”Password”>
13 </div>
14 <div class=”form-group form-check”>
15 <input type=”checkbox” class=”form-check-input” id=”exampleCheck1”>
16 <label class=”form-check-label” for=”exampleCheck1”>Remember me</label>
17 </div>
18 <button type=”submit” class=”btn btn-primary”>Submit</button>
19</form>
20.form-control
21Use this class to style all textual form controls such as user input, titles, etc.
22<form>
23 <div class=”form-group”>
24 <label for=”exampleFormControlInput1”>Email address</label>
25 <input type=”email” class=”form-control” id=”exampleFormControlInput1”
26placeholder=”name@example.com”>
27 </div>
28.form-control-file
29Add this class whenever you need to provide the user with an option to upload a file to the form.
30<input type=”file” class=”form-control-file” id=”exampleFormControlFile1”>
31.form-control-lg and .form-control-sm.
32Create a visual hierarchy within your form by adding .form-control-lg to make bigger input areas and .form-control-sm to
33make smaller ones.
34<input class=”form-control form-control-lg” type=”text” placeholder=”.form-controllg”>
35<input class=”form-control form-control-sm” type=”text” placeholder=”.form-controlsm”>
36
37

1formulário de contacto bootstrap
2