How To Add Contact Us Form (Contact Us Page) in Blogger?
![]() |
How To Add Contact Us Page in Blogger |
How To Add Contact Us Form (Contact Us Page) in Blogger? If you want to add Contact Us Form in your blog but you don't know how to add then don't worry about anything because today In this article, I will show you how you can add Professional Looking Contact Form (Contact Us Page) in your Blogger blog with step by step guide.
Because adding a Contact Form in Blogger is a tedious task as it does not support plugins like WordPress that's why you cannot make Professional Contact Us Page easily in Blogger But today, you are going to learn how to add Professional Looking Contact Us Page in Blogger by copying and pasting a bit of provided codes.
Having a Professional Looking Contact Us Page can take your blog to the next level.
A Contact Page Can Help You:
- Connect with your readers
- Connect with brands and sponsors
- Connect with other bloggers who might want to collaborate
- Acquire leads if you offer services
Ways To Add Contact Us Page:
I’m going to teach you 2 ways to add a Contact Us Page to Blogger. The first method is very easy you just need to copy and paste the provided codes This method is great because it’s easy to set up and you don’t have to sign up for any outside services & apps.
The second method shows you a free service that you can use to embed a custom form into your site and receive emails at any email address you want.
So, let’s get started and add a Contact Us Page to your Blogger site.
Method 1:
This method uses the default Blogger Contact Widget. But rather than placing it in the sidebar, we’re going to add it to a page for a much more professional look.
Part 1: Add Widget to Sidebar
Follow the steps given below to add a contact us gadget on your blogger site.
Step 6: If you’re using one of the newest default Blogger templates, you may see a checkbox option that says “Visible – Show contact form”. If you see this option, check it. If you don’t see this option, don’t worry about it, we will take care of this with some code.
Also Read: 10 Most Popular Recent Post Widget For Blogger
Part 2: Hide the Widget
display: none !important; }
Part 3: Add Code to Page
Step 2: Create or open your Contact Page.
Step 3: Add any content you want like a heading, image or text to the top of the page in Compose mode.
Step 4: Switch to HTML mode. Click on the HTML button.
Step 5: Paste the code below into the code window below your content.
Step 6: Code to add:
<!-- Contact Form Code -->
<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<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>
</form>
</div>
</div>
<!-- End Contact Form Code -->
Step 7: Click the Publish or Update button to save your changes.Also Read: How To Add Stylish Floating Social Media Icons In Blogger
Great, you now have a Contact Page on your Blogger site!
- I have added a bit of style to the form. You can change the submit button background and text colors if you want them to better match your site. The CSS code is annotated.
Method 2:
- 100 monthly form submissions
- 5 forms
- 1,000 monthly form views
- 500 stored forms
- JotForm branding on form
- Thank You Page creation
- Custom fields
- Choose the email for delivery
- Send an automated reply to contactees
- Custom styling
- and more!
Part 1: Create a JotForm Form
Part 2: Add Contact Form to Your Page
Step 4: Switch to HTML mode.
Step 5: Under your content, Paste The Form Code you copied.
Step 6: Click the Update or Publish button to save your page.
- Yeah, you will now have a custom form embedded in your Contact Page. Emails will be delivered to your inbox according to your settings.
0 Comments
Post a Comment