Wednesday, January 28, 2015

How to Create Custom Contact Us Page Using Google Form

There are many tutorials available over the Internet which can guide you how to create a custom Contact us page . Forget that lengthy process to create contact us page for your blog which require CSS and HTML skills. In this tutorial I am going to explain you how to create a contact us page for your blog using Google Form and spreadsheet. I assure you after reading this tutorial you will never switch to contact us widget of Blogger.

View Demo Contact Us Form.

Contact Us

Creating Contact Us Page

Step 1. Login to your Google Drive account.

Step 2. Click on CREATE then click on Form.

Step 3. Enter Name of the Form as Contact Us.

Step 4. To create your first field of Contact us page. Enter Question Title as Name. Select Question Type as Text. Tick Required question option, as name will be the required field.  Click on Done.

Google Form

Step 5. Click on Add item and select Text.

Add Item Google Form

Step 6. To add your second field. Enter Question Title as Email. Select Question Type as Text. Tick Required question option, as email will be the required field.  Click on Done.

Step 7. To add third field as Message. Click Add item and select Paragraph Text. Enter Question Title as Message. Tick Required question option and click on Done.

Message box of Google form

Step 8. Your Contact Us Form is ready. You may customized your form by clicking on change theme.

Change theme of Google Form

Step 9. Click on Send form at top right corner. A send form page opens up.

Step 10. Click on Embed and copy the HTML code. The Code looks like.

You can modify the width and height of the form. In above code snippet, the width and heights are in pixels. Modify it to fit the form in your page. For My blog they are height=”760” and width=”1000”.

Enable email Notification

You can enable email notification if somebody send message using contact us.

Step 1.  Login to your Google Drive account and look for Contact us (Responses) spreadsheet. Spreadsheet automatically generate when you create a form. Click to open the spreadsheet.

Contact us Spreadsheet

Step 2. Click on Tools –> Notification rules… Set Notification rules page opens up.

Contact us notification

Step 3. Select Any changes are made and Email-right away. Click save. You will get notification when the spreadsheet get modified. In other word when some visitor of your blog send you a message using Contact us page.

 Set notification rule

Installing the Form to your blog.

Step 1. Login to your blog and go to blogger dashboard, Click on pages. Click New Page to create a new page.

Create Pages in Blogger

Step 2. Enter page title and Paste the HTML copied in Step 10 of Creating Contact Us page in HTML section (Not in Compose) of the page. Click Publish.

Page Creation paste HTML

Step 3. Once published. Click on View to Preview your page. View option appears once your hover your mouse on page. Page preview in other tab of browser.

View page in Blogger

Step 4. Copy the page URL.

Contact us url

Step 5. Add URL to navigation bar of blog.

Benefits of Using Contact us Form over Contact us widget

  1.   Keep track of all your visitors messages and emails in a single spreadsheet.
  2. Forget flood of spam messages.
  3. 15GB of free storage. Just one entry in spreadsheet for an email. You can store more number of entries in spreadsheet than number of emails in 15GB of space.

 

You may Like:

 How to add navigation bar to Blogger.

How to Host your Website on Google Drive.

1 comment:

badge