How to add a contact us page into blogger blog?

Are you looking for how to add a contact form (contact us page) in blogger?

As we discuss in the previous posts that blogger blog platform has a limited feature when compared with the other blogging platforms. But by using the HTML codes we can improve our blogger blog. Don’t worry for that you don’t need a professional knowledge about HTML coding. But you have to Study it some far. However, you can study about it by googling. There are a lot of articles that can help you to success.

In some blogging flat forms Like WordPress, you can find a lot of support widgets to add a contact us page. But in the blogger blog, there is only one contact us widget that you can add to the sidebar. You can add it easily by using Dashboard >> Layout >> Add a Widget >> Contact Form >> save. But with that article, we discuss how to add a particular Contact Us Form page. 

Sometimes you will think like this, why we need to add a Contact us page, it's only enough that sharing your E-mail address in your blogger blog site? Then visitors can contact us via e-mail. But remember that adding Your e-mail address to blogger blog is not a safety.


Why you need the Contact Us Form page for your Blogger blog?

1.     It helps to Readers, visitors and other parties who interested in your blogger to reach to you and communicate with you or make some inquiries or suggestions.

2.     Easy to get in touch with your audience.

3.     After doing customization you can use it to contact the people who interested in advertising in your blog.

4.     It helps to make a professional looking for your blogger blog.

5.      Sometimes Google services like Ad Sense require the Contact us page to approve your application.

How to add a contact form (contact us page) in blogger?

There are few methods to add a contact us page to your blogger. You can use your blogger contact us widget or third-party site. 

Method 01

Move to Contact us form to blogger page.

Step 01 -  You need to add contact us widget to blogger slider.

Sign into your blogger blog >> Go to Dashboard >> Layout >> Add a Widget >> select Contact Form >> Save.It’s not a matter where you want to place it. You can place it anywhere that you like. Then test it, if you can send messages? Then you can remove that widget or hide it.

If you want to hide it, please follow the below steps.

Go to Dashboard …>> Template or Theme …>> Click on Edit HTML … >> Press Ctrl + F and search for]] ></b:skin>, Then add below code Before above code …>> Save.

div#ContactForm1 {

display: none !important;

}

Step 02 – Now Find out the Unique BlogID ofyour blogger blog.

Go to dashboard and Browser any page in the Dashboard then look at the URL bar on your web browser, then you can find out your Blog Id.

That BlogID required to generate the new code of your Contact us form page.

Step 03 - Go to Dashboard >> Pages >> New Page >> name it as the Contact us >> Disable the comments >> click on HTML Mode and paste the below codes

*You want to Replace your BlogIDwith the red color Numbers.

<script>

var blogId = '8694494030520005341';//this number should be mandatorily edited.

//The below message 5 Strings can also be edited

var contactFormMessageSendingMsg ='Sending...';

var contactFormMessageSentMsg = 'Your message has been sent.';

var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';

var contactFormEmptyMessageMsg ='Message field cannot be empty.';

var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;

function sendEmailMsg() {

if(widgetLoaded== false) {

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

widgetLoaded=true;

document.getElementById('ContactForm1_contact-form-submit').click();

}

return true;

}

</script>

<form name='contact-form'>

<div>Your Name : </div>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<div>Your Email: <em>(required)</em></div>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<div>Your Message: <em>(required)</em></div>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>

<p></p>

<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>

<div style='text-align: center; max-width: 450px; width: 100%'>

<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>

<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>

</div>

</form>

* Make sure replace the Your blogIDwith red colur text.

* E-mails that send using that form will be sent to the E-mail address that associate with your account. You can change that e-mail address in the admin sitting of your blog.

OK. Finally, save your page and Publish it. Then view your new contact us page.

Click here to view demo image

Method 02

Create contact us page using contact us customize codes.

Step 01 -  You need to add contact us widget to blogger slider.

Sign into your blogger blog >> Go to Dashboard >> Layout >> Add a Widget >> select Contact Form >> save. It’s not a matter where you want to place it.

 You can place it anywhere that you like. However, it is better if you can place it in the Footer section.

Step 02 – Go to Dashboard >> Template or Theme >> Click on Edit HTML >> Press Ctrl + F and search for below code

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

Then click the down arrow again beside;

<b:includable id='main'>

Ok, then you will see this code;

<b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>

        <p/>

        <data:contactFormNameMsg/>

        <br/>

        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>

        <p/>

        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>

        <p/>

        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>

        <p/>

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>

        <p/>

        <div style='text-align: center; max-width: 222px; width: 100%'>

          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>

          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>

        </div>

      </form>

    </div>

  </div>

  <b:include name='quickedit'/>

