Advertisement Area
Our Enquiry Form Generator instantly creates a modern, responsive form with custom labels, fields, and styles that perfectly match your website’s design. This form is ideal for collecting names, emails, phone numbers, and messages from your visitors.
Lightweight, mobile-friendly, and fully SEO-optimized, it ensures a smooth user experience across all devices. Simply copy the generated HTML and CSS, paste it into any page, and get a ready-to-use enquiry form that improves engagement and makes managing enquiries effortless.
Why choose our Enquiry Form Generator?
- ✅ Fully customizable labels and fields.
- ✅ Responsive two-column layout for desktops and mobile.
- ✅ Lightweight and fast-loading for better performance.
- ✅ Easy to integrate—no coding experience required.
Start generating your custom enquiry form today and make it simple for your users to reach out.
Instructions:
👉 Update the labels (Name, Phone Number, E-mail, Select Services and Message) Instantly generate a custom Enquiry form with our design.
👉 Update different services with Add Service option as needed.
👉 Copy the HTML code and paste it inside the body of your webpage.
👉 Copy the CSS code and paste it inside the head section of your webpage.
Update Enquiry Form
🔍 Preview
💻 Generated HTMLCopy Code
🎨 Generated CSSCopy Code
<style>
#preview-content{
display: inline-block;
width:47%;
padding: 1%;
}
#templates{
display: inline-block;
width: 90%;
border: 4px solid #6cc070;
margin: 1%;
border-radius: 4px;
}
.contact-us-div{
margin: 5px 0;
display: flex;
align-items: flex-start;
}
.contact-data {
flex: 0 0 45%;
font-weight: bold;
padding: 2%;
}
.contact-form {
flex: 1;
padding: 2%;
}
input, textarea, select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
border-color: #4a90e2;
box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
outline: none;
}
textarea {
height: 200px;
resize: vertical;
}
button{
height: 35px;
border-radius:5px;
background-color: #287720;
color: #fff;
cursor: pointer;
}
#service-options li {
list-style: none;
margin: 4px 0;
font-size: 0.9rem;
}
#service-options button {
margin-left: 8px;
background: #d9534f;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.contact-us-div {
flex-direction: column; /* stack vertically */
align-items: stretch; /* make children full width */
margin-bottom: 10px; /* spacing between fields */
}
/* Make both label and input sections full width */
.contact-data,
.contact-form {
flex: 1 1 100% !important;
width: 100% !important;
padding: 0 0 5px 0;
}
/* Make label inputs full width */
.contact-data input {
width: 100% !important;
margin-bottom: 5px;
box-sizing: border-box;
}
/* Make form inputs full width */
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100% !important;
box-sizing: border-box;
margin-bottom: 5px;
}
/* Service input and add button stack vertically */
#service-option-input,
#add-service {
width: 100% !important;
display: block;
margin: 5px 0;
}
/* All buttons full width */
button,
#service-options button {
width: 100% !important;
margin: 5px 0;
}
/* Optional: reduce padding in input fields for mobile */
input, select, textarea {
padding: 12px;
font-size: 1rem;
}
#preview-content input,
#preview-content select,
#preview-content textarea,
#preview-content button,
#service-options button {
width: 100% !important;
box-sizing: border-box;
margin: 5px 0;
}
}
</style>
We'd love to hear your feedback about our website. Please share your thoughts in the
Codes Tool Box Blog
Share on Facebook
Share on X
Share on LinkedIn