Sunday, July 22, 2018

July 22, 2018

How to add a Contact Us page to blogger blog?

Hello Friends...!
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.

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


* - required fields

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

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

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

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


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

Thank you for reading.
Good Luck.

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

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger