How I automated it! Google Forms to Blogger

In this guide, we'll walk you through the process of automating the publishing of blog posts from Google Forms to Blogger using Google Apps Script. Whether you're managing a personal blog or creating content for a larger platform, this step-by-step tutorial will show you how to streamline the process, saving you time and effort. By the end of this guide, you'll have a fully automated system that takes form submissions and posts them directly to your Blogger site. Let’s dive in!

Step 1: Create a Google Form

Go to Google Forms:
- Open your browser and go to Google Forms.
- Click on Blank to create a new form.
Add Questions:
- Title: Create a question for the blog title (short answer).
- Content: Create a question for the blog content (paragraph).
- Labels: Create a question for the blog labels (short answer).
Link the Form to Google Sheets:
- After creating the form, click on the Responses tab.
- Click on the Google Sheets icon (green spreadsheet icon) to link the form to a Google Sheet.
- A new Google Sheet will be created, and all form responses will automatically be recorded there.

Step 2: Set Up Google Cloud Project and OAuth Credentials

Create a Google Cloud Project:
- Go to the Google Cloud Console.
- Click on Select a project and then Create New Project.
- Name your project and click Create.
Enable the Blogger API:
- In the Google Cloud Console, go to API & Services → Library.
- Search for Blogger API and enable it for your project.
Create OAuth Credentials:
- In the Google Cloud Console, go to Credentials.
- Click on Create Credentials → OAuth Client ID.
- Select Web application as the application type.
- Under Authorized redirect URIs, add the URL: https://developers.google.com/oauthplayground.
- Click Create. Note down the Client ID and Client Secret.

Step 3: Obtain Refresh Token Using OAuth Playground

Go to OAuth Playground:
- Open the OAuth 2.0 Playground.
Configure OAuth Playground:
- In the OAuth Playground, click the gear icon (top right corner).
- Check the box for Use your own OAuth credentials.
- Enter the Client ID and Client Secret from the previous step.
Authorize the Blogger API:
- In the OAuth Playground, select Blogger API v3.
- Choose the https://www.googleapis.com/auth/blogger scope.
- Click Authorize APIs and grant the necessary permissions.
Exchange Authorization Code for Tokens:
- Click Exchange authorization code for tokens.
- After the tokens are generated, copy the Refresh Token (you'll use this in the next step).

Step 4: Write Google Apps Script Code

Open Google Apps Script:
- Open the Google Sheet that was created when you linked it to the form.
- In the Sheet, go to Extensions → Apps Script to open the Google Apps Script editor.
Write the Script:
- Replace the default code in the script editor with the following code:

// Blogger API credentials (Replace with your own credentials)
const BLOG_ID = "Your Blogger Blog ID"; // Your Blogger Blog ID
const CLIENT_ID = "OAuth Client ID"; // OAuth Client ID
const CLIENT_SECRET = "OAuth Client Secret"; // OAuth Client Secret
const REFRESH_TOKEN = "Updated refresh token"; // Updated refresh token

// Generate Blogger access token using OAuth2
function getBloggerAccessToken() {
  const payload = {
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET,
    refresh_token: REFRESH_TOKEN,
    grant_type: "refresh_token"
  };

  const options = {
    method: "post",
    contentType: "application/x-www-form-urlencoded",
    payload: Object.keys(payload).map(key => `${key}=${encodeURIComponent(payload[key])}`).join("&")
  };

  const response = UrlFetchApp.fetch("https://oauth2.googleapis.com/token", options);
  return JSON.parse(response.getContentText()).access_token;
}

// Post data to Blogger
function postToBlogger(title, content, labels) {
  const accessToken = getBloggerAccessToken(); // Get the access token for Blogger
  const url = `https://www.googleapis.com/blogger/v3/blogs/${BLOG_ID}/posts`; // Blogger API endpoint

  const payload = {
    title: title,
    content: content,
    labels: labels.split(",") // Convert comma-separated labels into an array
  };

  const options = {
    method: "post",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    payload: JSON.stringify(payload)
  };

  try {
    const response = UrlFetchApp.fetch(url, options); // Send the request to Blogger API
    Logger.log("Post created successfully: " + response.getContentText()); // Log success message
  } catch (error) {
    Logger.log("Error while posting to Blogger: " + error.message); // Log any errors
  }
}

// Form submission handler
function onFormSubmit(e) {
  const formData = e.values; // Get the form data (this will contain Title, Content, and Labels)

  // Ensure formData contains the expected number of values
  if (!formData || formData.length < 4) {
    Logger.log("Form data is incomplete or missing.");
    return;
  }

  const title = formData[1]; // Title of the post (from form)
  const content = formData[2]; // Content of the post (from form)
  const labels = formData[3]; // Labels for the post (from form)

  // Log the form data for debugging
  Logger.log("Form Submission - Title: " + title);
  Logger.log("Form Submission - Content: " + content);
  Logger.log("Form Submission - Labels: " + labels);

  // Post the form data to Blogger
  postToBlogger(title, content, labels);
}

Save the Script:
- Click on File → Save, and give the project a name (e.g., "Form to Blogger").

Step 5: Set up the Trigger

Set Up Trigger:
- In the Google Apps Script editor, click on the clock icon on the left to open the Triggers page.
- Click on Add Trigger (bottom right).
- For Choose which function to run, select onFormSubmit.
- For Choose which deployment should run, select Head.
- For Select event type, choose On form submit.
- Click Save.

Step 6: Test the Integration

Test by submitting the form:
- Go back to your Google Form and submit a test entry (fill in the Title, Content, and Labels).
Check the Blogger:
- After the form is submitted, check your Blogger account for the new post created with the provided data.