Thursday, April 16, 2020

Contact form|How to Add Contact Form or page on Blogger-Minisoft4you

Hello, Today I will tell you "How to add a contact page or form in your blogger website". its method only for the blogger not for WordPress. for WordPress you can click here.

so let's start.

Adding a contact page in a blogger having many methods, but I will tell you the most usable and easy method.
contact us form
Contact us page

Steps- Adding a contact page in blogger.

1.log in your blogger Dashboard.

First, log in to your blogger account.

2. Find a layout option in the sidebar.

when you successfully logged-in into your blogger account, you will see an option Layout - below the pages option. Click on it. it will redirect you to the blogger theme's options or layouts.

3. Add a gadget/Widget.

In a sidebar area, or bottom area where you will see an option. Click on the Add a gadget link.

after that, you will see a popup window, in this window you got many Gadgets. find a Contact form in those gadgets and click on a Plus "+" button to add this form.

4. Configure Contact Form Widget

After clicking the "+" button You will see Configure contact form widget page. here you can also change the title of this form. and click on the Save button.

finally, your contact us form added successfully on your website.

5. Create a new page.

  • Now go to the again in your blogger Dashboard.
  • Click pages option
  • Click on the New Page button. and give Contact us the title of this page.
  • Switch the compose mode into the HTML mode just clicking on the HTML button. now you will see some code into the HTML form. select All code just pressing CTRL+A. and delete this code by using the delete or Backspace button.
  • Now paste the following code on this empty page.

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="contact-form"><div class="contact section" id="contact" style="display: block;"><div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /><div style="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></div></div></div></div></div></div>

  • Now Click on the Publish button. After that, to view, this page click on view option just bellow the Contact us page title.
  • Finally, You will see the contact us form. :)
  • Now copy the URL of this contact us page from the URL-bar.
  • like
  • Now find the option of contact us in the menu bar(if an already created option )or create a new option with the name of contact us in the menu bar.

6. Create a contact us option in the menu bar.

  • Now again go to in Dashboard
  •  Go to in Layout and find the main menu or Top menu or Bottom menu Widget (it depend on you in which menu bar you want to add this option and how many menu bars having in your blogger theme.
  • Now click on edit option ( You will see it at the Top menu widget's corner)
  • Now a new window will popup (with the name of Configure Link List).
  • You will see here five options. go to the 4th option New site name, and type here Contact us.
  • now go to the 5th option New site URL, paste here the URL of the contact us page that is earlier we copied.
  • like-
  • Now click the Add link option and click on the save button to save it.
  • Now contact us option showing in the menu bar of your website or blog. Click on it just to check it.

7. Hide the Widget of the Contact form.

if you want the visibility of contact us form at the home page of your website/blog too, then remaining everything the same. if you want to hide contact us form from everywhere accept Contact us page. so keep following the below steps.

  • On the blogger dashboard, go to the Theme page.

  • Click on three points, like- " -: "
  • Choose/click on Edit HTML.
  • Press the [Control + F] keys to open the search box in the code window.
  • Search for :- ]]></b:skin>
  • Press the Enter key after type in search field ( ]]></b:skin>).
  • Paste the following code right BEFORE the ]]></b:skin> code.
  • code to add:-

div#ContactForm1 { display: none !important; }

  • Click the save button to save theme changes in the (below right corner).

Yeaaa! finally, a contact page added to your website. check it. is it working or not?

if you face any problem in the blogger designing comment below or Contact us or email us at the address:-


No comments:

Post a Comment