How to Create a Contact Us Page with HTML and Google Sheets

User interface and user experience are the most important parts of a website. Suppose your visitor wants to communicate with you and is willing to share feedback. Or You run a business and

A “Contact Us” page is a critical component of any website. It provides a direct line of communication between you and your visitors, customers, or potential clients. Whether you’re running a blog, an online store, a non-profit organization, or any other type of website, a “Contact Us” page allows your audience to reach out to you with their questions, feedback, or opportunities.

However, setting up a “Contact Us” page can seem daunting, especially if you want to store and manage the messages you receive in an organized way. That’s where this tutorial comes in. We’ll show you how to create a “Contact Us” page using HTML and CSS for the front end, and Google Sheets and Google Apps Script for the back end. This will allow you to collect messages from users and store them directly into a Google Sheet, making it easy to manage and respond to your messages.

Step 1: Creating the HTML Form

First, let’s create the HTML form that users will fill out. We’ll include fields for the user’s name, email, and message. We’ll also add a submit button. Here’s the code:

<form id="submit-to-google-sheet" name="submit-to-google-sheet">
    <label for="name">Name:</label>
    <input type="text" id="name-sn-1" name="name" required><br>
    <label for="email">Email:</label>
    <input type="email" id="email-sn" name="email" required><br>
    <label for="message">Message:</label>
    <textarea cols="25" id="message-sn" name="message" required></textarea><br>
    <button id="submit-button-sn" type="submit" value="Send">Send</button>
</form>

<div id="sending-message" style="display: none;">Please wait, Your message is being sent...</div>
<div id="success-message" style="display: none;">Your message has been sent. Thank you!</div>

Step 2: Styling the Form with CSS

Next, we’ll add some CSS to make our form look nice. We’ll style the form, labels, input fields, button, and messages. Here’s the CSS code:

<style>#submit-to-google-sheet{ width: auto; max-width: 600px; margin: 0 auto; padding: 20px 50px 20px 23px; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #submit-to-google-sheet:hover{ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);} #submit-to-google-sheet label{ display: block; margin-bottom: 5px; font-weight: bold; color: #333; font-size: 1.1em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 3px; font-size: 1em; transition: border 0.3s ease;} #submit-to-google-sheet input:focus, #submit-to-google-sheet textarea:focus{ border-color: #007BFF; outline: none;} #submit-to-google-sheet button{ padding: 10px 20px; background-color: #007BFF; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease;} #submit-to-google-sheet button:hover{ background-color: #0056b3;} #sending-message, #success-message{ padding: 10px; border-radius: 3px; margin-bottom: 20px; transition: all 0.3s ease;} #sending-message{ background-color: #ffcc00; color: #333;} #success-message{ background-color: #28a745; color: #fff;} @media (max-width: 600px){ #submit-to-google-sheet{ box-shadow: none; border: none;} #submit-to-google-sheet label{ font-size: 0.9em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ font-size: 0.8em;} #submit-to-google-sheet button{ font-size: 0.8em;}} </style>

This will

Step 3: Setting Up Google Sheets and Google Apps Script

This step involves creating a new Google Sheets document, writing a Google Apps Script to handle form submissions, and deploying the script as a web app.

3.1 Creating a New Google Sheets Document

First, you’ll need to create a new Google Sheets document to store the messages. Here’s how:

1. Go to Google Sheets (sheets.google.com).
2. Click on “+ New spreadsheet” to create a new document.
3. Name the spreadsheet something like “Contact Form Responses”.

3.2 Writing the Google Apps Script

Next, you’ll write a Google Apps Script to handle form submissions. This script will be triggered whenever a user submits the form on your “Contact Us” page.

Here’s how to create the script:

1. From your Google Sheets document, click on “Extensions” > “Apps Script”.
2. Delete any code in the script editor and replace it with the following:

