Contact Form

A contact form is usually displayed on a webpage with an input field for each piece of information required by the website, such as name, email address, subject, and message. This contact form is ready to use with FormBold and available in Tailwind CSS and Plain HTML.

Preview
Contact Form
<div class="main-wrapper">
<div class="form-wrapper">
<form
action="https://formbold.com/s/YOUR_KEY"
method="POST">
<div class="mb-5">
<label for="name" class="form-label"> Full Name </label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
class="form-input"
/>
</div>
<div class="mb-5">
<label for="email" class="form-label"> Email Address </label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
class="form-input"
/>
</div>
<div class="mb-5">
<label for="subject" class="form-label"> Subject </label>
<input
type="text"
name="subject"
id="subject"
placeholder="Enter your subject"
class="form-input"
/>
</div>
<div class="mb-5">
<label for="message" class="form-label"> Message </label>
<textarea
rows="6"
name="message"
id="message"
placeholder="Type your message"
class="form-input"
></textarea>
</div>
<div>
<button class="btn">Submit</button>
</div>
</form>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
.mb-5 {
margin-bottom: 20px;
}
.pt-3 {
padding-top: 12px;
}
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: white;
}
.form-label {
display: block;
font-weight: 500;
font-size: 16px;
color: #07074d;
margin-bottom: 12px;
}
.form-label-2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}
.form-input {
width: 100%;
padding: 12px 24px;
border-radius: 6px;
border: 1px solid #e0e0e0;
background: white;
font-weight: 500;
font-size: 16px;
color: #6b7280;
outline: none;
resize: none;
}
.form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.btn {
text-align: center;
font-size: 16px;
border-radius: 6px;
padding: 14px 32px;
border: none;
font-weight: 600;
background-color: #6a64f1;
color: white;
cursor: pointer;
}
.btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.-mx-3 {
margin-left: -12px;
margin-right: -12px;
}
.px-3 {
padding-left: 12px;
padding-right: 12px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.w-full {
width: 100%;
}
@media (min-width: 540px) {
.sm\:w-half {
width: 50%;
}
}
</style>