Fully Working HTML 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 fully working with FormBold and available in Tailwind CSS and Plain HTML.

Preview
Fully Working HTML Contact Form
<div class="formbold-main-wrapper">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<div class="formbold-form-wrapper">
<form action="https://formbold.com/s/FORM_ID" method="POST">
<div class="formbold-mb-5">
<label for="name" class="formbold-form-label"> Full Name </label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-5">
<label for="email" class="formbold-form-label"> Email Address </label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-5">
<label for="subject" class="formbold-form-label"> Subject </label>
<input
type="text"
name="subject"
id="subject"
placeholder="Enter your subject"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-5">
<label for="message" class="formbold-form-label"> Message </label>
<textarea
rows="6"
name="message"
id="message"
placeholder="Type your message"
class="formbold-form-input"
></textarea>
</div>
<div>
<button class="formbold-btn">Submit</button>
</div>
</form>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
.formbold-mb-5 {
margin-bottom: 20px;
}
.formbold-pt-3 {
padding-top: 12px;
}
.formbold-main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.formbold-form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: white;
}
.formbold-form-label {
display: block;
font-weight: 500;
font-size: 16px;
color: #07074d;
margin-bottom: 12px;
}
.formbold-form-label-2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}
.formbold-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;
}
.formbold-form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.formbold-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;
}
.formbold-btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.formbold--mx-3 {
margin-left: -12px;
margin-right: -12px;
}
.formbold-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>