Loading...

How To Create A Free Contact Form For Your Website Using Google Drive


If you are determined not to use PHP for creating a contact form you have the option to use Google Drive Forms. You can then use a custom page styling to create your own contact page. For the purposes of this tutorial I will use Twitter Bootstrap 3.



Demo Download



1. Open drive.google.com and create a new form. Add the following fields until you get the result as shown in the screenshot below. You will need a Name, an E-mail, a Subject and a Message field.




2. Select Responses from the Google Drive menu and click Choose Response Destination. Choose New Spreadsheet and click Create.



3. You can now view your live form and submit a test answer. The answer should now be submitted to the spreadsheet you have created in Step 2.



4. Now we will enable the functionality of being notified via e-mail when someone submits an answer.
Go to Tools --> Notifications and select the option to get notified by e-mail whenever changes are made to the form:



5. Now open the Form you have created and have a look at the HTML code. The easiest way is to right click the form in your browser window and selecting View Page Source. You will see the attributes for the HTML form and each of the individual form elements.

6. Now create a HTML page of your own containing a contact form and transfer the attributes of the form elements from the Google Drive form to your own.

You can have a look at the code of the two files in this tutorial and compare the results:

7. After creating your own contact page you can test it by sending a message.