"Contact Form with Full Background Image"
Semantic UI 2.2.10 Snippet by nicole-wilcox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="contact-background-image">
<div class="ui container margin-top-30">
<form class="ui form pad-top-30 pad-bottom-30">
<h3 class="huge header inverted">Contact Us</h3>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<label>Leave your message here:</label>
<textarea></textarea>
</div>
<div class="field">
<label>Message Type:</label>
<div class="ui selection dropdown">
<input type="hidden" name="message-type">
<i class="dropdown icon"></i>
<div class="default text">Message Type</div>
<div class="menu">
<div class="item" data-value="1">Complaint</div>
<div class="item" data-value="0">Query</div>
</div>
</div>
</div>
<div class="field">
<label>Email</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
.contact-background-image {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/06/Gradient-Wallpaper.jpg");
padding: 50px 0 50px 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: