How To Add Contact Us Form (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 1: Log in to your Blogger Dashboard.
Step 2: Go to the Layout page.
Step 3: In a sidebar area, click the Add a Gadget link.
Step 4: In the Add a Gadget popup, click on Contact Form to add the Contact Form to your widget area.
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
If your widget has the “Visibility – Show contact form” option, skip this step.
Step 1: On the Blogger Dashboard, go to the Theme page.
Step 2: Click on the Edit HTML button. The theme code window will open.
Step 3: Press the [Ctrl + F] keys to open the search box in the code window.
Step 4: Search for: ]]></b:skin>
Step 5: Press the Enter key to search.
Step 6: Paste the following code right BEFORE the ]]></b:skin> code.
Step 7: Code to add:
div#ContactForm1 {
display: none !important; }
Step 8: Click the Save theme button to save your changes.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 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 -->
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:
Embed a JotForm, JotForm is an online form builder and form creator. By using JotForm you can create your Form with a drag and drop creation tool.
It is FREE up to:
- 100 monthly form submissions
- 5 forms
- 1,000 monthly form views
- 500 stored forms
- JotForm branding on form
So, if you’ve got a crazy busy Contact Form, this may not be the solution for you and you may want to stick to Method above which is totally unlimited. But if you anticipate less than 100 contacts per month, this is a great option.
It Offers Some Really Handy Features Like:
- 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
Step 1: Signup for JotForms.
Step 2: In the JotForms Dashboard, click the Create Form button.
Step 3: Choose Classic Form (all fields on one page) or Card Form (one field per page). Click the Create a Form button under the style of your choice.
Step 4: Next, choose whether you want to start from a Blank Form, Use Template, Request a Form or Import Form. I recommend using a Template.
Step 5: Choose the template that best fits your needs. There are several Contact Form options. You can always edit fields, text and style later.
Step 6: Once you select your template and click Continue, you will be able to edit a preview version of your form.
Step 7: Click the Add Form Element button if you need to add another field, more text, etc. I have added a Phone Number field in my example.
Step 8: To edit the styles of your form, click on the Blue Paint Roller Icon. You can edit colors, fonts, choose color schemes or even pick one of their pre-made themes.
Step 9: When you’re done Building your form, click on the Settings tab. Under this tab you can set Conditional Logic (show hide fields, etc.) as well as set Notifications (emails to you) plus autoresponder message to the person who contacted you.
Step 10: Under Settings, you can also integrate your form with services like MailChimp and add a Thank You page (great idea!).
Step 11: Once your Settings are complete, it’s time to Publish your form. Click on the Publish tab.
Step 12: Click on the Platforms tab on the left side of the page.
Step 13: You will find an option for Blogger.
Step 14: The embed code will be displayed. Click anywhere in the Code Box and Select all the Code and Copy the Form Code.
Part 2: Add Contact Form to Your Page
Step 1: In the Blogger Dashboard, go to the Pages page.
Step 2: Click on the page you wish to edit.
Step 5: Under your content, Paste The Form Code you copied.
- Yeah, you will now have a custom form embedded in your Contact Page. Emails will be delivered to your inbox according to your settings.
You Now Have a Contact Page on Blogger!
Having a dedicated Contact Page makes your blog look more professional and also makes it easier for your readers, potential sponsors and others to contact you.
Important Tip – Turn off the comments for your contact us page and make sure you add it to your menu so that it is easily accessible.
I hope this Article was helpful to you. You would also like to read about the Top 5 Famous Bloggers in Pakistan and What Is Blogging In Urdu/Hindi? - How To Start Blogging in 2019
Don’t forget to share this post with your blogger friends and also leave a comment below sharing your thoughts.
Happy Blogging!
Post a Comment