Elementor 양식 데이터를 Google 스프레드시트로 보내는 방법
게시 됨: 2022-03-25웹 양식은 사용자와 상호 작용하기 위한 매우 강력한 도구입니다. 예를 들어 사용자는 이메일 주소와 수집하려는 기타 데이터를 입력하여 회사 뉴스레터를 구독할 수 있습니다. 또는 고객의 편의를 위해 웹사이트에 판매 주문 양식을 포함하려는 전자 상거래 회사일 수 있습니다. 비즈니스에 유용할 수 있는 또 다른 유형의 양식은 고객 피드백 양식을 포함하여 비즈니스에서 작동하는 것과 작동하지 않는 것에 대한 더 나은 지식을 얻을 수 있도록 하는 것입니다.
Elementor Pro는 많은 기본 위젯과 함께 제공되며, 웹사이트에서 쉽게 양식을 생성할 수 있는 위젯 중 하나는 Form 위젯입니다. 양식 위젯을 사용하면 WordPress 웹 사이트에서 다양한 유형의 양식을 만들 수 있습니다. 위젯에 대한 자세한 내용은 Elementor Form Builder에 대한 이전 기사를 참조하십시오.
Elementor에는 양식 제출(데이터)을 관리하는 기능이 내장되어 있지만 데이터를 Google 스프레드시트로 보내 데이터를 논리적 형식으로 구성하고 분류할 수 있습니다.
이 기사에서는 Elementor Form의 데이터를 사용자가 쉽게 액세스하고 사용할 수 있는 클라우드 스프레드시트 편집기인 Google Sheet로 가져오는 방법을 보여줍니다.
Google 스프레드시트에서 새 스프레드시트 시작
무료 Google 계정(개인용) 또는 Google Workspace 계정(비즈니스용)을 사용하여 sheets.google.com에서 Google 시트에 액세스할 수 있습니다. 시작하려면 새 스프레드시트를 만드세요.
Apps Script 편집기 열기
이전에는 이름 스크립트 편집기의 도구 메뉴 아래에 배치되었지만 요즘에는 확장 메뉴 아래에 있는 Apps Script 라고 합니다.
데이터 전송을 활성화하려면 코드 받기
Elementor 양식 데이터를 Google Sheets로 전송하려면 먼저 다음 코드를 사용하여 연결해야 합니다.
// 이메일 알림을 활성화하려면 true로 변경
var 이메일 알림 = 거짓;
var emailAddress = "Change_to_your_Email";
// 다음 매개변수를 편집하지 마십시오.
var isNewSheet = 거짓;
var 수신 데이터 = [];
/**
* 웹앱이 GET 요청을 받았을 때 실행되는 함수입니다.
* 사용하지 않지만 필수입니다.
*/
함수 doGet( 전자 ) {
return HtmlService.createHtmlOutput( "예, 웹훅 URL입니다. 요청을 받았습니다." );
}
// Webhook Receiver - 게시된 앱 URL에 대한 양식 웹훅으로 트리거됩니다.
함수 doPost( e ) {
var 매개변수 = JSON.stringify(e.parameter);
params = JSON.parse(params);
insertToSheet(매개변수);
// HTTP 응답
return HtmlService.createHtmlOutput( "요청 접수 완료" );
}
// 스프레드시트에서 더 쉽게 사용할 수 있도록 중첩된 개체를 병합합니다.
기능 flattenObject( ob ) {
var toReturn = {};
for ( var i in ob ) {
if ( ! ob.hasOwnProperty( i ) ) 계속;
if ( ( typeof ob[ i ] ) == '객체' ) {
var flatObject = flattenObject( ob[ i ] );
for (flatObject의 var x) {
if ( ! flatObject.hasOwnProperty( x ) ) 계속;
toReturn[ 나는 + '.' + x ] = 평면 개체[ x ];
}
} 또 다른 {
toReturn[ 나는 ] = ob[ 나는 ];
}
}
반환에 반환;
}
// 헤더 정규화
함수 getHeaders( formSheet, 키 ) {
var 헤더 = [];
// 기존 헤더 검색
if ( ! isNewSheet ) {
헤더 = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
}
// 추가 헤더 추가
var newHeaders = [];
newHeaders = 키.필터( 함수( k ) {
headers.indexOf( k ) > -1 반환? 거짓 : k;
} );
newHeaders.forEach( 함수( h ) {
headers.push(h);
} );
반환 헤더;
}
// 값을 정규화
함수 getValues( 헤더, 플랫 ) {
변수 값 = [];
// 헤더를 기반으로 값을 푸시합니다.
headers.forEach( 함수( h ){
values.push( 플랫[ h ] );
});
반환 값;
}
// 헤더 삽입
함수 setHeaders( 시트, 값 ) {
var headerRow = sheet.getRange( 1, 1, 1, values.length )
headerRow.setValues( [ 값 ] );
headerRow.setFontWeight( "굵게" ).setHorizontalAlignment( "중앙" );
}
// 시트에 데이터 삽입
함수 setValues( 시트, 값 ) {
var lastRow = Math.max( sheet.getLastRow(),1 );
sheet.insertRowAfter( lastRow );
sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ 값 ] ).setFontWeight( "정상" ).setHorizontalAlignment( "중앙" );
}
// 폼의 시트를 찾거나 생성
함수 getFormSheet( 양식 이름 ) {
var 폼시트;
var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
// 필요한 경우 시트 생성
if ( activeSheet.getSheetByName( formName ) == null ) {
formSheet = activeSheet.insertSheet();
formSheet.setName(formName);
isNewSheet = 사실;
}
activeSheet.getSheetByName(formName)을 반환합니다.
}
// 모든 일이 일어나는 마법의 함수
함수 insertToSheet( 데이터 ){
var 플랫 = flattenObject( 데이터 );
var 키 = Object.keys( 플랫 );
var 형식 이름 = 데이터["형식 이름"];
var formSheet = getFormSheet(formName);
var 헤더 = getHeaders( formSheet, 키 );
var 값 = getValues( 헤더, 플랫 );
setHeaders(formSheet, 헤더);
setValues(formSheet, 값);
if ( 이메일 알림 ) {
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( emailAddress, 제목, 메시지, {
이름: '자동 이메일 작성기 스크립트'
} );
}bainternet에 대한 코드에 대한 크레딧.
모든 코드 지우기 및 코드 붙여넣기
코드를 받은 후 Apps Script 편집기에 붙여넣고 먼저 기존 코드를 모두 지워 작동하도록 합니다.
프로젝트 이름 변경 및 변경 사항 저장
코드가 준비되면 스크립트 제목의 이름을 바꾼 다음 저장 버튼을 클릭할 수 있습니다. 
.
스크립트 배포 및 웹 앱 URL 복사
변경 사항이 저장되면 배포 버튼을 클릭하고 옵션에서 새 배포 를 선택하여 스크립트를 배포해 보겠습니다.
나타나는 창에서 톱니바퀴 아이콘을 클릭합니다. 
, 웹 앱 옵션을 선택합니다.
새로 나타나는 양식에서 액세스 권한을 누구나 로 변경하고 배포 버튼을 클릭합니다.
어떤 식으로든 스크립트 배포에서 스프레드시트에 액세스할 수 있는 권한을 요청하는 경우 스크립트가 스프레드시트에 데이터를 쓸 수 있도록 액세스 권한을 부여하십시오.
스크립트 배포가 성공한 후 웹 앱 URL을 복사합니다.
Web App URL을 Elementor Form Webhook 설정에 붙여넣기
Elementor 편집기에서 Google 시트와 연결하려는 양식을 클릭하면 편집기의 왼쪽 패널에서 양식 설정이 열리고 아래로 스크롤하여 제출 후 작업 블록 - 웹훅 추가 작업을 클릭하면 새 창이 열립니다. 아래 Webhook 블록을 클릭하면 복사한 웹 앱 링크를 배치하기 위한 URL 필드가 제공됩니다.
알겠습니다. 텍스트 필드를 채우고 보내기 버튼을 클릭하여 양식을 테스트할 수 있습니다.
양식을 작성하고 보내기 버튼을 3번 눌러 생성한 양식을 테스트했습니다.
Google 시트에서 코드는 Elementor의 양식 이름으로 새 시트를 만듭니다. 양식의 이름 을 google sheet 로 지정했으며 새 시트 이름은 동일합니다.
새로 생성된 시트에는 Elementor 양식에서 보낸 데이터가 누락된 데이터 없이 모두 있습니다.
그것을 요 약하기
웹 양식은 웹사이트 방문자의 특정 정보를 추적하는 데 유용한 도구입니다. 그리고 그들은 아마도 귀하의 목표 달성과 관련하여 귀하의 웹사이트에서 가장 중요한 요소 중 하나일 것입니다. 양식을 Google 시트에 연결하여 데이터를 논리적 형식으로 구성하고 분류할 수 있습니다. 이 데이터가 스프레드시트에 입력되면 비즈니스를 조직하고 성장시키는 데 사용할 수 있습니다.