Home
Blogger
Blogging

Two Ways To Create An Attractive Contact Page For Blogger Site

Two Ways To Create An Attractive Contact Page For Blogger Site

Blogger.com by default provides a contact form that is located at the sidebar, but most of the users aren't satisfied with it because it doesn't provide us with a professional experience.

So, I was looking for a custom Contact Form for my blog, but I didn't find any good ideas about making a good custom contact form. But I didn't break down and after few days I found 2 ways to create a custom Contact Form which are really cool I think.

On today, I gonna tell you about those 2 ways how can you create an attractive Contact form for your Blogger Site.

Why Every Blogger Site Needs A Contact Us Page?

To become a good Blogger, you need to provide a good experience to your Blogger Site. If someone has any query related to your blog/ blog post then they can ask you directly by using your Contact Us page. The benefits of having a Contact Us page is given below-
  • Deep relation between you and your blog post reader.
  • Help to lead generation.
  • To know the problem facing your reader in your blog.
  • Connect with brands sponsors.

How To Create A Custom Contact Form For Blogger Site?

First, you need to follow the below steps to create a Contact Us form. The steps are given below-
  • Open your Blogger Dashboard > click on Pages.
  • Then click on + New Page and give a title (e.g. Contact Us).
  • Now find the Pencil icon and switch it to HTML View.
  • Page settings> Options> Check Do not allow, hide existing.
Now I'm giving you the HTML code for the Contact Us form.
<div class='ContactForm' id='ContactForm1'><form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div>
    <div class='notif-area'>
      <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>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6086676692815096220';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6086676692815096220','//median-ui.blogspot.com/','6086676692815096220');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '6086676692815096220', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
  • Copy the above code and change all the highlighted code with your Blogger Theme Id and blog address.
  • Paste your edited (blog Id and URL) code in HTML mode.
  • Preview and publish your page.

Note: How to find Blogger Theme Id?

  • Open Blogger Dashboard> Click on Address Bar> you will found a large number which is your blogger id.
Demo

Now, I will tell you another way which is so easy to use and also to manage. To make this Contact Us page you don't need to have coding experience, I think you all can guess that.

Yes. I'm talking about Google Form. This is one of the easiest ways to create a Contact Us page for your site.

There are some benefits you will find if you use Google form because you can see easily the response of the reader. So, you will be able to know about your readers demand or needs.

Creating Contact Us Page Using Google Forms.

Now, Let's begin. By following the below steps you will be able to create Contact Us Page. So, the steps are given below:-
  • Search for Google Forms or click here for a direct link.
  • Click the Blank button on that page.


  • Select your desired Gmail Address.
  • Give an attractive "Title" ( Contact us).
  • You can also give a Description of the page.
  • Select short answer type and > Write " Email" > Click on " Enable email collection setting"
  • Add another option click on "+" button > write " Phone".
  • Same way add another option and write "Name" > Mark as required.
  • Add another option >Select "Paragraph" type> Write "Message" > Mark as required.

Note: You can change the theme colour and font style by click on the "Theme option" icon.

Add a contact us page on Blogger Blogspot



  • Generate embed link click on Send and Copy the embed link.
  • Open Blogger dashboard> Create a new page> choose HTML mode > Paste the embedded link > Preview> Publish it.
Demo
Your Contact Us page ready and enjoy it.

Post a Comment