Skip to main content

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.



DemoDownload



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.


Comments

Popular posts from this blog

iPhone 5 Rumor Roundup

Release Date The latest rumors regarding the iPhone 5 indicate that the official release date will be officially announced during the next Apple event which is to be held on September 12th 2012. According to Verizon CFO, Fran Shammo, Apple (AAPL) will stick to last year's release date and launch the iPhone 5 in October 2012. Although during the 2012 WWDC we had the opportunity to get some more details about iOS 6, no hardware specifications were released. source - 9to5mac.com Larger Screen The iPhone 5 is rumoured to have a larger, 4 inch retina display. source - Apple.pro Nano SIM According to the Financial Times, mobile carriers in Europe are stocking up on Nano SIM cards. This might be related to the release of the next generation iPhone. Smaller Dock Connector Another wide spread rumour is that Apple will release the iPhone 5 with a smaller, 8 pin dock connector. This means that new cables will be available for  new Apple devices released in the future. Did you hear any new rum...

Single Page HTML5 CSS3 Business Card Template 2.0

After seeing a huge interest in the Single Page Business Card Tutorial  i decided to create a Single Page Business Card 2.0 Template. Besides listing your title and contact details the 2.0 template also has some nice CSS3 transition effects, is available in 4 colors and the best part: IT'S FREE FOR DOWNLOAD . Demo Download CSS3 Transition Effect On hover the Name/Title block and the Contact Details blocks slide out vertically showing a centered block containing name and position, social and contact icons. Red Template Demo Blue Template Demo Yellow Template Demo Green Template Demo

HTML Codes for Romanian Characters

Character Simple Code Numerical Code Hex Code Ă Ă Ă ă ă ă Â Â Â Â â â â â Î Î Î Î î î î î Ș Ș Ú ș ș Û Ş Ş Ş ş ş ş Ţ Ţ Ţ ţ ţ ţ