How to add contact us page into blogger - The WonderSpot - Know all in one spot
Breaking News:
Loading...

How to add contact us page into blogger

Add contact us page into blogger

Are you looking for how to add contact form (contact us page) in blogger , If it is yes,that article is for you.
As we discuss in the previous posts that blogger blog platform has a limited feature when compare 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 lot of articles that can help you to success.

How to add contact us page into blogger

In some blogging flat forms Like, WordPress you can find lot of support widgets to add a contact us page. But in the blogger blog there are only one contact us widget that you can add to 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, its 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 about 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 some customization you can use it to contact the people who interested to advertising in your blog.
4.      It helps to make a professional looking of your blogger blog.
5.      Sometimes Google services like, Ad Sense require the Contact us page to approve your application. 

Then let see how to add 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 Contact us form to blogger page.

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

Sign into your blogger blog >> Go to Dashboard >> Layout >> Add a Widget >> select Contact Form >> Save. Its not a matter where you want to placed 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  of your 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 BlogId.
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 BlogID with 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 blogID with red colure text.
* E-mails that send using that form will be send to 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. it like below 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. Its not a matter where you want to placed it.

 You can place it anywhere that you like. However, its 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 you 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 send to 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 3rd 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 received e-mail from 100forms.com and you have to  create a account their. Don’t warry 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 not support to PHP codes. So you have to use the third party hosting site that help 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 in above. It will help to keep in touch with your visitors. It helps to improve your blogging.
I think now you have a better understand about how to add about us page in blogger.


For more reading THEWONDERSPOT



How to start a Blog?....................................................................>>>

All in one SEO pack for Blogger blog..................................>>>

Thank you for reading - How to add contact us page into blogger
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

Post a Comment

0 Comments