Полное руководство по созданию HTML-форм и отправке данных в Google Sheets с помощью API

1. Создайте Google Sheet: во-первых, вам нужно создать Google Sheet для хранения данных из вашей HTML-формы. Вы можете создать новую таблицу Google, перейдя на свой Google Диск, нажав кнопку «Создать» и выбрав «Google Таблицы».
2. Настройте API Google Sheets: чтобы использовать API Google Sheets, вам необходимо создать проект в Google Cloud Console и включить API Google Sheets. Вот пошаговое руководство по началу работы: https://developers.google.com/sheets/api/quickstart/js.
3. Создайте HTML-форму. Затем вам нужно создать HTML-форму, которая собирает данные, которые вы хотите сохранить в своей таблице Google. Вот пример формы, которая собирает имя пользователя и адрес электронной почты:

<form id="my-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">Submit</button>
</form>

1. Добавьте JavaScript для отправки данных формы в Google Sheets. Наконец, вам нужно написать код JavaScript, который отправляет данные формы в ваш Google Sheet с помощью API Google Sheets. Вот пример кода, который использует метод gapi.client.sheets.spreadsheets.values.append для добавления новой строки на лист:

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function submitForm() {
    gapi.client.init({
      apiKey: 'YOUR_API_KEY'
    }).then(function() {
      return gapi.client.load('sheets', 'v4');
    }).then(function() {
      var params = {
        spreadsheetId: 'YOUR_SPREADSHEET_ID',
        range: 'Sheet1!A1:C1',
        valueInputOption: 'USER_ENTERED',
        resource: {
          values: [[document.getElementById('name').value, document.getElementById('email').value]]
        }
      };
      return gapi.client.sheets.spreadsheets.values.append(params);
    }).then(function(response) {
      console.log(response.result);
    }, function(response) {
      console.error(response.result.error.message);
    });
  }
  document.getElementById('my-form').addEventListener('submit', function(event) {
    event.preventDefault();
    submitForm();
  });
</script>

Этот код использует метод gapi.client.sheets.spreadsheets.values.append для добавления новой строки в лист. Вам нужно будет заменить YOUR_API_KEY на свой собственный ключ API, а YOUR_SPREADSHEET_ID на идентификатор созданной ранее таблицы Google.

Когда пользователь отправляет форму, вызывается функция submitForm, которая инициализирует API Google Sheets, загружает API Sheets, а затем добавляет новую строку в Sheet с данными из формы.

Узнать больше: https://www.instagram.com/devwebsstore/