¿Cómo puedo enviar los datos de un formulario a una hoja de cálculo de google? He hecho un formulario con Google Drive, pero para llegar CSS personalizado correr, tengo que copiar la etiqueta form.

En mi caso, que es lo que google genera para el botón enviar comportamiento

<form action="https://docs.google.com/forms/d/113H_71nd98TWE0bByjHYNpnC-
 oVA6OBDWtppU30rBrU/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">

Sin embargo, quiero publicar los datos de mi propio formulario diseñado para el anterior Formulario de Google la Respuesta de la hoja de cálculo. Aquí está mi código de formulario (usando Bootstrap 3):

<form class="form-horizontal" role="form" id="ftk-contact">
<h4>Get in touch with us now</h4>
<div class="form-group">
<label for="inputType" class="col-lg-2 control-label">Type of Inquiry</label>
<div class="col-lg-10">
<select class="form-control" id="inputType">
<option>Request a Quotation</option>
<option>Request a Bluebook</option>
<option>General Inquiry</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name *</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email *</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputCompany" class="col-lg-2 control-label">Company</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputCompany" placeholder="Your Company Name">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message *</label>
<div class="col-lg-10">
<textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Phone</label>
<div class="col-lg-10">
<input type="tel" class="form-control" id="inputPhone" placeholder="Your Phone Number">
</div>
</div>
<div class="form-group">
<label for="inputWeb" class="col-lg-2 control-label">URL</label>
<div class="col-lg-10">
<input type="url" class="form-control" id="inputWeb" placeholder="Your Website URL">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary btn-lg">Send your Inquiry now</button>
</div>
</div>
</form>

Cuando usando el formulario de Google action=… me lleva a la original de Google Formulario al pulsar enviar, en lugar de la forma de las entradas de la copia a la hoja de cálculo.

Si el método anterior no funciona, ¿de qué otra manera puedo enviar los datos del formulario a un correo electrónico o Google Drive?

OriginalEl autor user3096434 | 2014-01-13