function doPost(e) {
    var params = e.parameter;
    var name = params.name;
    var email = params.email;
    var message = params.message;
  
    // Get current date and time
    var now = new Date();
    var timestamp = Utilities.formatDate(now, "IST", "yyyy-MM-dd HH:mm:ss");
  
    // Store data in Google Sheet
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.appendRow([timestamp, name, email, message]);
  
    // Send email - Comment out lines below to send email
    // var emailBody = 'You received a new message from ' + name + ' (' + email + ') at ' + timestamp + ':\n\n' + message;
    // MailApp.sendEmail({
    //   to: 'Provide_YOUR_EMAIL_ADDRESS', 
    //   subject: 'New message',
    //   body: emailBody,
    // });
  
    return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
  }
  

3. Click on “File” > “Save” and name your project something like “Contact Form Script”.

3.3 Setting Up a Trigger

1. Click on the clock icon from the Apps Script editor, which represents “Triggers”. This will open the “Project triggers” page.
2. Click on “+ Add Trigger” at the bottom right of the page.
3. Under “Choose which function to run”, select doPost from the dropdown menu.
4. Under “Select event type”, choose “On form submit”.
5. Click “Save”.

You’ll be prompted to authorize the script with your Google account. This is necessary because the script needs permission to append rows to your Google Sheets document and to send emails on your behalf.

Here’s how to authorize the script:

1. A dialog box will appear saying, “Authorization required”. Click “Review Permissions”.
2. Choose your Google account.
3. A message will pop up on your computer screen: “This app isn’t verified”. Click “Advanced” and then “Go to Project Name (unsafe)”.
4. Click “Allow” to give the script the necessary permissions.

Now, whenever a user submits the form on your “Contact Us” page, the doPost function will be triggered, and the user’s message will be stored in your Google Sheets document.

After setting up the trigger and authorizing the script, you can proceed to deploy the script as a web app, as described in the previous message.

3.4 Deploying the Script as a Web App

Finally, you’ll deploy your script as a web app. This will give you a URL that you can use to trigger the script.

Here’s how to deploy the script:

1. From the Apps Script editor, click on “Publish” > “Deploy as web app”.
2. Under “Project version”, select “New” and write a version description like “Initial version”.
3. Under “Execute the app as”, select “Me (your email)”.
4. Under “Who has access to the app”, select “Anyone, even anonymous”. This allows users who aren’t logged into a Google account to submit the form.
5. Click “Deploy”.
6. You’ll see a message saying “Authorization required”. Click “Review Permissions”, select your account, and grant the necessary permissions.
7. You’ll then see a message saying “This app isn’t verified”. Click “Advanced” and then “Go to Contact Form Script (unsafe)”.
8. Click “Allow” to grant the necessary permissions.
9. You’ll then see a dialog box with the URL of your web app. Copy this URL and save it somewhere – you’ll need it in the next step.

And that’s it! You’ve now set up Google Sheets and Google Apps Script to handle form submissions from your “Contact Us” page.

Step 4: Connecting the HTML Form to Google Sheets

Finally, we’ll use JavaScript to connect our HTML form to Google Sheets. When the form is submitted, we’ll send a POST request to our Apps Script web app, which will then store the data in Google Sheets. Here’s the JavaScript code:

<script>
    var scriptURL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec'
    var form = document.forms['submit-to-google-sheet']
    var successMessage = document.getElementById('success-message');
    var sendingMessage = document.getElementById('sending-message');

    form.addEventListener('submit', function(e) {
        e.preventDefault()
        form.style.display = 'none'; // hide the form immediately
        sendingMessage.style.display = 'block'; // show the sending message
        fetch(scriptURL, { method: 'POST', body: new FormData(form) })
            .then(function(response) {
                console.log('Success!', response)
                sendingMessage.style.display = 'none'; // hide the sending message
                successMessage.style.display = 'block'; // show the success message
            })
            .catch(function(error) {
                console.error('Error!', error.message)
                form.style.display = 'block'; // show the form again in case of error
                sendingMessage.style.display = 'none'; // hide the sending message
            })
    })
</script>

And that’s it! You now have a “Contact Us” page that collects user messages and stores them directly into a Google Sheet. Happy coding!

Please note that you’ll need to replace 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec' with the URL of your own Apps Script web app.