The contact form is an easy way for your website users to contact you. They can quickly share their name, email and message. Having a contact form is important for bloggers, business owners or website admins to stay connected with their audience and handle questions or feedback.
Table of Contents
Guide to use Stranded Contact form
Copy the provided HTML, CSS, and JavaScript code and paste it into your website html file. In the html section, Replace "examplemail@gmail.com" with your own email address where you want to receive the messages.
<div class="form-wrapper">
<form action="https://formsubmit.co/examplemail@gmail.com" method="POST" target="_blank">
<p>We'd love to hear from you!</p>
<div class="form-section">
<div class="form-row">
<div class="input-column">
<label for="name">Name<span class="required-mark">*</span></label>
<input type="text" name="name" required="" class="input-control">
</div>
<div class="input-column">
<label for="email">Email<span class="required-mark">*</span></label>
<input type="email" name="email" required="" class="input-control">
</div>
</div>
</div>
<div class="form-section">
<label for="message">Message<span class="required-mark">*</span></label>
<textarea name="message" required="" rows="10" class="textarea-control"></textarea>
</div>
<button type="submit" class="submit-button">Submit Form</button>
<!-- Success message -->
<p id="confirmationMessage" class="confirmation-message" style="display: none;">Message sent successfully!</p>
</form>
</div>
<style>
.form-wrapper {max-width: 500px;
margin: 40px auto;
padding: 30px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
color: #fff;
font-family: 'Arial', sans-serif;
}
form p {
text-align: center;
font-size: 16px;
margin-bottom: 20px;
}
.input-control, .textarea-control {
border: none;
background-color: rgba(255, 255, 255, 0.8);
width: 90%;
padding: 12px 15px;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
color: #333;
outline: none;
transition: box-shadow 0.3s ease;
}
.input-control:focus,
.textarea-control:focus {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
label {
display: block;
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
}
.submit-button {
width: 100%;
padding: 15px;
font-size: 16px;
color: #fff;
background-color: #ff8c00;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.submit-button:hover {
color: #fff;
background-color: #23272b;
border-color: #1d2124;
}
.required-mark {
color: red;
margin-left: 4px;
}
.confirmation-message {
margin-top: 15px;
text-align: center;
font-size: 14px;
color: #28a745;
font-weight: bold;
}
</style>
<script>
const form = document.getElementById("contactForm");
const confirmationMessage = document.getElementById("confirmationMessage");
form.addEventListener("submit", function (e) {
e.preventDefault(); // Prevent form redirection for submission handling
// Simulate form submission
setTimeout(() => {
confirmationMessage.style.display = "block"; // Show confirmation message
setTimeout(() => {
confirmationMessage.style.display = "none"; // Hide message after 3 seconds
form.reset(); // Reset the form
}, 3000);
}, 500); // Simulate a delay for better user experience
});
</script>
Google Form Embedded Contact form
create a Google form:First go to Google Forms and create a new form or choose a template. Add necessary labels like Name, Email and Message.
Embedded code:Then click the Setting icon and enable Collect email addresses if needed. Once your form is ready click Send go to the Embed (<> tab) adjust the width and height if nedded and copy the iframe code.
Add to your website:Next open your website HTML editor. Navigate to the Contact Us page and paste the copied iframe code where you want the form to appear. Finally publish the page.
Pop Up Contact form
Just copy the below given code and paste in your contact us page. And then replace exampleyourmail@gmail.com with your own mail address and publish the page.
<button class="custom-button" onclick="openCustomContactForm()">Open Contact Form</button>
<div class="custom-overlay" onclick="closeCustomContactForm()"></div>
<div class="custom-contact-popup">
<span class="custom-close-button" onclick="closeCustomContactForm()">×</span>
<form action="https://formsubmit.co/exampleyourmail@gmail.com" method="POST">
<p>We did love to hear from you!</p>
<label class="custom-label" for="name">Name:</label>
<input class="custom-input" type="text" id="name" name="name" required=""/>
<label class="custom-label" for="email">Email:</label>
<input class="custom-input" type="email" id="email" name="email" required=""/>
<label class="custom-label" for="message">Message:</label>
<textarea class="custom-textarea" id="message" name="message" rows="4" required></textarea>
<button class="custom-button" type="submit">Submit</button>
</form>
</div>
<style>
.custom-contact-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
color: #fff;
font-family: 'Arial', sans-serif;
z-index: 1000;
}
form p {
text-align: center;
font-size: 16px;
margin-bottom: 20px;
}
.custom-label {
display: block;
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
}
.custom-input,
.custom-textarea {
border: none;
background-color: skyblue;
width: 90%;
padding: 12px 15px;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
color: #333;
outline: none;
transition: box-shadow 0.3s ease;
}
.custom-button {
width: 100%;
padding: 15px;
font-size: 16px;
color: #fff;
background-color: #ff8c00;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.custom-button:hover {
color: #fff;
background-color: #23272b;
border-color: #1d2124;
}
.custom-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.custom-close-button {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 20px;
color: #777;
}
@media only screen and (max-width: 768px) {
.custom-contact-popup {
width: 90%;
}
}
@media only screen and (max-width: 480px) {
.custom-contact-popup {
width: 95%;
}
}
</style>
<script>
function openCustomContactForm() {
document.querySelector(".custom-contact-popup").style.display = "block";
document.querySelector(".custom-overlay").style.display = "block";
}
function closeCustomContactForm() {
document.querySelector(".custom-contact-popup").style.display = "none";
document.querySelector(".custom-overlay").style.display = "none";
}
</script>
Test Form
After publish the contact us page. Then check if the form work properly or not by submitting a test message.
Activating Your Contact Form with FormSubmit
When you use FormSubmit for the first time you need to activate your form. After submitting your first test message FormSubmit will send an activation email to the email address you provided. Open the email and confirm your activation. Once activate your form is ready to use for receiving messages from your visitors.
Final Summary
The contact form is a useful feature for any website. It is simple, easy to use and looks more professional. It gives your visitors a professional way to contact you making their experience on your website better.
