10+ Best Contact Form Widgets for Blogger Static Pages (Easy Integration)
A Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of Blogger’s default widgets. But If You Want to add a Contact form widget on the static page there is no official way to do this on a blogger.
How TO Enable Blogger Contact Form In Blogger?
Follow These steps:
- Sign into your blogger account through Gmail.
- Go to the Blogger Dashboard/Overview.
- Select the Layout section from the left menu.
- Click on the Add a Gadget (Sidebar/ Footer will be better) > More Gadgets.
- Click on the Blue Plus Button of the Contact Form Gadget and then Save it.
Now it is time to hide this default blogger contact widget because we are going to make our stylish contact form in a static “Contact Us” page.
How To Hide Default Blogger Contact Form?
- Go to the “Template>Edit Html.
- Now find the style ending code : ]]>.
- Paste below a small CSS code just above this.
- Save your template.
div#ContactForm1 { display: none !important;
How Add Blogger Contact Form In A Static Page?
- Now create our static Contact Us page for bloggers
- Go to the Pages section and click on the New page button
- Page Title with Contact Us
- Now go to the Page Settings Options
- Select Readers Comments “Don’t allow, hide existing”. Click on the done button.
- Now select the design you want and paste it into that page and click publish.
- Vist Your Newly Created Contact Us Page.
01. Contact Form
<style>
.twist-blogger-contact-form-wrap {
margin: 0 auto;
max-width: 840px;
padding: 20px;
position: relative;
background-color: #FEFEFE;
}
.twist-blogger-contact-form-wrap:after, .twist-blogger-contact-form-wrap:before {
content: '';
display: table;
clear: both;
}
div#twist-blogger-contact-form {
padding: 40px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 12px;
margin: 20px auto;
color: #FFF;
font-size: 16px;
max-width: 400px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
input#ContactForm1-contact-form-name,
.contact-form-email,
.contact-form-email:hover,
.contact-form-email:active,
.contact-form-email-message,
.contact-form-email-message:active,
.contact-form-email-message:hover {
padding: 12px;
box-shadow: none !important;
width: 100%;
border: 0 !important;
line-height: 24px;
min-height: 40px;
background: rgba(255, 255, 255, 0.9);
margin-bottom: 15px;
margin-top: 8px;
border-radius: 8px;
font-size: 14px;
color: #333;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
input#ContactForm1-contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
outline: none;
}
.contact-form-button-submit {
background: #FF6F61;
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
outline: none !important;
color: #FFFFFF;
border: none;
border-radius: 8px;
width: 100%;
height: 50px;
margin-top: 20px !important;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.contact-form-button-submit:hover {
background: #FF3B2F !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.contact-form-button-submit:active {
transform: translateY(0);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.contact-form-error-message-with-border,
.contact-form-success-message {
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
color: #333;
font-size: 14px;
font-weight: bold;
padding: 10px;
line-height: 1.5;
margin-top: 15px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: none;
}
.contact-form-error-message-with-border {
border: 1px solid #FF6F61;
}
.contact-form-success-message {
border: 1px solid #4CAF50;
}
</style>
<div class="twist-blogger-contact-form-wrap">
<div id="twist-blogger-contact-form">
<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1-contact-form-name" name="name" placeholder="User name" size="30" type="text" value="" /><br />
<br />
Email*<br />
<input class="contact-form-email" id="ContactForm1-contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<br />
Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1-contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1-contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"></div>
</div>
</form>
<br />
</div>
</div>
</div>
Output:
02. Contact Form
<style scoped="" type="text/css">
form[name="contact-form"] {
font-family: 'Open Sans', sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 40px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
form[name="contact-form"] span {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
form[name="contact-form"] i {
margin-right: 8px;
color: #6c5ce7;
}
#ContactForm1-contact-form-name,
#ContactForm1-contact-form-email,
#ContactForm1-contact-form-email-message {
width: 100%;
height: auto;
margin: 5px 0 15px 0;
padding: 12px;
background: #f8f9fa;
color: #333;
font-family: 'Open Sans', sans-serif;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.label-name{
display: flex;
margin: 0px;
}
#ContactForm1-contact-form-email-message {
height: 150px;
resize: vertical;
}
#ContactForm1-contact-form-name:focus,
#ContactForm1-contact-form-email:focus,
#ContactForm1-contact-form-email-message:focus {
outline: none;
background: #fff;
border-color: #6c5ce7;
box-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
}
#ContactForm1-contact-form-submit {
width: 100%;
background: #6c5ce7;
color: #fff;
margin: 10px 0;
padding: 12px 18px;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
#ContactForm1-contact-form-submit:hover {
background: #5a4ad1;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}
#ContactForm1-contact-form-submit:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(108, 92, 231, 0.3);
}
#ContactForm1-contact-form-error-message,
#ContactForm1-contact-form-success-message {
width: 100%;
margin-top: 20px;
padding: 10px;
border-radius: 8px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
.contact-form-error-message-with-border {
background: #ffe6e6;
color: #ff4d4d;
border: 1px solid #ff4d4d;
}
.contact-form-success-message {
background: #d1fae5;
color: #10b981;
border: 1px solid #10b981;
}
@media only screen and (max-width: 640px) {
form[name="contact-form"] {
padding: 15px;
}
#ContactForm1-contact-form-name,
#ContactForm1-contact-form-email,
#ContactForm1-contact-form-email-message {
padding: 10px;
}
#ContactForm1-contact-form-submit {
padding: 10px 15px;
}
}
</style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<form name="contact-form">
<p class="label-name"><i class="fa fa-pencil-square-o"></i> Name <span>*</span></p>
<input id="ContactForm1-contact-form-name" name="name" type="text" />
<p class="label-name"><i class="fa fa-envelope-o"></i> Email Address <span>*</span></p>
<input id="ContactForm1-contact-form-email" name="email" type="text" />
<p class="label-name"><i class="fa fa-keyboard-o"></i> Content <span>*</span></p>
<textarea id="ContactForm1-contact-form-email-message" name="email-message"></textarea>
<input id="ContactForm1-contact-form-submit" type="button" value="Send" />
<div>
<div id="ContactForm1-contact-form-error-message"></div>
<div id="ContactForm1-contact-form-success-message"></div>
</div>
</form>
Output:
03. Contact Form
<style>
.tb-contact-form-widget {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.c-form-name,
.c-form-email,
.c-form-email-message {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
color: #333;
background: #f8f9fa;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.c-form-email-message {
height: 150px;
resize: vertical;
}
.c-form-name:hover,
.c-form-email:hover,
.c-form-email-message:hover,
.c-form-name:focus,
.c-form-email:focus,
.c-form-email-message:focus {
border-color: #6c5ce7;
box-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
outline: none;
background: #fff;
}
.tb-contact-form-widget label {
display: block;
margin: 10px 0 5px 0;
font-size: 14px;
font-weight: 600;
color: #555;
}
.cform-button {
width: 120px;
height: 40px;
background: #6c5ce7;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cform-button:hover {
background: #5a4ad1;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(108, 92, 231, 0.3);
}
.cform-button:active {
transform: translateY(0);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#ContactForm1-contact-form-error-message,
#ContactForm1-contact-form-success-message {
width: 100%;
margin-top: 20px;
padding: 10px;
border-radius: 8px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
.contact-form-error-message {
background: #ffe6e6;
color: #ff4d4d;
border: 1px solid #ff4d4d;
display: none;
}
.contact-form-success-message {
background: #d1fae5;
color: #10b981;
border: 1px solid #10b981;
display: none;
}
@media only screen and (max-width: 640px) {
.tb-contact-form-widget {
padding: 15px;
}
.c-form-name,
.c-form-email,
.c-form-email-message {
padding: 10px;
}
.cform-button {
width: 100%;
}
}
</style>
<div class="tb-contact-form-widget">
<form name="contact-form">
<div class="name"> <input class="c-form-name" id="ContactForm1-contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/> <label for="name">Name</label> </div>
<div class="email"> <input class="c-form-email" id="ContactForm1-contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/> <label for="email">E-mail *</label> </div>
<div style="clear: both;"></div>
<div class="message">
<textarea class="c-form-email-message" cols="25" id="ContactForm1-contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us..."> </textarea>
<div class="srbtn"> <input class="cform-button" id="ContactForm1-contact-form-submit" type="button" value="Submit" /> </div>
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"> </div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"> </div>
</div>
</form>
</div>
Output:
04. Contact Form
<style>
body {
background: linear-gradient(135deg, #1e293b, #475569);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
color: #fff;
margin: 0;
padding: 20px;
}
.tb-contact-form-widget {
max-width: 500px;
width: 100%;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
transform: translateY(0);
transition: transform 0.3s ease;
}
.tb-contact-form-widget:hover {
transform: translateY(-5px);
}
.tb-contact-form-widget::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899);
z-index: -1;
animation: gradient 6s infinite linear;
background-size: 400% 400%;
border-radius: 22px;
opacity: 0.8;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.form-group {
position: relative;
margin: 25px 0;
}
.c-form-name,
.c-form-email,
.c-form-email-message {
width: 100%;
padding: 15px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.15);
color: #fff;
outline: none;
transition: all 0.3s ease;
}
.floating-label {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
padding: 0 5px;
color: rgba(255, 255, 255, 0.6);
pointer-events: none;
transition: all 0.3s ease;
}
.c-form-name:focus ~ .floating-label,
.c-form-email:focus ~ .floating-label,
.c-form-email-message:focus ~ .floating-label,
.c-form-name:not(:placeholder-shown) ~ .floating-label,
.c-form-email:not(:placeholder-shown) ~ .floating-label,
.c-form-email-message:not(:placeholder-shown) ~ .floating-label {
top: 0;
font-size: 0.8rem;
color: #8b5cf6;
background: rgba(255, 255, 255, 0.1);
}
.c-form-name:focus,
.c-form-email:focus,
.c-form-email-message:focus {
border-color: #8b5cf6;
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
background: rgba(255, 255, 255, 0.2);
}
.c-form-email-message {
height: 120px;
resize: none;
}
.srbtn {
display: flex;
gap: 15px;
margin-top: 30px;
}
.cform-button,
.btn-reset {
flex: 1;
padding: 15px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cform-button {
background: linear-gradient(45deg, #6366f1, #8b5cf6);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-reset {
background: linear-gradient(45deg, #ef4444, #f97316);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cform-button:hover,
.btn-reset:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.cform-button::after,
.btn-reset::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.1);
transform: rotate(45deg);
transition: all 0.5s ease;
}
.cform-button:hover::after,
.btn-reset:hover::after {
left: 120%;
}
.b-social-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0 0;
padding: 0;
}
.b-social-buttons li {
list-style: none;
transition: transform 0.3s ease;
}
.b-social-buttons li:hover {
transform: translateY(-3px);
}
.b-social-buttons a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 50px;
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.b-social-button-1 { background: rgba(29, 161, 242, 0.2);
border-radius: 50px;}
.b-social-button-2 { background: rgba(24, 119, 242, 0.2);
border-radius: 50px;}
.b-social-button-3 { background: rgba(255, 0, 0, 0.2);
border-radius: 50px;}
.b-social-buttons a:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.contact-form-error-message,
.contact-form-success-message {
padding: 15px;
border-radius: 10px;
margin: 20px 0;
display: none;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
h3 {
text-align: center;
margin: 30px 0 20px;
position: relative;
}
h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: #8b5cf6;
}
@media (max-width: 640px) {
.tb-contact-form-widget {
padding: 1.5rem;
}
.srbtn {
flex-direction: column;
}
.b-social-buttons {
flex-direction: column;
}
.b-social-buttons a {
justify-content: center;
}
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<div class="tb-contact-form-widget">
<form name="contact-form">
<div class="form-group">
<input class="c-form-name" name="name" type="text" placeholder=" " />
<label class="floating-label"><i class="fa-solid fa-user"></i> Your Name</label>
</div>
<div class="form-group">
<input class="c-form-email" name="email" type="email" placeholder=" " required />
<label class="floating-label"><i class="fa-solid fa-envelope"></i> E-mail Address *</label>
</div>
<div class="form-group">
<textarea class="c-form-email-message" name="email-message" placeholder=" " required></textarea>
<label class="floating-label"><i class="fa-solid fa-comment"></i> Message *</label>
</div>
<div class="srbtn">
<button class="cform-button" type="submit">Submit</button>
<button type="reset" class="btn-reset">Clear</button>
</div>
<h3>Follow Us</h3>
<ul class="b-social-buttons">
<li class="b-social-button-1"><a href="#"><i class="fa-brands fa-twitter"></i>Twitter</a></li>
<li class="b-social-button-2"><a href="#"><i class="fa-brands fa-facebook-f"></i>Facebook</a></li>
<li class="b-social-button-3"><a href="#"><i class="fa-brands fa-youtube"></i>YouTube</a></li>
</ul>
</form>
</div>
Output:
05. Contact Form
<style>
.contact-form-widget {
margin: 2rem auto;
width: 100%;
max-width: 600px;
padding: 2rem;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
hr {
height: 2px;
border: 0;
background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
margin: 0 0 2rem 0;
opacity: 0.8;
}
.contactf-name,
.contactf-email {
display: inline-block;
width: calc(50% - 8px);
margin-bottom: 1rem;
}
.contactf-name {
margin-right: 16px;
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8fafc;
color: #1e293b;
}
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
background: #ffffff;
}
.contact-form-name:hover,
.contact-form-email:hover,
.contact-form-email-message:hover {
border-color: #c7d2fe;
}
.contact-form-email-message {
height: 120px;
resize: vertical;
}
.contact-form-button-submit {
width: 100%;
padding: 16px;
margin: 1rem 0;
background: #6366f1;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-form-button-submit:hover {
background: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.contact-form-button-submit:active {
transform: translateY(0);
box-shadow: none;
}
.contact-form-error-message {
color: #dc2626;
padding: 8px 0;
font-size: 14px;
}
.contact-form-success-message {
color: #16a34a;
padding: 8px 0;
font-size: 14px;
}
@media (max-width: 640px) {
.contactf-name,
.contactf-email {
width: 100%;
margin-right: 0;
}
.contact-form-widget {
padding: 1.5rem;
border-radius: 12px;
}
}
</style>
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<hr>
<div class="form">
<form name="contact-form">
<div class="contactf-name"><input class="contact-form-name" id="ContactForm1-contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'/></div>
<div class="contactf-email"><input class="contact-form-email" id="ContactForm1-contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div>
<div style="clear:both"></div>
<div class="contactf-message">
<textarea class="contact-form-email-message" cols="25" id="ContactForm1-contact-form-email-message" name="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1-contact-form-submit" type="button" value="Send Message" />
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"></div>
</div>
</form>
</div>
</div>
</div>
Output:
06. Contact Form
<style>
.contact-form-widget {
margin: 3rem auto;
width: 100%;
max-width: 600px;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(0);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-form-widget:hover {
transform: translateY(-4px);
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.12);
}
.contact-title {
text-align: center;
font: 600 2.5rem 'Inter', sans-serif;
margin-bottom: 2.5rem;
letter-spacing: -1px;
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.contactf-name,
.contactf-email {
position: relative;
width:100%;
margin-bottom: 1.5rem;
display: inline-block;
}
.name-icon,
.email-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-120%);
z-index: 2;
color: #667eea;
font-size: 1.1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.contact-form-name:focus ~ .name-icon,
.contact-form-email:focus ~ .email-icon {
color: #764ba2;
transform: translateY(-50%) scale(1.1);
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: 100%;
padding: 14px 15px 14px 40px;
margin: 0 0 1.5rem;
border: 2px solid #e8e8e8;
border-radius: 12px;
font: 500 15px 'Inter', sans-serif;
color: #2d2d2d;
background: rgba(249, 249, 249, 0.8) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
outline: none;
border-color: #a78bfa;
box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15);
background: rgba(255, 255, 255, 0.95) !important;
}
.contact-form-email-message {
height: 150px;
resize: vertical;
padding: 18px !important;
border-radius: 16px;
}
.contact-form-button-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
width: 35%;
padding: 16px;
margin: 2rem auto 0;
border: none !important;
border-radius: 12px;
font: 600 15px 'Inter', sans-serif !important;
color: #fff !important;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.3s ease;
display: block;
text-transform: uppercase;
box-shadow: 0 4px 20px rgba(118, 75, 162, 0.2);
position: relative;
overflow: hidden;
}
.contact-form-button-submit::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.1);
transform: rotate(45deg) translate(-20%, 100%);
transition: all 0.5s ease;
}
.contact-form-button-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(118, 75, 162, 0.3);
}
.contact-form-button-submit:hover::after {
transform: rotate(45deg) translate(20%, -50%);
}
.contact-form-button-submit:active {
transform: translateY(1px);
}
.contact-form-error-message,
.contact-form-success-message {
text-align: center;
padding: 14px 20px;
font: 500 14px 'Inter', sans-serif;
border-radius: 8px;
margin: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.contact-form-error-message {
color: #dc3545;
background: rgba(220, 53, 69, 0.08);
border: 1px solid rgba(220, 53, 69, 0.15);
display: none;
}
.contact-form-success-message {
color: #28a745;
background: rgba(40, 167, 69, 0.08);
border: 1px solid rgba(40, 167, 69, 0.15);
display: none;
}
@media (max-width: 640px) {
.contactf-name,
.contactf-email {
width: 100%;
margin-right: 0;
}
.contact-form-button-submit {
width: 60%;
padding: 14px;
}
.contact-form-widget {
padding: 2rem 1.5rem;
margin: 1rem;
}
.contact-title {
font-size: 2rem;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<h2 class="contact-title">Get in touch.</h2>
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<div class="name-icon"><i class="fas fa-user"></i></div>
<input class="contact-form-name" id="ContactForm1-contact-form-name" name="Name" type="text" value="Name"
onblur='if (this.value == "") {this.value = "Name";}'
onfocus='if (this.value == "Name") {this.value = "";}' />
</div>
<div class="contactf-email">
<div class="email-icon"><i class="fas fa-envelope"></i></div>
<input class="contact-form-email" id="ContactForm1-contact-form-email" name="E-mail address" type="text" value="E-mail address"
onblur='if (this.value == "") {this.value = "E-mail address";}'
onfocus='if (this.value == "E-mail address") {this.value = "";}'/>
</div>
<div style="clear:both"></div>
<div class="contactf-message">
<textarea class="contact-form-email-message" id="ContactForm1-contact-form-email-message"
name="Type your message here..." rows="5"
onblur='if (this.value == "") {this.value = "Type your message here...";}'
onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea>
<input class="contact-form-button contact-form-button-submit"
id="ContactForm1-contact-form-submit" type="button" value="SEND MESSAGE" />
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"></div>
</div>
</form>
</div>
</div>
</div>
Output:
07. Contact Form
<style>
.widget.ContactForm {
z-index: 1;
}
.contact-form-widget {
margin: 2rem auto;
width: 600px;
max-width: 90%;
padding: 2.5rem 0;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ribbon {
font: 600 1.5rem 'Inter', sans-serif;
color: #2d2d2d;
text-align: center;
padding: 1.5rem;
margin: 0 -16px 2rem;
background: transparent;
position: relative;
}
.ribbon:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: #007bff;
border-radius: 2px;
}
.form {
width: 85%;
margin: 0 auto;
}
.contactf-name,
.contactf-email,
.contactf-message {
margin-top: 1.5rem;
color: #4a4a4a;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: 100%;
margin: 0.5rem 0 0;
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
transition: all 0.3s ease;
}
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.contact-form-email-message {
height: 120px;
resize: vertical;
}
.contact-form-button-submit {
margin-top: 2rem;
width: 100%;
padding: 1rem;
font: 600 0.95rem 'Inter', sans-serif;
color: #ffffff;
background: #007bff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-form-button-submit:hover {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}
.contact-form-button-submit:active {
transform: translateY(0);
box-shadow: none;
}
@media (max-width: 640px) {
.contact-form-widget {
padding: 1.5rem 0;
border-radius: 12px;
}
.ribbon {
font-size: 1.2rem;
padding: 1rem;
}
.form {
width: 90%;
}
}
</style>
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2>
<div class="form">
<form name="contact-form">
<div class="contactf-name">Your name:<input class="contact-form-name" id="ContactForm1-contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /></div>
<div class="contactf-email">E-mail address *:<input class="contact-form-email" id="ContactForm1-contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div>
<div style="clear:both"></div>
<div class="contactf-message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1-contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1-contact-form-submit" type="button" value="SEND MESSAGE" />
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"></div>
</div>
</form>
</div>
</div>
</div>
Output:
08. Contact Form
<style>
.form {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
background: #f8f9fa;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.contact-form-name,
.contact-form-email,
.contact-form-subject,
.contact-form-country,
.contact-form-email-message {
width: 100%;
padding: 1rem;
margin: 0.5rem 0;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 16px;
color: #2d3436;
transition: all 0.3s ease;
box-sizing: border-box;
}
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-subject:focus,
.contact-form-country:focus,
.contact-form-email-message:focus {
outline: none;
border-color: #4dabf7;
box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.25);
}
.contact-form-name:hover,
.contact-form-email:hover,
.contact-form-subject:hover,
.contact-form-country:hover,
.contact-form-email-message:hover {
border-color: #adb5bd;
}
.contact-form-email-message {
height: 150px;
resize: vertical;
}
.contact-form-button {
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-family: 'Segoe UI', system-ui, sans-serif;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 1rem 0.5rem 0 0;
}
.contact-form-button[type='reset'] {
background: #f1f3f5;
color: #495057;
}
.contact-form-button[type='reset']:hover {
background: #e9ecef;
}
#ContactForm1-contact-form-submit {
background: linear-gradient(135deg, #4dabf7 0%, #339af0 100%);
color: white;
}
#ContactForm1-contact-form-submit:hover {
background: linear-gradient(135deg, #339af0 0%, #228be6 100%);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
}
.contact-form-error-message,
.contact-form-success-message {
padding: 1rem;
margin: 1rem 0;
border-radius: 8px;
font-family: 'Segoe UI', system-ui, sans-serif;
}
.contact-form-error-message {
background: #ffe3e3;
color: #ff6b6b;
}
.contact-form-success-message {
background: #d3f9d8;
color: #40c057;
}
input::placeholder,
textarea::placeholder {
color: #adb5bd;
opacity: 1;
}
input:focus::placeholder,
textarea:focus::placeholder {
color: #ced4da;
}
</style>
<div class="form">
<form name="contact-form">
<input class='contact-form-name' id='ContactForm1-contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<input class='contact-form-email' id='ContactForm1-contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<input class='contact-form-subject' id='ContactForm1-contact-form-email' name='subject' value="Subject" size='30' type='text' onblur='if (this.value == "") {this.value = "Subject";}' onfocus='if (this.value == "Subject") {this.value = "";}'/>
<p></p>
<input class='contact-form-country' id='ContactForm1-contact-form-email' name='Country' value="Country" size='30' type='text' onblur='if (this.value == "") {this.value = "Country";}' onfocus='if (this.value == "Country") {this.value = "";}'/>
<p></p>
<textarea class="contact-form-email-message" id="ContactForm1-contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' type='reset' value='Clear'/>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1-contact-form-submit" type="button" value="Send" /> <br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"> </div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"> </div>
</div>
</form>
</div>
Output:
09. Contact Form
<style>
.contact-form-widget {
max-width: 600px;
margin: 3rem auto;
padding: 2.5rem;
background: linear-gradient(145deg, #f8f9ff 0%, #f5f7ff 100%);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.contact-form-widget::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 180deg, transparent 20%, #6366f1 50%, transparent 80%);
animation: rotate-border 8s linear infinite;
z-index: 0;
}
@keyframes rotate-border {
100% { transform: rotate(360deg); }
}
.form {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
}
.form-name,
.form-email {
width: 100%;
margin-bottom: 1.5rem;
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: 100%;
padding: 1rem;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.9);
position: relative;
}
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
border-color: #6366f1;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
background: white;
}
.contact-form-email-message {
height: 140px;
resize: none;
}
.contact-form-button-submit {
width: 100%;
padding: 1rem 2rem;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.contact-form-button-submit::after {
content: '→';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.contact-form-button-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.contact-form-button-submit:hover::after {
right: 20px;
}
.form-name label,
.form-email label,
.form-message label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #1f2937;
transition: all 0.3s ease;
}
.form-name:hover label,
.form-email:hover label,
.form-message:hover label {
color: #6366f1;
transform: translateX(5px);
}
@media (min-width: 768px) {
.form-name,
.form-email {
width: calc(50% - 1rem);
}
.form-name {
margin-right: 2rem;
}
}
.contact-form-error-message {
color: #ef4444;
font-size: 14px;
margin-top: 1rem;
padding: 0.5rem;
background: #fef2f2;
border-radius: 6px;
display: none;
}
.contact-form-success-message {
color: #10b981;
font-size: 14px;
margin-top: 1rem;
padding: 0.5rem;
background: #ecfdf5;
border-radius: 6px;
display: none;
}
.contact-form-widget::after {
content: '';
position: absolute;
bottom: -30%;
right: -30%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
pointer-events: none;
}
</style>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="form-name"> Your Name: <input class="contact-form-name" id="ContactForm1-contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="form-email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1-contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;"> </div>
<div class="form-message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1-contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1-contact-form-submit" type="button" value="Submit" /> <br />
<div class="contact-form-error-message" id="ContactForm1-contact-form-error-message"> </div>
<div class="contact-form-success-message" id="ContactForm1-contact-form-success-message"> </div>
</div>
</form>
</div>
</div>
Output:
10. Contact Form
<style>
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--secondary: #f8fafc;
--text: #1e293b;
--muted: #64748b;
}
#contact-form-heading-container {
margin: 4rem auto 2rem;
max-width: 600px;
text-align: center;
padding: 0 1rem;
}
#contact-form-heading {
font-size: 2.75rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 800;
letter-spacing: -0.025em;
}
#contact-form-description {
color: var(--muted);
font-size: 1.125rem;
line-height: 1.75;
max-width: 480px;
margin: 0 auto;
}
.contact-form-widget {
margin: 2rem auto;
width: 100%;
max-width: 600px;
padding: 2.5rem;
background: #ffffff;
border-radius: 1.5rem;
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
border: 1px solid #e2e8f0;
}
.contactf-name input,
.contactf-email input,
.contactf-message textarea,
#ContactForm1_contact-form-email-message {
width: 100%;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
font-size: 1rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
color: var(--text);
line-height: 1.5;
}
.contactf-name input:focus,
.contactf-email input:focus,
.contactf-message textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
outline: none;
}
.contactf-name input:placeholder-shown,
.contactf-email input:placeholder-shown,
.contactf-message textarea:placeholder-shown {
border-color: #cbd5e1;
}
.contact-form-button-submit {
width: 100%;
padding: 1rem 2rem;
background: var(--primary);
color: white !important;
border: none;
border-radius: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.contact-form-button-submit:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}
.contact-form-button-submit:active {
transform: translateY(0);
}
.contact-form-error-message,
.contact-form-success-message {
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-radius: 0.75rem;
display: none;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.contact-form-error-message {
background: #fee2e2;
color: #dc2626;
border: 1px solid #fca5a5;
}
.contact-form-success-message {
background: #dcfce7;
color: #16a34a;
border: 1px solid #86efac;
}
@media (max-width: 640px) {
.contact-form-widget {
padding: 1.5rem;
margin: 1rem;
border-radius: 1rem;
}
#contact-form-heading {
font-size: 2rem;
}
#contact-form-description {
font-size: 1rem;
}
}
@keyframes button-loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-form-button-submit.loading {
position: relative;
pointer-events: none;
}
.contact-form-button-submit.loading::after {
content: "";
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: button-loading 0.8s linear infinite;
position: absolute;
right: 1rem;
}
</style>
<div id="contact-form-heading-container">
<h1 id="contact-form-heading">Contact Us</h1>
<p id="contact-form-description">For all enquiries, please email us using the form below.</p>
</div>
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" placeholder="Your name" required />
</div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="email" placeholder="your@email.com" required />
</div>
<div class="contactf-message">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="How can we help you?" required></textarea>
</div>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="submit" value="Send Message" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form>
</div>
</div>
</div>
Output:
11. Contact Form
<style>
:root {
--primary: #4f46e5;
--secondary: #f0f4ff;
--accent: #818cf8;
--text: #1e1b4b;
--glass: rgba(255,255,255,0.9);
}
#contact-form-heading-container {
margin: 5rem auto 3rem;
max-width: 680px;
text-align: center;
padding: 0 1.5rem;
}
#contact-form-heading {
font-size: 3rem;
color: var(--text);
margin-bottom: 1.25rem;
font-weight: 800;
background: linear-gradient(to right, #4f46e5, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#contact-form-description {
color: #64748b;
font-size: 1.125rem;
line-height: 1.75;
max-width: 560px;
margin: 0 auto;
}
.contact-form-widget {
margin: 2.5rem auto;
width: 100%;
max-width: 680px;
padding: 2.5rem 3rem;
background: var(--glass);
border-radius: 2rem;
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 8px 32px rgba(79,70,229,0.1);
}
.contactf-name input,
.contactf-email input,
.contactf-message textarea {
width: 100%;
padding: 1.25rem 1.75rem;
margin-bottom: 1.75rem;
border: 2px solid #e0e7ff;
border-radius: 1rem;
font-size: 1.05rem;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255,255,255,0.8);
color: var(--text);
}
.contactf-name input:focus,
.contactf-email input:focus,
.contactf-message textarea:focus {
border-color: var(--accent);
box-shadow: 0 4px 24px rgba(79,70,229,0.12);
background: white;
}
.contact-form-button-submit {
width: 100%;
padding: 1.25rem 2rem;
background: var(--primary);
color: white !important;
border: none;
border-radius: 1rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.contact-form-button-submit:hover {
background: #4338ca;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(79,70,229,0.25);
}
.contact-form-button-submit::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
}
.contact-form-button-submit:hover::after {
animation: button-shine 1.5s ease infinite;
}
@keyframes button-shine {
0% { left: -50%; }
100% { left: 150%; }
}
.contact-form-error-message {
background: #fff0f0;
color: #dc2626;
border: 1px solid #fecaca;
}
.contact-form-success-message {
background: #f0fff4;
color: #16a34a;
border: 1px solid #a7f3d0;
}
@media (max-width: 768px) {
.contact-form-widget {
padding: 2rem;
margin: 1.5rem;
border-radius: 1.5rem;
}
#contact-form-heading {
font-size: 2.25rem;
}
}
.contactf-name,
.contactf-email,
.contactf-message {
position: relative;
}
.contactf-name input:not(:placeholder-shown),
.contactf-email input:not(:placeholder-shown),
.contactf-message textarea:not(:placeholder-shown) {
padding-top: 1.75rem;
padding-bottom: 0.75rem;
}
.contactf-name label,
.contactf-email label,
.contactf-message label {
position: absolute;
top: 1rem;
left: 1.75rem;
color: var(--accent);
font-size: 0.9rem;
pointer-events: none;
transition: all 0.3s ease;
opacity: 0;
}
.contactf-name input:focus ~ label,
.contactf-email input:focus ~ label,
.contactf-message textarea:focus ~ label,
.contactf-name input:not(:placeholder-shown) ~ label,
.contactf-email input:not(:placeholder-shown) ~ label,
.contactf-message textarea:not(:placeholder-shown) ~ label {
opacity: 1;
transform: translateY(-0.5rem);
}
</style>
<div id="contact-form-heading-container">
<h1 id="contact-form-heading">Get in Touch</h1>
<p id="contact-form-description">We'd love to hear from you. Send us a message and we'll respond promptly.</p>
</div>
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" placeholder=" " />
<label>Full Name</label>
</div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="email" placeholder=" " />
<label>Email Address</label>
</div>
<div class="contactf-message">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder=" "></textarea>
<label>Your Message</label>
</div>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="submit" value="Send Message" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form>
</div>
</div>
</div>
Output:
Comments
Post a Comment