Soon, bloggers realized they needed a separate page dedicated to contact form where users could send them messages and communicate. That is how the trend of contact page for blogger came.
One of our authors, Satbir has written a detailed post on how you can also add Blogger Contact Form to Separate Page on Blogger.😺 You'll find it a complete step by step guide if it is the first time you're using this contact form widget on a separate page of your blog and all other major questions are answered in this article regarding blogger contact form not working.
If you noticed adding simple contact form looks so yesterday. You need to make it beautiful, creative and attracting. That is why we are launching our own custom made contact form page for blogger and it is a premium design 💣, I swear.
We had shared a beautiful contact page design in the past, you may want to check if it fits your blog.
![Design A Professional Contact Page For Blogger [Stylish] - TwistBlogg - Premium Blogger Tutorials and Widgets](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAh1wmYwrm6p02dX15i_FWL-rpRN_lZzMFqoh_ujbdbdszrGfs4XW922v1qi2w2tBftHqiKAXxS2IYl3JWCiYOuXbleslQCMvQmLcrxVNQ7pvNFMAz6FYmncEk5faBGHGBFHBP40qy772s/w0/stylish+blogger+contact+page.jpg)
Now, lets find out how our premium contact form page looks like?
You can view it live at Codepen:
Quick note: You can share this design in your blog, but it is mandatory to link this article.
Adding Custom Contact Form Page - CSS Code
Below is the CSS code for our pro contact form page design. You might need to change font-size, font-family and some values here and there.
If you need any help in customizing, leave a comment or hit me a message.
<style>
/* Custom Contact Page for Blogger by TwistBlogg.com */
.contact-container {
margin-bottom: 20px;
}
.contact-breadcrumb {
font-weight: 600;
}
.contact-boxes,
.grid-box {
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(1, minmax(0px, 1fr))
}
.grid-box {
gap: 2rem;
-moz-box-align: center;
align-items: center
}
.contact-boxes {
gap: 1rem;
margin-top: 100px
}
.grid-buttons {
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 1rem;
margin-top: .9rem;
width: 100%
}
.cArea:not(:last-child) {
margin-bottom: 25px
}
.cArea textarea {
height: 150px
}
.cArea textarea:focus,
.cArea textarea[data-text=fl] {
height: 200px
}
input[type="text"],
input[type="email"],
textarea{
display: block;
width: 100%;
outline: 0;
background: #fff;
padding: 20px 16px;
transition: all .1s ease;
border-style: solid;
border-width: 1px;
border-image: none 100% / 1 / 0 stretch;
border-color: #DADADA;
border-radius: 10px;
font-size: 1.8rem;
}
input::placeholder,
textarea::placeholder {
color: rgba(8, 16, 43, .5);
font-size: 1.8rem
}
.cBtn {
background: 0 0;
border: 1px solid #dadadc;
cursor: pointer;
transition: all .15s ease-in 0s !important;
padding: 10px;
font-size: 2rem;
border-radius: 26px;
}
.global-button.cBtn.submit {
background: #0066ff;
border: 1px solid #0066ff;
color: #fff;
}
.global-button.cBtn.reset {
color: #000;
}
.global-title {
font-size: 6rem
}
.section-2 {
margin: 100px 0;
}
.cBox-individual {
box-sizing: border-box;
min-width: 0;
-moz-box-align: center;
align-items: center;
text-decoration: none !important;
display: flex;
flex-direction: column;
text-align: center;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: #dadada;
padding: 2rem;
color: #191924;
transition: all .15s ease-in 0s !important
}
.cBox-individual:hover {
color: #191924);
transform: translateY(-10px);
box-shadow: rgba(0, 0, 0, .25) 0 25px 50px -12px !important
}
.cBox-individual svg {
fill: none;
width: 30px;
height: 30px
}
.chat-here {
background: none !important;
}
.cBox-text-below {
display: flex;
font-size: 1.8rem;
}
.cBox-text-below svg {
width: 20px;
height: 20px;
fill: none;
margin-left: .5rem
}
.cBox-text {
font-weight: 600;
font-size: 1.8rem;
flex: 1 1 0%
}
@media screen and (min-width:1024px) {
.grid-box {
gap: 4rem !important
}
.contact-boxes {
gap: 2rem !important
}
}
@media screen and (min-width:768px) {
.grid-box {
grid-template-columns: repeat(2, minmax(0px, 1fr));
gap: 3rem
}
.contact-boxes {
grid-template-columns: repeat(3, minmax(0px, 1fr));
gap: 1.5rem
}
.telegram-icon {
fill: #000 !important
}
}
@media screen and (max-width: 1280px) {
.global-title {
font-size: 5.5rem;
}
}
@media screen and (max-width: 768px) {
.global-title {
font-size: 4.8rem;
}
}
@media screen and (max-width:500px) {
.fix-grid {
grid-template-columns: repeat(1, minmax(0px, 1fr));
}
.cArea.name-field {
margin-bottom: 0
}
.cArea.email-field {
margin-bottom: 10px
}
.global-title {
font-size: 3.4rem;
}
}
</style>Adding Professional Contact Form Page - HTML
Paste following HTML code in your static page and get started with this premium design of contact form page. Change the texts and link values. Also, you need to change form input fields values.
Follow this guide on how you can make contact form working:
<div class="contact-container">
<div class="grid-box">
<div class="section1">
<p class="contact-breadcrumb">Contact</p>
<h2 class="global-title">Discuss Your Blog Needs Today.</h2>
<p>Let’s figure out how you can supercharge your blog, and get the most out of it. We happily reply to everyone!<br /><br />Email us at <a href="mailto:hello@xxxx.com" rel="nofollow noopener noreferrer" target="_blank">hello@xxxx.com</a> or fill in the form.</p>
</div>
<script type="text/javascript">
var submitted = false;
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted) {window.location='#your_redirection_link';}" style="display: none;"></iframe>
<form name="cForm" action="#" method="post" onsubmit="submitted=true;" target="hidden_iframe">
<div class="grid-buttons fix-grid">
<div class="cArea name-field">
<input autocomplete="off" class="cInpt cName" id="ContactForm1_contact-form-name" aria-label="Enter your name" placeholder="Name" name="entry.xxxx" type="text" required='required' />
</div>
<div class="cArea email-field">
<label>
<input autocomplete="off" aria-label="enter your email address" class="cInpt cMail" placeholder="Enter your Email" id="ContactForm1_contact-form-email" name="emailAddress" type="email" required='required' />
</label>
</div>
</div>
<div class="cArea">
<label>
<textarea autocomplete="off" placeholder="Write your message" aria-label="Your message" required='required' class="cInpt cMsg" id="ContactForm1_contact-form-email-message" name="entry.xxxx" rows="3" type="message"></textarea>
</label>
</div>
<div class="grid-buttons">
<input class="global-button cBtn submit" id="ContactForm1_contact-form-submit" type="submit" value="Send" />
<input class="global-button cBtn reset" type="reset" value="Clear" />
</div>
<small style="font-size: 1.4rem;line-height: 1;display: block;width: 100%;margin-top: 2.5vh;opacity: .7;">All fields are required.</small>
</form>
</div>
<div class="section-2">
<h2 class="global-title">Or, Start a chat Right Now !!</h2>
<p>Prefer a casual chat instead? Select your preferred messaging app to start a chat with us directly.
</p>
<div class="contact-boxes">
<a class="cBox-individual" href="https://m.me/xxxx" target="_blank">
<svg class="feather feather-facebook" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
<p class="cBox-text">Messenger</p>
<div class="cBox-text-below">
<div class="svg-icon chat-here">
Chat Here
<svg class="feather feather-arrow-right" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<line x1="5" x2="19" y1="12" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</a>
<a class="cBox-individual" href="https://twitter.com/xxxx" target="_blank">
<svg class="feather feather-twitter" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
<p class="cBox-text">@TwistBlogg</p>
<div class="cBox-text-below">
<div class="svg-icon chat-here">
Chat Here
<svg class="feather feather-arrow-right" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<line x1="5" x2="19" y1="12" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</a>
<a class="cBox-individual" href="https://t.me/xxxxx" target="_blank">
<svg class="telegram-icon" height="50px" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 50 50" width="50px" xmlns="http://www.w3.org/2000/svg">
<path d="M 44.376953 5.9863281 C 43.889905 6.0076957 43.415817 6.1432497 42.988281 6.3144531 C 42.565113 6.4845113 40.128883 7.5243408 36.53125 9.0625 C 32.933617 10.600659 28.256963 12.603668 23.621094 14.589844 C 14.349356 18.562196 5.2382813 22.470703 5.2382812 22.470703 L 5.3046875 22.445312 C 5.3046875 22.445312 4.7547875 22.629122 4.1972656 23.017578 C 3.9185047 23.211806 3.6186028 23.462555 3.3730469 23.828125 C 3.127491 24.193695 2.9479735 24.711788 3.015625 25.259766 C 3.2532479 27.184511 5.2480469 27.730469 5.2480469 27.730469 L 5.2558594 27.734375 L 14.158203 30.78125 C 14.385177 31.538434 16.858319 39.792923 17.402344 41.541016 C 17.702797 42.507484 17.984013 43.064995 18.277344 43.445312 C 18.424133 43.635633 18.577962 43.782915 18.748047 43.890625 C 18.815627 43.933415 18.8867 43.965525 18.957031 43.994141 C 18.958531 43.994806 18.959437 43.99348 18.960938 43.994141 C 18.969579 43.997952 18.977708 43.998295 18.986328 44.001953 L 18.962891 43.996094 C 18.979231 44.002694 18.995359 44.013801 19.011719 44.019531 C 19.043456 44.030655 19.062905 44.030268 19.103516 44.039062 C 20.123059 44.395042 20.966797 43.734375 20.966797 43.734375 L 21.001953 43.707031 L 26.470703 38.634766 L 35.345703 45.554688 L 35.457031 45.605469 C 37.010484 46.295216 38.415349 45.910403 39.193359 45.277344 C 39.97137 44.644284 40.277344 43.828125 40.277344 43.828125 L 40.310547 43.742188 L 46.832031 9.7519531 C 46.998903 8.9915162 47.022612 8.334202 46.865234 7.7402344 C 46.707857 7.1462668 46.325492 6.6299361 45.845703 6.34375 C 45.365914 6.0575639 44.864001 5.9649605 44.376953 5.9863281 z M 44.429688 8.0195312 C 44.627491 8.0103707 44.774102 8.032983 44.820312 8.0605469 C 44.866523 8.0881109 44.887272 8.0844829 44.931641 8.2519531 C 44.976011 8.419423 45.000036 8.7721605 44.878906 9.3242188 L 44.875 9.3359375 L 38.390625 43.128906 C 38.375275 43.162926 38.240151 43.475531 37.931641 43.726562 C 37.616914 43.982653 37.266874 44.182554 36.337891 43.792969 L 26.632812 36.224609 L 26.359375 36.009766 L 26.353516 36.015625 L 23.451172 33.837891 L 39.761719 14.648438 A 1.0001 1.0001 0 0 0 38.974609 13 A 1.0001 1.0001 0 0 0 38.445312 13.167969 L 14.84375 28.902344 L 5.9277344 25.849609 C 5.9277344 25.849609 5.0423771 25.356927 5 25.013672 C 4.99765 24.994652 4.9871961 25.011869 5.0332031 24.943359 C 5.0792101 24.874869 5.1948546 24.759225 5.3398438 24.658203 C 5.6298218 24.456159 5.9609375 24.333984 5.9609375 24.333984 L 5.9941406 24.322266 L 6.0273438 24.308594 C 6.0273438 24.308594 15.138894 20.399882 24.410156 16.427734 C 29.045787 14.44166 33.721617 12.440122 37.318359 10.902344 C 40.914175 9.3649615 43.512419 8.2583658 43.732422 8.1699219 C 43.982886 8.0696253 44.231884 8.0286918 44.429688 8.0195312 z M 33.613281 18.792969 L 21.244141 33.345703 L 21.238281 33.351562 A 1.0001 1.0001 0 0 0 21.183594 33.423828 A 1.0001 1.0001 0 0 0 21.128906 33.507812 A 1.0001 1.0001 0 0 0 20.998047 33.892578 A 1.0001 1.0001 0 0 0 20.998047 33.900391 L 19.386719 41.146484 C 19.35993 41.068197 19.341173 41.039555 19.3125 40.947266 L 19.3125 40.945312 C 18.800713 39.30085 16.467362 31.5161 16.144531 30.439453 L 33.613281 18.792969 z M 22.640625 35.730469 L 24.863281 37.398438 L 21.597656 40.425781 L 22.640625 35.730469 z"></path>
</svg>
<p class="cBox-text">Telegram</p>
<div class="cBox-text-below">
<div class="svg-icon chat-here">
Chat Here
<svg class="feather feather-arrow-right" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<line x1="5" x2="19" y1="12" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</a>
</div>
</div>
</div>Now, you have working custom contact page design in blogger. You might want to make that page full-width and hide post titles. That way you can maintain minimalist design of your contact form page. Happy Blogging 🤝🤠😺