If you are using the Google Blogger platform and want to Create a Contact us page then follow this article. Here, I will show you the tips and tricks to Add a Contact form in Blogger and explain what should you include in your Contact us page.
So, Let’s start.
As you Know when you create a Website it is a must to have a contact us page where readers of your blog can contact you for any assistance and collaborations.
Contact us page gives them easy access to connect with the site owner via Contact form which can lead to Email or via social media links.
So, When ever you are creating the contact us page, Make sure to include a contact form on your Blogger website. You also need to include all of your Social Media links like Telegram, Twitter, LinkedIn, Pinterest etc.
First, let’s check how you can Add a contact form in Blogger.
How to add a contact form in Blogger?
To add a contact form in Blogger website, you need to Login to your Blogger website and Create a blank page and name it “Contact us”.
Now you need to Add the code for a contact form.
For this you need to Switch to the HTML View and paste the provided code on it.
<style>
.formInput[type=text], .formInput[type=email], .formTextarea { border: 1px solid;}
.formLabel {
display: inline-block;
font-size: medium;
margin-bottom: .5rem;
}
.formInput[type=text], .formInput[type=email], .formTextarea {
display: block;
width: 100%;
outline: 0;
padding: 15px 15px;
margin-bottom: 0px;
}
.submitBtn {
background: #343a40;
color: white;
border: none;
padding: 15px 20px;
margin-top: 10px;
text-align: center;
vertical-align: middle;
cursor: pointer;
width: 100%;
}
.submitBtn:hover {
color: #fff;
background-color: #23272b;
border-color: #1d2124;
}
</style>
<div class="container">
<form action="https://formsubmit.co/example@gmail.com" method="POST" target="_blank">
<div class="form-group">
<div class="form-row">
<div class="col">
<label class="formLabel" for="name">Name</label>
<input class="formInput" name="name" required="" type="text" />
</div>
<div class="col">
<label class="formLabel" for="email">Email</label>
<input class="formInput" name="email" required="" type="email" />
</div>
</div>
</div>
<div class="form-group">
<label class="formLabel" for="message">Message</label>
<textarea class="formTextarea" name="message" required="" rows="10"></textarea>
</div>
<button class="submitBtn" type="submit">Submit Form</button>
</form>
</div>Now you need to change the Email Address example@gmail.com with your actual email address where you want to receive the email from your readers.
Now Save and Publish the page and then you need to Activate the contact form on your Domain.
For this, Open the same contact us page and fill the form with name, Email and message and hit send button.
It will ask for verify the reCAPTCHA and submit the form.
Now the form is submitted, You need to login to your Email Account and check for the activation Email that came from FormSubmit (The Mail Service we are using here).
Just Activate the form by clicking on the button and now the form is ready to use.
Now anyone can send you email from your Website by filling the contact form.
Add Social Media Links
Once you add the contact form to your Blogger website, it’s Time to add Other Social Media Links on the same page.
For this just use the social media code just below the contact form code.
<style>
.social-icons {
display: flex;
justify-content: center;
padding: 0px 20px;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 10px;
fill: #555; /* Default icon color */
transition: fill 0.3s ease;
}
.social-icon:hover, .social-icon:focus {
fill: #0077b5; /* Highlight color on hover/focus */
}
@media (max-width: 600px) {
.social-icons {
flex-direction: row;
column-gap: 8px;
}
}
.social-icon {
margin: 5px 0; /* Adjust spacing for mobile */
}
}
</style>
<h2 style="text-align:center; margin-top: 20px;"> Connect us on Social Media </h2>
<div class="social-icons">
<a href="https://www.facebook.com/yourprofile" target="_blank">
<svg class="social-icon" fill="#000000" height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M169.5,357.6l-2.9,38.3h-39.3 v133H77.7v-133H51.2v-38.3h26.5v-25.7c0-11.3,0.3-28.8,8.5-39.7c8.7-11.5,20.6-19.3,41.1-19.3c33.4,0,47.4,4.8,47.4,4.8l-6.6,39.2 c0,0-11-3.2-21.3-3.2c-10.3,0-19.5,3.7-19.5,14v29.9H169.5z"></path> </g></svg>
</a>
<a href="https://twitter.com/yourprofile" target="_blank">
<svg class="social-icon" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path d="M256 0c141.385 0 256 114.615 256 256S397.385 512 256 512 0 397.385 0 256 114.615 0 256 0z"/><path fill="#fff" fill-rule="nonzero" d="M318.64 157.549h33.401l-72.973 83.407 85.85 113.495h-67.222l-52.647-68.836-60.242 68.836h-33.423l78.052-89.212-82.354-107.69h68.924l47.59 62.917 55.044-62.917zm-11.724 176.908h18.51L205.95 176.493h-19.86l120.826 157.964z"/></svg>
</a>
<a href="https://www.linkedin.com/in/yourprofile" target="_blank">
<svg fill="#000000" class="social-icon" viewBox="-143 145 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "></path> </g></svg>
</a>
<a href="https://www.pinterest.com/yourprofile" target="_blank">
<svg fill="#000000" class="social-icon" viewBox="-143 145 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M113,528.3 c-12.6,0-24.8-1.9-36.3-5.3c4.9-7.7,10.2-17.6,12.9-27.4c1.6-5.7,9-35.2,9-35.2c4.4,8.5,17.4,15.9,31.3,15.9 c41.2,0,69.1-37.5,69.1-87.7c0-38-32.2-73.3-81-73.3c-60.8,0-91.5,43.6-91.5,80c0,22,8.3,41.6,26.2,48.9c2.9,1.2,5.5,0,6.4-3.2 c0.6-2.2,2-7.9,2.6-10.3c0.9-3.2,0.5-4.3-1.8-7.1c-5.1-6.1-8.4-13.9-8.4-25.1c0-32.3,24.2-61.3,63-61.3c34.4,0,53.3,21,53.3,49 c0,36.9-16.3,68-40.6,68c-13.4,0-23.4-11.1-20.2-24.6c3.8-16.2,11.3-33.7,11.3-45.4c0-10.5-5.6-19.2-17.3-19.2 c-13.7,0-24.7,14.2-24.7,33.1c0,12.1,4.1,20.2,4.1,20.2s-14,59.4-16.5,69.7c-2.3,9.7-2.6,20.5-2.2,29.4 C16.5,497.8-15,452.7-15,400.3c0-70.7,57.3-128,128-128s128,57.3,128,128S183.7,528.3,113,528.3z"></path> </g></svg>
</a>
<a href="https://t.me/yourprofile" target="_blank">
<svg viewBox="0 0 24 24" fill="none" class="social-icon" ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM12.43 8.85893C11.2629 9.3444 8.93015 10.3492 5.43191 11.8733C4.86385 12.0992 4.56628 12.3202 4.53919 12.5363C4.4934 12.9015 4.95073 13.0453 5.57349 13.2411C5.6582 13.2678 5.74598 13.2954 5.83596 13.3246C6.44866 13.5238 7.27284 13.7568 7.70131 13.766C8.08996 13.7744 8.52375 13.6142 9.00266 13.2853C12.2712 11.079 13.9584 9.96381 14.0643 9.93977C14.1391 9.92281 14.2426 9.90148 14.3128 9.96385C14.3829 10.0262 14.3761 10.1443 14.3686 10.176C14.3233 10.3691 12.5281 12.0381 11.5991 12.9018C11.3095 13.171 11.1041 13.362 11.0621 13.4056C10.968 13.5034 10.8721 13.5958 10.78 13.6846C10.2108 14.2333 9.78393 14.6448 10.8036 15.3168C11.2937 15.6397 11.6858 15.9067 12.077 16.1731C12.5042 16.4641 12.9303 16.7543 13.4816 17.1157C13.6221 17.2078 13.7562 17.3034 13.8869 17.3965C14.3841 17.751 14.8308 18.0694 15.3826 18.0186C15.7033 17.9891 16.0345 17.6876 16.2027 16.7884C16.6002 14.6632 17.3816 10.0585 17.5622 8.16098C17.5781 7.99473 17.5582 7.78197 17.5422 7.68858C17.5262 7.59518 17.4928 7.46211 17.3714 7.3636C17.2276 7.24694 17.0057 7.22234 16.9064 7.22408C16.455 7.23204 15.7626 7.47282 12.43 8.85893Z"></path> </g></svg>
</a>
</div>Here, You need to change the Social Media links and Publish the page.
Key settings in Blogger Contact us page
2 Important settings left. Open your Contact us page and on the right hand side You will see an option called “Search description” where you need to write a single sentence which will show as a meta description in Google Search.
Below that you will see the Options where you can change the Readers comment. Here, it is not recommend to enable comments on contact us page. So, you can select the option “Do not allow; hide existing” and Save the page.
I hope you have Learned How to Add Contact form and Social Media links on Blogger website and Create a contact us page.
Video Tutorial
If you are a visual Leaner then you can follow this video to Learn More about How to add the Contact form in Blogger.
If you have any doubts, Feel free to Ask in the comment section. I will definitely try to help you in that. You can also Contact us through our Contact form. 👍
