Html to Google Sheets

Published On - April 29, 2023

yawhuat News, Tutorial

HTML TO GOOGLE

Many of you have been asking ‘ Can I create a Landing page with HTML and then save it in Google form ?’. Yes. One of the simplest ways is to use Sheetdb.io. It provides 2 free HTML to Google Sheets integration. There are many benefits to creating a landing page. Among the benefits are,

  1. Leads generations
  2. Promotions
  3. Advertisements

Marketing Ideas
A landing page is a standalone web page designed to persuade visitors to take a specific action, such as signing up for a newsletter or making a purchase. Landing pages have become an essential component of online marketing campaigns because of their numerous benefits.

Here are some of the key benefits of using a landing page:

  1. Increased Conversions:
  2. Targeted Messaging:- User will be directed to download PDF, Discounts, Coupons and etc
  3. Improved SEO
  4. Better User Experience:
  5. Enhanced Analytics:

Steps to Integrate

Steps to Integrate HTML Landing Page to Google Form
Step 1: Create Google Sheet Form (Make sure you share the file with the public and ensure you place the title)
Step 2: Sign up at https://sheetdb.io/. Link the google sheets to your account
Step 3: Get your endpoint

Look at the example for the Landing Page HTML

HTML Javascript

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ” crossorigin=”anonymous”>
    <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe” crossorigin=”anonymous”></script>
    <link rel=”stylesheet” href=”style.css”>
    <title>Your Training landing Page</title>
</head>
<body>
    <form method=”post” id=”myform”  action=”https://sheetdb.io/api/v1/qis2opzcdu0lg”>
    <div class=” mycontainer pt-3 text-white”>
        <h2>KFC</h2>
        <P>You decide the KFC Fusion cuisine in June 2023</P>
          <div class=”mb-3″>
            <label for=”name” class=”form-label”>Name</label>
            <input type=”text” class=”form-control” id=”name” name=”data[name]” required>
        </div>
          <div class=”mb-3″>
            <label for=”contact” class=”form-label”>Contact Number</label>
            <input type=”number” class=”form-control” id=”contact” name=”data[contact]” required>
          </div>
          <div class=”form-check”>
            <input class=”form-check-input” type=”radio” name=data[food] id=”flexRadioDefault1″ value = ‘Rojak’>
            <label class=”form-check-label” for=”flexRadioDefault1″>
              Rojak
            </label>
          </div>
          <div class=”form-check”>
            <input class=”form-check-input” type=”radio” name=”data[food]” id=”flexRadioDefault2″ value=”Laksa”>
            <label class=”form-check-label” for=”flexRadioDefault2″>
              Laksa
            </label>
          </div>
          <div class=”form-check”>
            <input class=”form-check-input” type=”radio” name=”data[food]” id=”flexRadioDefault3″ value = ‘Hokkien Mee’>
            <label class=”form-check-label” for=”flexRadioDefault3″>
              Hokkien Mee
            </label>
          </div>
          <div class=”form-check”>
            <input class=”form-check-input” type=”radio” name=”data[food]” id=”flexRadioDefault4″ value=”Char Ho Fun”>
            <label class=”form-check-label” for=”flexRadioDefault4″>
             Char Ho Fun
            </label>
          </div>
        <br>
         <button class = ‘btn btn-success’ type=”submit” id=”mybutton” >Submit</button>
      </div>
    </form>
</body>
<script>
    var form = document.getElementById(‘myform’);
    form.addEventListener(“submit”, e => {
      e.preventDefault();
      fetch(form.action, {
          method : “POST”,
          body: new FormData(document.getElementById(“myform”)),
      }).then(
          response => response.json()
      ).then((html) => {
        // you can put any JS code here
        window.location.href = ‘https://www.novawebbusiness.com’;
      });
    });
  </script>
</html>