Conectar formulario elementor con Google Sheets

formulario elementor a google sheets

En este pequeño tutorial aprenderás a conectar tu formulario de elementor con Google Sheets, sin utilizar plugin de terceros como zapier que son de pago.

1. Cree una nueva hoja de Google

Cree su formulario en Elementor

2. Cree una nueva hoja de Google

Cree una nueva hoja de Google ingresando a Google Drive y haciendo clic en la nueva hoja de cálculo en blanco.

Y asigne el nombre que desee a su nueva hoja de cálculo de Google.

hoja nueva de google

3. Agregue el script personalizado

Vaya al Editor de secuencias de comandos haciendo clic en el editor de secuencias de comandos en el menú desplegable Herramientas > Editor de secuencia de comandos.

editor de secuencia de comandos google sheets

Elimine cualquier código existente y copie y pegue el siguiente código (gracias al aporte de Raz Ohad), puede ingresar tambien a la URL

CLICK AQUI

/**
 * Google app-script to utilise Elementor Pro Froms webhook
 * For Usage see: https://github.com/pojome/elementor/issues/5894
 */

/*
In order to enable this script, follow these steps:
 * From your Google Sheet, from the Tools menu select Script Editor…
 * Paste the script from this gist into the script code editor and hit Save.
 * From the Publish menu, select Deploy as web app…
 * Choose to execute the app as yourself, and allow Anyone, even anonymous to execute the script. (Note, depending on your Google Apps instance, this option may not be available. You will need to contact your Google Apps administrator, or else use a Gmail account.) Now click Deploy. You may be asked to review permissions now.
 * The URL that you get will be the webhook that you can use in your elementor form, You can test this webhook in your browser first by pasting it. It will say "Yepp this is the webhook URL, request received".
 */

// Change to true to enable email notifications
var emailNotification = false;
var emailAddress = "Change_to_your_Email";



// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];

/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
    return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}

// Webhook Receiver - triggered with form webhook to pusblished App URL.
function doPost( e ) {
    var params = JSON.stringify(e.parameter);
    params = JSON.parse(params);
    insertToSheet(params);

    // HTTP Response
    return HtmlService.createHtmlOutput( "post request received" );
}

// Flattens a nested object for easier use with a spreadsheet
function flattenObject( ob ) {
    var toReturn = {};
    for ( var i in ob ) {
        if ( ! ob.hasOwnProperty( i ) ) continue;
        if ( ( typeof ob[ i ] ) == 'object' ) {
            var flatObject = flattenObject( ob[ i ] );
            for ( var x in flatObject ) {
                if ( ! flatObject.hasOwnProperty( x ) ) continue;
                toReturn[ i + '.' + x ] = flatObject[ x ];
            }
        } else {
            toReturn[ i ] = ob[ i ];
        }
    }
    return toReturn;
}

// normalize headers
function getHeaders( formSheet, keys ) {
    var headers = [];
  
    // retrieve existing headers
    if ( ! isNewSheet ) {
      headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }

    // add any additional headers
    var newHeaders = [];
    newHeaders = keys.filter( function( k ) {
        return headers.indexOf( k ) > -1 ? false : k;
    } );

    newHeaders.forEach( function( h ) {
        headers.push( h );
    } );
    return headers;
}

// normalize values
function getValues( headers, flat ) {
    var values = [];
    // push values based on headers
    headers.forEach( function( h ){
        values.push( flat[ h ] );
    });
    return values;
}

// Insert headers
function setHeaders( sheet, values ) {
    var headerRow = sheet.getRange( 1, 1, 1, values.length )
    headerRow.setValues( [ values ] );
    headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}

// Insert Data into Sheet
function setValues( sheet, values ) {
    var lastRow = Math.max( sheet.getLastRow(),1 );
    sheet.insertRowAfter( lastRow );
    sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}

// Find or create sheet for form
function getFormSheet( formName ) {
    var formSheet;
    var activeSheet = SpreadsheetApp.getActiveSpreadsheet();

    // create sheet if needed
    if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = true;
    }
    return activeSheet.getSheetByName( formName );
}


// magic function where it all happens
function insertToSheet( data ){
    var flat = flattenObject( data );
    var keys = Object.keys( flat );
    var formName = data["form_name"];
    var formSheet = getFormSheet( formName );
    var headers = getHeaders( formSheet, keys );
    var values = getValues( headers, flat );
    setHeaders( formSheet, headers );
    setValues( formSheet, values );
    
    if ( emailNotification ) {
        sendNotification( data, getSeetURL() );
    }
}

function getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  return spreadsheet.getUrl();
}

function sendNotification( data, url ) {
    var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
  var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
    MailApp.sendEmail( emailAddress, subject, message, {
        name: 'Automatic Emailer Script'
    } );
}

Consideraciones:

Si desea recibir actualizaciones por correo electrónico, puede cambiar el var emailNotification valor de falsetrue.
Añada su dirección de correo electrónico junto al var emailAddress.

cambiar correo

Luego guardamos

4. Implementar como aplicación web

Para implementar el proyecto nos vamos al  menú desplegable Implementar y luego Nueva Implementación .

En la siguiente ventana nos vamos a la rueda dentada y luego Aplicación web

Podemos añadir un nombre en la descripción, Luego en ejecutar como: seleccionamos nuestro correo , y en quien tiene accesos : cualquier usuario.

Para finalizar Implementar 

Esperemos que cargue y luego autorizar permiso

autorizamos con nuestra cuenta de correo

 

Luego configuración avanzada y luego Ir al proyecto

Luego permitir

Copiamos el script generado

 

5. Implementar en formulario elementor

en el formulario elementor nos vamos a Action after submit y seleccionamos Webhook

debajo nos presentará un campos donde copiaremos el codigo generado en el google sheets y listo

Los mensajes se mostrarán en una nueva hoja creada automaticamente

Comparte:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on skype
Skype
Share on email
Email

Te puede interesar:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *