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.

How to add scrolling texts or images into the blogger blog by using marquee tag?

Are you looking for what is marquee tags? or how to add scrolling images or texts into your blogger using marquee tags?

Maybe you have identified some text or images that should move or scrolling across the define section of blog or web pages in a horizontal or vertical direction or bouncing across some area. Would your interest to know how is that happening or Are you looking for how to scrolling images and text in blogger blog or other web sites?

If you are working with a blogger blog, you know that there are limited features in blogger platform than other blogging platforms. But by using HTML codes we can solve that issue.

What is marquee tags?

Marquee tag is a tag that used for scrolling piece of text or image displayed either horizontally or vertically dawn in your blog/web page. simply that marquee element used to insert a scrolling area of text or images in your blog/web page.

For scrolling images or text in the blog or web pages we can use ‘<marquee> tag’. That marquee tag used to move or scroll text and images across a section of a blog or web page in a horizontal or vertical direction or bouncing across some area. 

Before we discuss, you should know that the ‘<marquee> tag’ is Obsolete and most of the time should not be used because of unexpected results in using, limited support from the web browsers or by using the CSS or JavaScript we can create similar effects. But don’t worry still we can use that code to scrolling image or text without any issues. 

By using marquee tag you can do much more things rather than the scrolling images or text, also you can create bouncing text/images, slide in images, slow and/or fast scrolling and much more.


<marquee ……… </marquee>, that is the basic marquee tag code. By written more Attributes into that code we can customize our marquee tag as we wish.


Below are some attributes that help to do more customization of our marquee tag.

Behavior

Sets how the text or image is scrolled within the marquee. Most possible values are scroll, slide, and alternate. If there is no value is specified, the default value is a scroll.

bgcolor

Sets the background color through color name or hexadecimal value of the marquee.

direction

Sets the direction of the scrolling of image or text within the marquee. Possible values are left, right, up and down. If there is no value is specified, the default value is left.

width   

Sets the width in pixels or percentage value of the marquee.

height

Sets the height in pixels or percentage value of the marquee.

hspace

Sets the horizontal margin around the marquee.

loop

Sets the number of times the marquee will scroll. If there is no value is specified the default value is -1, which means the marquee will scroll continuously.

scrollamount

Sets how far to jump as it moves. That sets the amount of scrolling at each interval in pixels. If there is no value is specified, the default value is 6.

scrolldelay

Sets How long the marquee should wait before each jump? That sets the interval between each scroll movement in milliseconds. If there is no value is specified, the default value is 85.

* Any value smaller than 60 is ignored and the value 60 is used instead unless true speed is specified.

truespeed

By default, scroll delay values lower than 60 are ignored. If true speed is present, those values are not ignored.

vspace

Sets the vertical margin in pixels or percentage value around the marquee.

How to add scrolling images into blogger blog using marquee tag?

     

  1.   Log into your Blogger blog account -->> Go to Dashboard __>> new post __>> click on HTML tab to open Html mode or, Go to Layout __>>Add widget -->> HTML/Java Script   __>>copy paste your marquee code __>> Save/ Publish.

Below the example of customizing marquee code with the live demo.

<marquee direction="right" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>

Add Scrolling Text into blogger using marquee tag

Scroll from left to right

<marquee direction="right" >Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here

Scroll alternatively. With attribute behavior that bouncing back and forth

<marquee behavior="alternate" >Hi There! Your scrolling text here</marquee>

Continuous scrolling

<marquee behavior="scroll" direction="left" >Hi There! Your scrolling text here</marquee>

Scrolling upwards

<marquee direction="up" >Hi There! Your scrolling text here</marquee>

Scrolling downwards

<marquee direction="down" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>

Scrolling from the top down alternative that bouncing up and dawn

<marquee direction="up" behavior="alternate" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>

Bouncing text

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> Hi There! Your scrolling text will bounce</marquee></marquee>

Change the Scrolling speed

<marquee behavior="scroll" direction="left" scrollamount="1"Hi There! Your scrolling text here</marquee>

<marquee behavior="scroll" direction="left" scrollamount="10">Hi There! Your scrolling text here</marquee>

<marquee behavior="scroll" direction="left" scrollamount="20">Hi There! Your scrolling text here</marquee>

On a Background scroll

<font color="WHITE"><marquee direction="left" style="background:RED">TEXT</marquee></font>

<marquee style="border:RED 3px SOLID">TEXT</marquee>

Add Scrolling images into blogger using marquee tag.

Scrolling both images and Texts

<marquee>Your scrolling text here<img src="YOUR-IMAGE-URL-HERE" > </marquee>

Scrolling left

<marquee behavior="scroll" direction="left" >

<img src=" YOUR-IMAGE-URL-HERE “>

</marquee>

Scrolling up

<marquee direction="up">

<img src=" YOUR-IMAGE-URL-HERE "/>

</marquee>

There are a few numbers of marquee codes. You can customize those codes as you wish.

By using that scrolling <marquee> tags you can easily build up simplenews ticker barinto your blogger blog.

I Hope above methods help you to add scrolling texts or images into the blogger blog by using marquee tag. And if you have any problem or know more fixes on this scrolling texts or images issue, please share with us in the comments section below.