Как отправить данные формы Elementor в Google Sheets

Веб-формы являются очень мощным инструментом для взаимодействия с пользователями, например, они могут подписаться на информационный бюллетень вашей компании, введя свой адрес электронной почты и любые другие данные, которые вы хотите собрать. Или, возможно, вы являетесь компанией электронной коммерции, которая хочет разместить форму заказа на продажу на своем веб-сайте для удобства своих клиентов. Другой тип формы, который может быть полезен для вашего бизнеса, включает форму обратной связи с клиентами, чтобы вы могли лучше узнать, что работает, а что нет в вашем бизнесе.

Elementor Pro поставляется со множеством встроенных виджетов, одним из виджетов для простого создания формы на вашем веб-сайте является виджет «Форма». С помощью виджета «Форма» вы можете создавать различные типы форм на своем веб-сайте WordPress. Для получения дополнительной информации о виджете вы можете прочитать нашу предыдущую статью о конструкторе форм Elementor.

Хотя Elementor имеет встроенную функцию для управления отправкой форм (данными), вы можете отправить данные в Google Таблицы, чтобы упорядочить и классифицировать данные в логическом формате.

В этой статье мы покажем вам, как получить данные из формы Elementor в Google Sheet, который представляет собой облачный редактор электронных таблиц, который упрощает доступ и использование пользователями.

Запустите новую таблицу в Google Sheets

Вы можете получить доступ к таблицам Google на странице Sheets.google.com, используя бесплатную учетную запись Google (для личного использования) или учетную запись Google Workspace (для использования в бизнесе). Для начала создайте новую пустую таблицу.

Откройте редактор сценариев приложений.

Раньше он размещался в меню « Инструменты » под названием «Редактор скриптов», теперь он называется « Сценарий приложений » в меню « Расширение» .

Получите коды, чтобы включить передачу данных

Чтобы иметь возможность передавать данные формы Elementor в Google Таблицы, вам необходимо сначала подключить их, используя следующий код.

 // Измените значение на true, чтобы включить уведомления по электронной почте
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// НЕ РЕДАКТИРОВАНИЕ ЭТИХ СЛЕДУЮЩИХ ПАРАМЕТРОВ
вар isNewSheet = ложь;
var recivedData = [];
/**
 * это функция, которая срабатывает, когда веб-приложение получает запрос GET
 * Не используется, но требуется.
 */
функция doGet( e ) {
	return HtmlService.createHtmlOutput («Да, это URL-адрес веб-перехватчика, запрос получен»);
}
// Получатель веб-перехватчика — активируется веб-перехватчиком формы для опубликованного URL-адреса приложения.
функция doPost( e ) {
	var params = JSON.stringify(e.parameter);
	параметры = JSON.parse (параметры);
	вставить на лист (параметры);
	// HTTP-ответ
	return HtmlService.createHtmlOutput («Получен запрос публикации»);
}
// Сглаживает вложенный объект для более удобного использования с электронной таблицей
функция flattenObject( ob ) {
	вар toReturn = {};
	for ( var i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) continue;
		если ( ( тип объекта [ я ] ) == 'объект' ) {
			var flatObject = flattenObject(ob[i]);
			for (var x в flatObject) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue;
				toReturn[ я + '.' + х ] = плоский объект [ х ];
			}
		} еще {
			toReturn[i] = ob[i];
		}
	}
	вернуться кВернуться;
}
// нормализовать заголовки
функция getHeaders (formSheet, ключи) {
	вар заголовки = [];
  
	// получаем существующие заголовки
    если ( ! isNewSheet ) {
	  заголовки = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// добавляем любые дополнительные заголовки
	вар новые заголовки = [];
	новые заголовки = keys.filter ( функция ( k ) {
		вернуть headers.indexOf( k ) > -1 ? ложь: к;
	});
	newHeaders.forEach ( функция ( ч ) {
		заголовки.push(ч);
	});
	заголовки возврата;
}
// нормализуем значения
функция getValues ​​(заголовки, квартира) {
	переменные значения = [];
	// проталкиваем значения на основе заголовков
	заголовки.forEach ( функция ( ч ) {
		values.push(квартира[h]);
	});
	возвращаемые значения;
}
// Вставляем заголовки
функция setHeaders(лист, значения) {
	var headerRow = лист.getRange( 1, 1, 1, values.length )
	headerRow.setValues([значения]);
	headerRow.setFontWeight ("полужирный"). setHorizontalAlignment ("центр");
}
// Вставляем данные в лист
функция setValues(лист, значения) {
	var lastRow = Math.max(лист.getLastRow(),1);
	лист.insertRowAfter (последняя строка);
	лист.getRange(lastRow + 1, 1, 1, values.length).setValues([значения]).setFontWeight("normal").setHorizontalAlignment("center");
}
// Находим или создаем лист для формы
функция getFormSheet(formName) {
	вар лист формы;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// создаем лист, если нужно
	если (activeSheet.getSheetByName(formName) == null) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName(formName);
      исновый лист = истина;
	}
	вернуть activeSheet.getSheetByName (formName);
}

