Skip to content

Commit 6295792

Browse files
shadowcodexshadowcodex
committed
added contact forms
1 parent 4252196 commit 6295792

File tree

3 files changed

+140
-0
lines changed

3 files changed

+140
-0
lines changed

‎components.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ <h1>Components</h1>
99
<p>Done:</p>
1010
<ul>
1111
<li><a href="call-to-action/">Call To Action</a> - A simple call to action banner.</li>
12+
<li><a href="contact-form/">Contact Form</a> - A simple contact form.</li>
13+
<li><a href="contact-form-alternative/">Contact Form Alternative</a> - A simple contact form (Alternative Design)</li>
1214
<li><a href="dashboard-tiles/">Dashboard Tiles</a> - Quickly display important data in tiles.</li>
1315
<li><a href="login-form/">Login Form</a> - Just a simple login form.</li>
1416
<li><a href="login-form-alternative/">Login Form Alternative</a> - Just a simple login form. (Alternative Design)</li>

‎components/contact-form-alternative.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: 'Contact Form Alternative'
3+
description: 'A simple contact form. (Alternative design)'
4+
permalink: '/components/contact-form-alternative/'
5+
layout: component
6+
---
7+
<p>Font Awesome Required for icons in form</p>
8+
<p>Code:</p>
9+
{% highlight html %}
10+
<link rel="stylesheet" href="../../css/font-awesome.min.css">
11+
{% endhighlight %}
12+
<hr>
13+
<br>
14+
<link rel="stylesheet" href="../../css/font-awesome.min.css">
15+
<div class="row justify-content-md-center">
16+
<div class="col-md-6">
17+
<div class="card border-primary">
18+
<div class="card-header bg-primary text-white"><i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;Contact Us</div>
19+
<div class="card-body">
20+
<form action="#">
21+
<div class="form-group">
22+
<label for="exampleInputEmail">Your Email:</label>
23+
<div class="input-group">
24+
<span class="input-group-addon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
25+
<input type="email" class="form-control" placeholder="[email protected]">
26+
</div>
27+
28+
</div>
29+
<div class="form-group">
30+
<label for="exampleInputName">Your Name:</label>
31+
<div class="input-group">
32+
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
33+
<input type="text" class="form-control" placeholder="John Doe">
34+
</div>
35+
</div>
36+
<div class="form-group">
37+
<label for="exampleInputMessage">Your Message:</label>
38+
<textarea name="message" class="form-control" rows="5"></textarea>
39+
</div>
40+
<button type="submit" class="btn btn-primary">Send Message</button>
41+
</form>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<br>
47+
<p>Code:</p>
48+
{% highlight html %}
49+
<div class="row justify-content-md-center">
50+
<div class="col-md-6">
51+
<div class="card border-primary">
52+
<div class="card-header bg-primary text-white"><i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;Contact Us</div>
53+
<div class="card-body">
54+
<form action="#">
55+
<div class="form-group">
56+
<label for="exampleInputEmail">Your Email:</label>
57+
<div class="input-group">
58+
<span class="input-group-addon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
59+
<input type="email" class="form-control" placeholder="[email protected]">
60+
</div>
61+
62+
</div>
63+
<div class="form-group">
64+
<label for="exampleInputName">Your Name:</label>
65+
<div class="input-group">
66+
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
67+
<input type="text" class="form-control" placeholder="John Doe">
68+
</div>
69+
</div>
70+
<div class="form-group">
71+
<label for="exampleInputMessage">Your Message:</label>
72+
<textarea name="message" class="form-control" rows="5"></textarea>
73+
</div>
74+
<button type="submit" class="btn btn-primary">Send Message</button>
75+
</form>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
{% endhighlight %}

‎components/contact-form.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: 'Contact Form'
3+
description: 'A simple contact form.'
4+
permalink: '/components/contact-form/'
5+
layout: component
6+
---
7+
<div class="row justify-content-md-center">
8+
<div class="col-md-6">
9+
<div class="card">
10+
<div class="card-header">Contact Us</div>
11+
<div class="card-body">
12+
<form action="#">
13+
<div class="form-group">
14+
<label for="exampleInputEmail">Your Email:</label>
15+
<input type="email" class="form-control" placeholder="[email protected]">
16+
</div>
17+
<div class="form-group">
18+
<label for="exampleInputName">Your Name:</label>
19+
<input type="text" class="form-control" placeholder="John Doe">
20+
</div>
21+
<div class="form-group">
22+
<label for="exampleInputMessage">Your Message:</label>
23+
<textarea name="message" class="form-control" rows="5"></textarea>
24+
</div>
25+
<button type="submit" class="btn btn-primary">Send Message</button>
26+
</form>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
<br>
32+
<p>Code:</p>
33+
{% highlight html %}
34+
<div class="row justify-content-md-center">
35+
<div class="col-md-6">
36+
<div class="card">
37+
<div class="card-header">Contact Us</div>
38+
<div class="card-body">
39+
<form action="#">
40+
<div class="form-group">
41+
<label for="exampleInputEmail">Your Email:</label>
42+
<input type="email" class="form-control" placeholder="[email protected]">
43+
</div>
44+
<div class="form-group">
45+
<label for="exampleInputName">Your Name:</label>
46+
<input type="text" class="form-control" placeholder="John Doe">
47+
</div>
48+
<div class="form-group">
49+
<label for="exampleInputMessage">Your Message:</label>
50+
<textarea name="message" class="form-control" rows="5"></textarea>
51+
</div>
52+
<button type="submit" class="btn btn-primary">Send Message</button>
53+
</form>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
{% endhighlight %}

0 commit comments

Comments
 (0)