How to Receive Form Submissions via Email Using Google Apps Script

Hello, Bloggers! Welcome to Raghavendra Technic.

In this tutorial, we are going to show you How to Receive Form Submissions via Email Using Google Apps Script.

Introduction:

Receiving form submissions via email is a valuable feature for many websites and applications. Google Apps Script provides a powerful and convenient way to set up email notifications for your form submissions. In this guide, we'll walk you through the process step by step.

Prerequisites

Before we dive into the tutorial, make sure you have the following prerequisites:

• A Google account
• Access to Google Apps Script
• A website or a platform where you can embed HTML and JavaScript

Creating the Contact Form:

Create a contact form in HTML on your Blogger website. The form should include input fields for the user's name, email, message, and possibly other contact details. Here's an example of a simple form:

<form id="contact-form">
    <input type="text" name="name" placeholder="Your Name">
    <input type="email" name="email" placeholder="Your Email">
    <textarea name="message" placeholder="Your Message"></textarea>
    <button type="submit">Submit</button>
</form>

JavaScript to Handle Form Submission:

To handle the form submission and send the data to Google Apps Script, use JavaScript. Here's a JavaScript snippet that collects the form data and sends it to your Google Apps Script web app:

document.getElementById('contact-form').addEventListener('submit', function (e) {
    e.preventDefault(); // Prevent default form submission

    // Collect form data
    const formData = new FormData(this);

    // Send data to Google Apps Script
    fetch('YOUR_GOOGLE_APPS_SCRIPT_URL', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            // Success message or redirection
            alert('Message sent successfully');
        } else {
            // Error handling
            alert('Error sending message');
        }
    });
});

Setting up Google Apps Script:

• Create a new Google Apps Script project in your Google Drive.
• Copy and paste the following code into your Google Apps Script project:

In Google Apps Script, create a function that will receive the data from the form and send it to the specified email address. You can use the GmailApp service to send emails. Here's an example of a Google Apps Script function:

function doPost(e) {
    try {
        var formData = e.parameters;
        var name = formData.name;
        var email = formData.email;
        var message = formData.message;
        var recipient = "your-email@example.com"; // Your email address

        GmailApp.sendEmail(recipient, "New Contact Form Submission",
            "Name: " + name + "\n" +
            "Email: " + email + "\n" +
            "Message: " + message);

        return ContentService.createTextOutput("Message sent successfully");
    } catch (error) {
        return ContentService.createTextOutput("Error sending message: " + error.toString());
    }
}

Deploy Google Apps Script:

Deploy the Google Apps Script as a web app. In the Google Apps Script editor, click on "Deploy" > "New Deployment" and configure it as a web app. Make sure it's accessible to "Anyone, even anonymous" if you want to allow anyone to submit the form.

Get the Web App URL:

After deploying, you will get a web app URL. Use this URL in your JavaScript code where you send the form data to Google Apps Script.

Embed the Form on Blogger:

Finally, embed the HTML form on your Blogger website, and make sure to include the JavaScript code.

Conclusion:

By following this tutorial, you've learned how to create a contact form on your website and set up email notifications for form submissions using Google Apps Script.

This is a valuable tool for websites, blogs, or any online platform where you want to gather and respond to user feedback.

If you encounter any issues or have questions, feel free to leave a comment or join our discussion group for assistance.

Go to Link