Hello to all! Have you ever thought about the "contact us" page on your site?
Let me explain why this is very important.
A Contact Us page is essential for any business website. It is a direct
channel through which customers or potential customers can communicate with
you. This page usually contains important information about your business,
such as your address, phone number, and email.
A Contact Us page not only adds legitimacy to your website, but also improves
customer support, which can lead to additional revenue. If you haven't
already, add a Contact Us page to your website immediately! It's definitely
worth it.
Now I'm going to show you how to create a stylish contact form for your
Blogger site using HTML. Just copy and paste the code in HTML mode, and
you\'re ready to go for free, for a lifetime!
Create Contact Us Form for Blogger Step by step Process:
To create a Contact Us form for Blogspot, follow these step-by-step
instructions:
1. Login to Your Blogger Account: Go to
www.blogger.com and
sign in with your Google account credentials.
2. Access the Dashboard: Once logged in, you'll be directed to your
Blogger dashboard.
3. Navigate to the Page: Open the page where you want to add the
contact form. You can either create a new page or edit an existing one.
4. Switch to HTML Mode: In the Blogger editor, switch to HTML mode.
This allows you to directly edit the HTML code of your page.
5. Insert the HTML Code: Copy the following HTML code for the contact
form and paste it into the HTML editor:
<div class="my-contact-form">
<form
action="https://formsubmit.co/youremail@email.com"
method="POST"
id="contact-form"
>
<div>
<label class="my-contact-form-label" for="name">Name:</label>
<input class="my-contact-form-input" type="text" id="name" name="name" required />
</div>
<div>
<label class="my-contact-form-label" for="email">Email:</label>
<input class="my-contact-form-input" type="email" id="email" name="email" required />
</div>
<div>
<label class="my-contact-form-label" for="message">Message:</label>
<textarea class="my-contact-form-input" id="message" name="message" required></textarea>
</div>
<input type="hidden" name="_captcha" value="false" />
<input type="hidden" name="_template" value="table" />
<input
type="hidden"
name="_next"
value="https://www.bloggerboosted.com/"
/>
<button class="my-contact-form-btn" type="submit">Send</button>
</form>
</div>
<style>
.my-contact-form{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.my-contact-form form{
width: 100%
}
.my-contact-form-label{
display: block;
font-weight: 600;
font-size: 16px;
color: #07074d;
margin: 12px 0;
}
.my-contact-form-input{
width: 100%;
padding: 12px 0px !important;
text-indent: 10px !important;
border-radius: 6px !important;
border: 1px solid #e0e0e0 !important;
background: white !important;
font-weight: 500 !important;
font-size: 16px !important;
color: #6b7280 !important;
outline: none !important;
resize: none !important;
}
.my-contact-form-input:focus{
border-color: #6a64f1 !important;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important;
}
.my-contact-form-btn {
text-align: center;
font-size: 16px;
border-radius: 6px;
padding: 14px 32px;
border: none;
font-weight: 600;
background-color: #6a64f1;
color: white;
width: 100%;
cursor: pointer;
margin-top: 12px;
}
.my-contact-form-btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
</style>
6. Replace youremail@email.com: Now Find
'action="https://formsubmit.co/youremail@email.com"' and change
youremail@email.com and replace with your Email.
7. Save and Publish: Once you've inserted the code and replaced the
endpoint, save your changes and publish the page.
That's it! Your Contact Us form should now be live on your Blogspot website.
Users can fill out the form, and their submissions will be sent to your
email address.