// волшебная функция, в которой все это происходит
функция insertToSheet(данные){
	var flat = flattenObject(данные);
	var keys = Object.keys(flat);
	var имя_формы = данные["имя_формы"];
	var formSheet = getFormSheet(formName);
	заголовки var = getHeaders(formSheet, keys);
	var values ​​= getValues ​​(заголовки, плоские);
	setHeaders(formSheet, заголовки);
	setValues(formSheet, значения);
	
    если (уведомление по электронной почте) {
		sendNotification(данные, getSeetURL());
	}
}
функция getSeetURL() {
  var электронная таблица = SpreadsheetApp.getActiveSpreadsheet();
  лист var = крупноформатная таблица.getActiveSheet();
  вернуть электронную таблицу.getUrl();
}
функция sendNotification(данные, URL) {
	var subject = "В ваш лист добавлена ​​новая заявка Elementor Pro Froms";
  var message = "Новая заявка получена через форму " + data['form_name'] + " и вставлена ​​в ваш лист Google по адресу: " + url;
	MailApp.sendEmail(адрес электронной почты, тема, сообщение, {
		name: 'Сценарий автоматической рассылки электронной почты'
	});
}

Кредит на код для bainternet.

Очистить весь код и вставить код

Получив код, вставьте его в редактор сценариев приложений, сначала очистите весь существующий код, чтобы он заработал.

Переименуйте проект и сохраните изменения

Когда код будет готов, вы можете переименовать заголовок скрипта, а затем нажать кнопку «Сохранить». .

Разверните скрипт и скопируйте URL-адрес веб-приложения

После того, как изменение будет сохранено, давайте развернем скрипт, нажав кнопку « Развернуть » и выбрав « Новое развертывание » в параметрах.

В появившемся окне нажмите на значок шестеренки и выберите параметр « Веб-приложение ».

В появившейся форме измените доступ на « Любой» и нажмите кнопку « Развернуть» .

Если каким-то образом развертывание скрипта запрашивает разрешение на доступ к вашей электронной таблице, разрешите ему доступ, чтобы скрипт мог записывать данные в вашу электронную таблицу.

После успешного развертывания сценария скопируйте URL-адрес веб-приложения .

Вставьте URL-адрес веб-приложения в настройку веб-перехватчика формы Elementor.

В редакторе Elementor щелкните форму, которую вы хотите подключить к листу Google, она откроет настройки формы на левой панели редактора, затем прокрутите вниз и щелкните блок « Действие после отправки» — «Добавить действие веб-перехватчика» — затем откроется новый Блок Webhook ниже, щелкнув по нему, вы получите поле URL для размещения скопированной ссылки на веб-приложение.

Хорошо, вот и все, вы можете протестировать форму, заполнив текстовое поле и нажав кнопку отправки.

Мы протестировали форму, которую мы создали, заполнив форму и нажав кнопку отправки 3 раза.

На листе Google код создаст новый лист под именем формы на Elementor. Мы назвали форму листом Google , и имя нового листа такое же.

На вновь созданном листе все данные, которые мы отправляем из формы Elementor, есть, без каких-либо пропусков данных.

Подвести итог

Веб-формы — полезный инструмент для отслеживания определенной информации от посетителей вашего сайта. И они, вероятно, являются одним из самых важных элементов на вашем сайте, когда речь идет о достижении ваших целей. Подключив форму к нашему листу Google, мы можем организовать и классифицировать данные в логическом формате. Как только эти данные будут введены в электронную таблицу, мы сможем использовать их для организации и развития нашего бизнеса.