How to create Professional Contact Us Page in Blogger blog


Today in this post, I am going to tell you how to make a professional contact in blogger. Do you know that it is very important to have a contact form in your blog so that your visitors, company owners can contact you directly, if you do not want to tell your email address repeatedly to the visitors, then you add the contact form in your blog, this is very good.

The way to increase the visitors is to do a little coding setting in order to add the contact form to the blog, in this article today I am telling you the same method, if you want to create a contact form in your blog, then follow this post. 


How to Add Contact Form Page in Blogger?

$ads={2}

Step 1:

  • Go to the dashboard of your blog and click on layout.
  • Now click on Add a Widget anywhere.
  • Click on More Gadgets option.
  • Click on the Contact Form.
  • Now click on the save button.

Step 2:

  • Now go to your blog's dashboard >> Template >> Edit HTML.
  • Now click anywhere in the code box and press Ctrl + F and search for this code.
           <b: widget id = 'ContactForm1' locked = 'false' title = 'Contact Form' type = 'ContactForm'>
          Or you can click on Jump to Widget and click on ContactForm1.


Step 3:

  • Open the full code by clicking on the arrow in the left side of the code.
  • Click code arrow
  • Now delete the code between <b: includable id = 'main'> and </b: includable>.
$ads={2}

<b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>        
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>        
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>       
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>


  • If you do not understand this coding, then follow this image.

Step 4:

  • Now you ]]> </ b: skin> search this code.
  • Copy this code and paste it above ]]> </ b: skin>.

$ads={2}

/* Contact smi*/

.contact-form-widget {

margin-left:auto;

margin-right:auto;

width: 400px;

max-width: 50%;

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: 50%;

max-width: 50%;

margin-bottom: 10px;

height:30px;

padding:10px;

font-size:16px;

}

.contact-form-email-message {

width:100%;

max-width: 80%;

height:200px;

margin-bottom:10px;

padding:10px;

font-size:16px;

}

.contact-form-button-submit {

border-color: #f9f9f9;

background: #1aeb00;

color: #222;

width: 100%;

max-width: 20%;

margin-bottom: 10px;

height:30px;

font-size:16px;

}

.contact-form-button-submit:hover{

background: #f56c7e;

color: #444;

border: 2px solid #222;

}


  • Click on Save Template.

Step 5:

Now you have to make a new page, I am telling you here two types of contact forum, follow what you like.

$ads={2}

  • Click Blog's Dashboard >> Pages >> New Page.
  • Now copy this code.


<script>

var blogId = '12345678944';

var contactFormMessageSendingMsg ='Sending please wait...';

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

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

var contactFormEmptyMessageMsg ='Message 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>

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

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

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

$ads={2}

  • Click on HTML and paste the code.
  • After paste the code, set the ID of your blog instead of ID 12345678944 and publish the page.

If you face any problem in understanding this post, then you can tell me in the comment, I will be happy to help you.



Post a Comment

Please do not enter any spam link in the comment box.

Previous Post Next Post
close