Two ways to create an attractive Contact Us page for Blogger/Blogspot Blog - Texhtok



Blogger.com by Default offers bloggers a contact form widget visible on the sidebar, but almost every users are not satisfied with it because using the sidebar widget as your main contact form does not provide a professional experience for your site.

I was in this situation while setting up this blog, and made several searches online for a custom Contact page for my blog, but I did not find any good info. Although I found some ideas, those ideas did not really give me what I want because those ideas requires me to modify the HTML code on my Blogger Theme.

After a lot of research, I found the two best ideas to create a contact me page for my blogger blog.

Read More About Top 5 Python Frameworks 2022

So today, I'm going to share with you these two amazing ideas that you can use when creating a custom Contact page. After following these two ideas, you could create an actionable contact form without a writing a single code on the blogger HTML/XML theme.

Why is a Contact Us page important for all bloggers?

For ensuring that your site is of high quality, you need to offer your users a better user experience on your site. When someone has any specific query that is related to your blog or your blog post, then they will most probably want to ask you directly by reaching you from the Contact Us page. Also, a contact us page can provide-

  1. Better relation with your readers.
  2. Link between brands and sponsors.
  3. Help you with lead generation.
  4. Collect the email list.

How to create a custom Contact Us page on Blogger/Blogspot?

First, I will show you the number one method to use when creating a contact section through HTML code (this is my favourite as you do not need to change the theme).

Creating a contact us page With HTML code



  • Open up your Blogger dashboard>Click on Pages.


  • Create a new page and enter a title for it (Contact Us or anything title that you prefer).

This HTML code form is an official Blogger Contact Form.

<div class='ContactForm'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Your 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 it' /></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'] = '263623292419730910';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d263623292419730910','//www.texhtok.co/',' 263623292419730910');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 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': '263623292419730910', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

Copy the code that is above and change the site name to your own and the theme id code with your Blogger Theme Id.

  1. After you have changed the site URL and theme if from the code above, go ahead and paste your edited (blog Id and URL) code in HTML mode.
  2. Next go to your page settings> Options> Check Do not allow, hide existing comments.
  3. Preview and publish your page. Hooray!!! your contact page is set up successfully

📝Note: How to find Blogger Theme Id?

Some of you might be wondering how to get their blogger theme ID, to do that, 

Open up the Blogger Dashboard > Click on Theme> Copy URL from address bar> In the URL, you will see a larger number this is your Theme ID, copy only that numbers and set up your contact us code accordingly

Demo

Now, I'm going to show you creating a contact page through Google forms.

How to create a Contact Us Page with Google forms

This is the next way to setup a contact us page on blogspot, Google Forms is 100% free, reliable, and very easy to set up. To create a contact us page with Google forms, follow the bellow steps.

  1. Search for "Google Forms" or click here for a direct link.


  1. Click on Go to Google Forms.


  1. Choose your desired Gmail Address.
  2. Enter in an attractive "title" ( Contact us is the most popular choice).
  3. Select short answer type and > Write " Email" > Next, click on " Enable email collection setting"
  4. Add another option on Google forms by clicking on "+" button > write " Phone".
  5. In the same manner, add another option and enter in "Name" > Mark this option as required.
  6. Lastly, enter in  another option >Select "Paragraph" type> Write "Message" > Mark as this option also as required.

📝Note: You can change the theme color and font style by clicking on "Theme option" icon in Google forms

Add a contact us page on Blogger Blogspot



At this point, you are ready to add your contact us link to your blogspot site, to do that, click on "Share" then copy the embed HTML code as seen above.

Open your Blogger dashboard> Create a new page> chose HTML mode > Paste the embedded link you copied> Preview> Publish the page.

Now your Contact Us page is ready for use. You can drop a comment section if you have any issues at any point.

Read This: How To Create A Wordpress Blog For free

Previous Post Next Post