7 Comentarios

  1. 16

    He aquí lo que funcionó para mí:

    1. Crear el formulario personalizado
    2. Crear su formulario de Google y ver el código fuente después de hacer clic en vista formulario en vivo
    3. Copia el código html a partir de <> hasta </form>
    4. Cada uno de los campos de entrada del formulario de Google tiene nombre y la identificación de los atributos que deben ser copiados a su forma personal
    5. El uso de la dirección URL en el formulario de acción de Google forms en su forma.
    6. Asegúrese de que incluso el botón de enviar tiene el ID y el nombre de los atributos coincidentes con el formulario de Google de origen.
    7. Si usted hace un submit ahora, que le llevará al formulario de Google a la página de respuesta. Usted puede evitar esto mediante la realización de una ajax formulario de envío.

    Si el formulario no validar un formulario de Google elemento obligatorio, entonces usted va a volver a ser redirigido al formulario de Google de la página.

    Aunque yo no verificar si es necesario, también he copiado los scripts
    Todo bien, pero tendría que ser capaz de proporcionar más información en cuanto a qué es exactamente lo que significa en el punto 7 como estoy siendo redirigido a la Página de Formulario de Google
    Podemos manija de la forma de la sección

    OriginalEl autor Sujay DSa

  2. 6

    Completa Paso-por-paso Instrucciones

    Después de leer Martin Hawskey‘s buena introducción (para enviar datos desde un formulario HTML a una Hoja de cálculo de Google) y ver a un par de huecos/supuestos, hemos decidido escribir un detallado o completo tutorial con el paso a paso las instrucciones que un pocos personas han encontrado útiles:

    https://github.com/dwyl/html-form-send-email-via-google-script-without-server

    El script guarda todos los datos enviados a través de HTTP POST en la Hoja de cálculo de Google, y opcionalmente reenvía el contenido de una dirección de correo electrónico. (útil si usted desea ser notificado de nuevos datos)

    Formulario HTML:

    Google Forms: Envía los datos a la hoja de cálculo

    Resultado (fila en la hoja de):

    Google Forms: Envía los datos a la hoja de cálculo

    Nos comentó la secuencia de Comandos de Google, así que espero es claro, pero si usted tiene cualquier preguntas, no dude en preguntar! 🙂

    OriginalEl autor nelsonic

  3. 3

    Hice utilidad llamada La Magia De Las Formas a agregar algunas características adicionales más allá de lo que Google los extremos de la oferta. Crear una magia proyecto de formulario y le dará un extremo HTTP donde se pueden enviar los formularios a (HTTP regular o Ajax), configurar de forma personalizada las redirecciones en caso de éxito/error, y también se auto-crear columnas basadas en los datos que se publique, lo que permite algunos bastante flexible casos de uso.

    Este enlace no es valido

    OriginalEl autor Ted Benson

  4. 3

    Parece que recientemente Google ha actualizado su manera de crear formas, por lo que ahora los nombres de los campos están en oculto entradas por debajo de los normales (https://github.com/heaversm/google-custom-form).

    También he probado el @nelsonic enfoque, y envía por correo electrónico las respuestas en formato JSON correctamente, pero no se carga en la Hoja de cálculo de Google, al menos para mí. Por eso he querido combinar dos métodos para guardar siempre los datos de los usuarios en caso de más de ocultación de los cambios que se toman en el futuro por parte de Google.

    Así que te recomiendo tener una página web con un iframe dentro de ella. Este iframe contendría su propio formulario personalizado, desde otra página web o, como en mi ejemplo, por razones de conveniencia– de sí mismo mediante el srcdoc atributo.

    A continuación, copie el names de los escondidos entradas así como la action url del formulario de su Formulario de Google Página de vista previa de y pegar en el formulario personalizado.

    Y, finalmente, con Ajax podemos enviar fácilmente una copia de los datos del formulario a la normal de la Hoja de cálculo de Google, y el otro a nuestro correo con el @nelsonic solución de script.

    De esta manera, con el iframe y el Ajax, estamos evitando el url de la redirección a la Respuesta registrada de la página cuando el formulario es enviado a Google, pero podemos ocultar el iframe de la vista principal para estar 100% seguro.

    He puesto aquí todo mi código para que pueda probarlo:

    Formulario Personalizado:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Custom Form to Google SpreadSheets</title>
    </head>
    <body>
    <script type="text/javascript">
    function hideIframeAndShowThankYouMessage(){
    document.getElementById('iframe').style.display = "none";
    document.getElementById('thankyou').style.display = "block";
    }
    </script>
    <iframe id="iframe" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" srcdoc="<html><head></head><body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    <script type='text/javascript'>
    $(document).ready(function(){
    $('#form').submit(function(e) {
    //You could also here, for example, valid an email address input
    //It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js:
    window.top.hideIframeAndShowThankYouMessage();
    //Now we send the same form to two different locations: the first is the ordinary Google Spreadsheet, the second is the Google Apps Script which allows us to receive an email with the form info in JSON format
    var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse';
    var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec';
    $.ajax({
    type: 'POST',
    url: url_sheet,
    data: $('#form').serialize(),
    success: function(data){}
    });
    $.ajax({
    type: 'POST',
    url: url_script,
    data: $('#form').serialize(),
    success: function(data){}
    });
    e.preventDefault();
    });
    });
    </script>
    <!--
    *** TO-DO!! ***        
    1. Copy your form ACTION url from your Google Form Preview Page
    2. Replace value of var url_sheet with that form ACTION url in line 31
    3. Copy your Spreadsheet WEB APP url from Google Script Editor
    4. Replace value of url_script with that WEB APP url in line 33
    3. Look into the source of your Google Form Preview Page and search for the names of the HIDDEN fields which are each one close to the normal input type (... <input type='hidden' name='entry.314619096' jsname='L9xHkb'> ...). We don't need the jsname, only the name
    4. Replace the NAMES fields of every field of the custom form below
    --> 
    <form id='form' method='POST'>
    <label for='name'>Name: </label>
    <input type='text' name='entry.314619096' placeholder='This is easy!' />
    <br/>
    <label for='message'>Message:</label>
    <input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/>
    <br/>
    <input type='submit' value='Submit'>
    </form></body></html>">Loading...</iframe>
    <h1 id="thankyou" style="display: none">Thank you!</h1>
    </body>
    </html>

    La esperanza de que pueda ayudar a alguien!

    Hola, ¿Dónde estás usando nombre=’entrada.314619096′ ?

    OriginalEl autor BigKangu

  5. 2

    Puede copiar el código HTML de Google formulario, e incluirlo en que páginas HTML personalizadas. De esta manera usted puede rediseñar el aspecto del formulario de google como usted desea, y el uso de jQuery o técnicas similares a las que se puede añadir la propia lógica de la forma (si es necesario).

    Aquí tienes un ejemplo:
    http://www.immersionmedia.com/blog/customizing-and-styling-google-forms/

    Este enlace no es valido

    OriginalEl autor user10901

  6. 1

    Es muy simple.

    1. Obtener su id de etiqueta de FORMULARIO «acción» de la propiedad, puede obtener el formulario de la etiqueta en la fuente del Formulario de Google de la página web

    2. Obtener su campo de id
      Ex. «de entrada.1472837636»

    Por favor, consulte el ejemplo de abajo ahora.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>CUSTOM GOOGLE FORM</title>
    </head>
    <body>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <form id="input-form" action="" method="POST" target="no-target">
    <table>
    <tr>        
    <td>Rate this help note</td>
    <td><input type="radio" value="1" name="rating" class="rating" checked="">1</td>
    <td><input type="radio" value="2" name="rating" class="rating">2</td>
    <td><input type="radio" value="3" name="rating" class="rating">3</td>
    <td><input type="radio" value="4" name="rating" class="rating">4</td>
    <td><input type="radio" value="5" name="rating" class="rating">5</td>
    <td><input type="radio" value="6" name="rating" class="rating">6</td>
    <td><input type="radio" value="7" name="rating" class="rating">7</td>
    <td><input type="radio" value="8" name="rating" class="rating">8</td>
    <td><input type="radio" value="9" name="rating" class="rating">9</td>
    <td><input type="radio" value="10" name="rating" class="rating">10</td>
    </tr>    
    <tr>        
    <td>Are you satisfied from this help module ?</td>
    <td><input type="radio" value="Yes" name="sat" class="sat" checked="">Yes</td>
    <td><input type="radio" value="No" name="sat" class="sat">No</td>
    </tr>
    <tr><td>comments</td><td><input id="comments" name="comments"><td></tr>    
    <tr><td><button id="form-submit" type="submit">SUBMIT</button></td></tr>
    </table>
    </form>
    <p id="input-feedback"></p>
    <iframe src="#" id="no-target" name="no-target" style="visibility:hidden"></iframe>
    <script>
    jQuery('#input-form').one('submit', function() {
    var rating = encodeURIComponent(jQuery('input[name=rating]:checked').val());
    var sat = encodeURIComponent(jQuery('input[name=sat]:checked').val());
    var comments = encodeURIComponent(jQuery('#comments').val());
    var q1ID = "your-field-id";
    var q2ID = "your-field-id";
    var q3ID = "your-field-id";
    var baseURL = 'https://docs.google.com/forms/d/e/your-form-id/formResponse?';
    var submitRef = '&submit=Submit';
    var submitURL = (baseURL + q1ID + "=" + sat + "&" + q2ID + "=" + rating + "&" + q3ID + "=" + comments + submitRef);
    console.log(submitURL);
    jQuery(this)[0].action = submitURL;
    jQuery('#input-feedback').text('Thank You!');
    });
    </script>
    </body>
    </html>

    OriginalEl autor Bhautik Nada

  7. 0

    Yo estaba luchando con el de los últimos días, nada funcionaba. Al final, he encontrado una muy buena solución.

    var sheetName = 'Sheet1'  
    var scriptProp = PropertiesService.getScriptProperties()  
    function intialSetup () {  
    var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()  
    scriptProp.setProperty('key', activeSpreadsheet.getId())  
    }  
    function doPost (e) {  
    var lock = LockService.getScriptLock()  
    lock.tryLock(10000)  
    try {  
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))  
    var sheet = doc.getSheetByName(sheetName)  
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]  
    var nextRow = sheet.getLastRow() + 1  
    var newRow = headers.map(function(header) {  
    return header === 'timestamp' ? new Date() : e.parameter[header]  
    })  
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])  
    return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))  
    .setMimeType(ContentService.MimeType.JSON)  
    }  
    catch (e) {  
    return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))  
    .setMimeType(ContentService.MimeType.JSON)  
    }  
    finally {  
    lock.releaseLock()  
    }  
    }  

    Para información más detallada, haga clic aquí

    OriginalEl autor ziaullahzia

Dejar respuesta

Please enter your comment!
Please enter your name here