</b:includable>

  

Now delete everything shown in red.

Step 03 - Again Press Ctrl + F and search for]] ></b:skin> and paste the below codes before it.

.contact-form-widget {

margin-left:auto;

margin-right:auto;

width: 600px;

max-width: 100%;

padding: 0px;

color: #000;

}

.fm_name, .fm_email {

float:left;

padding:5px;

width:48%

}

.fm_message {

padding:5px;

}

.contact-form-name, .contact-form-email {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

height:40px;

padding:10px;

font-size:16px;

}

.contact-form-email-message {

width:100%;

max-width: 100%;

height:100px;

margin-bottom:10px;

padding:10px;

font-size:16px;

}

.contact-form-button-submit {

border-color: #C1C1C1;

background: #E3E3E3;

color: #585858;

width: 20%;

max-width: 20%;

margin-bottom: 10px;

height:30px;

font-size:16px;

}

.contact-form-button-submit:hover{

background: #ffffff;

color: #000000;

border: 1px solid #FAFAFA;

}

Step 04 - OK. Then Save your template and Go to Dashboard >> Pages >> New Page >> name it as the Contact us >> Disable the comments >> click on HTML Mode and paste the below codes

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<div class="fm_name">

Your Name:

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>

<div class="fm_email">

E-mail Address *:

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>

<div style="clear:both">

</div>

<div class="fm_message">

Message *:

<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" />

<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>

</div>

</form>

</div>

</div>

</div>

OK. Finally, save your page and Publish it. Then view your new contact us page.

·       E-mails that send using that form will be sent to the E-mail address that associate with your account. You can change that e-mail address in the admin sitting of your blog.

Method 03

Using the 3^rd party site.

 01.   Using  100forms.com

1. Go to Dashboard >> Pages >> New Page >> name it as the Contact us >> Disable the comments >> click on HTML Mode and paste the below codes

<form action="//submit.form" id="ContactUs100" method="post" onsubmit="return ValidateForm(this);">

<script type="text/javascript">

function ValidateForm(frm) {

if (frm.Name.value == "") { alert('Name is required.'); frm.Name.focus(); return false; }

if (frm.FromEmailAddress.value == "") { alert('Email address is required.'); frm.FromEmailAddress.focus(); return false; }

if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) { alert('Please enter a valid email address.'); frm.FromEmailAddress.focus(); return false; }

if (frm.Comments.value == "") { alert('Please enter comments or questions.'); frm.Comments.focus(); return false; }

return true; }

</script>

<table style="width:550px;border:0;" cellpadding="8" cellspacing="0">

<tr> <td>

<label for="Name">Name*:</label>

</td> <td>

<input name="Name" type="text" maxlength="60" style="width:250px;" />

</td> </tr> <tr> <td>

<label for="PhoneNumber">Phone number:</label>

</td> <td>

<input name="PhoneNumber" type="text" maxlength="43" style="width:250px;" />

</td> </tr> <tr> <td>

<label for="FromEmailAddress">Email address*:</label>

</td> <td>

<input name="FromEmailAddress" type="text" maxlength="90" style="width:250px;" />

</td> </tr> <tr> <td>

<label for="Comments">Comments*:</label>

</td> <td>

<textarea name="Comments" rows="7" cols="40" style="width:350px;"></textarea>

</td> </tr> <tr> <td>

* - required fields

</td> <td>

<div style="float:right"><a href="https://www.100forms.com" id="lnk100" title="form to email">form to email</a></div>

<input name="skip_Submit" type="submit" value="Submit" />

<script src="https://www.100forms.com/js/FORMKEY:LUUC28LPBXFF/SEND:my@email.com" type="text/javascript"></script>

</td> </tr>

</table>

</form>

2.      *Replace the my@email.com with your E-mail address. After you use that you will receive e-mail from 100forms.com and you have to create an account there. Don’t worry that is a free service provider. Also, you can visit 100forms.com and create account and choice any form that you searching. Above form like below,

     

              Click here to view demo image

02. Using FreeContactForm.com, with that you have to use PHP codes. Blogger did not support to PHP codes. So you have to use the third party hosting site that helps to PHP.

If you have a good Knowledge about HTML and CSS coding, you can easily develop that codes and do some modification for that form. You can add new features for your form. That pages not affect for SEO of your blogger blog so you don’t need to worry. Add a contact form for your blogger blog by any method above. It will help to keep in touch with your visitors. It helps to improve your blogging.

I Hope above 03 methods help you to add a contact us page into your blogger blog. And if you have any problem or know more fixes on this, Please share with us in the comments section below.