Google-Formulare: Senden von Daten in eine Kalkulationstabelle

Wie kann ich das senden der Daten aus einem Webformular, um ein google-spreadsheet? Machte ich ein Formular mit Google Drive, aber um benutzerdefinierte CSS läuft, brauche ich zum kopieren der form-tag.

In meinem Fall, das ist, was google erzeugt für die senden-Schaltfläche Verhalten

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

Jedoch will ich den post Daten von meinem selbst entworfenen form zu den oben genannten Google-Formular Antwort-Tabelle. Hier ist mein form-code (mit 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>

Wenn mit den oben genannten Google form action=... bin ich auf die original Google-Formular beim drücken von senden, statt das Formular Einträge kopieren auf dem Arbeitsblatt.

Wenn der obige Ansatz nicht funktioniert, wie kann man sonst schicke ich die Formulardaten an eine E-Mail oder Google Drive?

Nützlicher link: eureka.ykyuen.info/2014/07/30/...

InformationsquelleAutor user3096434 | 2014-01-13

16

Hier ist was für mich gearbeitet:
1. Erstellen Sie Ihre benutzerdefinierte form
2. Erstellen Sie Ihre Google-Formular und betrachten Sie die Quelle nach dem Klick auf den live-form
3. Kopieren Sie den html-code beginnend mit <form> bis </form>
4. Einzelnen input-Felder in der Google-Formular müssen name und id-Attribute, die kopiert werden müssen, um zu Ihrem persönlichen Formular
5. Verwenden Sie die URL in der form action der Google-Formulare im Formular.
6. Stellen Sie sicher, dass auch der submit-button hat die ID-und name-Attribute abgleichen mit den Google-Formular Quelle.
7. Wenn Sie eine senden-nun, es wird Sie ergreifen, um die Google-Formular Antwort-Seite. Sie können dies vermeiden, indem Sie ein ajax Formular Absenden.
Wenn Ihr benutzerdefinierte Formular nicht validieren ein Google-Formular, obligatorisch element, dann werden Sie wieder umgeleitet werden, um Google-Formular-Seite.
- Obwohl ich nicht überprüfen, ob es notwendig ist, habe ich auch kopiert den scripts
- Alle gut, aber würde Sie in der Lage sein, mehr Informationen, was genau meinst du in Punkt 7, so wie ich bin umgeleitet wird, um das Google-Formular-Seite
- Können wir Griff-Abschnitt bilden
InformationsquelleAutor Sujay DSa
6

Komplette Schritt-für-Schritt - Anweisungen

Nach der Lektüre Martin Hawskey's gute Einführung (zum senden von Daten aus einem HTML-Formular, um eine Google-Tabelle) und sehen ein paar Lücken/Annahmen, die wir beschlossen, schreiben eine detaillierte/umfassende tutorial mit Schritt-für-Schritt-Anweisungen, die, die eine paar Menschen nützlich gefunden haben:

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

Der script speichert keine Daten gesendet, die über HTTP POST in der Google-Tabelle, und Optional leitet den Inhalt an eine E-Mail-Adresse. (nützlich, wenn Sie möchten, um benachrichtigt zu werden, der neue Daten)

HTML-Form:

Ergebnis (Zeile in Blatt):

Wir, kommentierte der Google-Skript, so hoffentlich ist es klar, aber wenn Sie alle Fragen haben, zögern Sie nicht zu Fragen! 🙂

InformationsquelleAutor nelsonic
3

Ich machte Dienstprogramm namens Magie Formen, fügen Sie einige zusätzliche features, die über, wie die Google-Endpunkte bieten. Erstellen Sie eine Magische form-Projekt und geben Sie einen HTTP-Endpunkt, wo Sie buchen können, die Formulare (regelmäßige HTTP oder Ajax), set custom redirects auf Erfolg/Fehler, und auch auto-Spalten erstellen, basierend auf was auch immer die Daten bekommt, die gepostet, die es ermöglicht für einige sehr flexible Einsatz-Fälle.
- Dieser link ist nicht aktuell
InformationsquelleAutor Ted Benson

Es scheint, dass kürzlich von Google aktualisiert hat seine Art und Weise Formulare erstellen, so dass nun die Namen der Felder sind versteckte Eingänge, die unterhalb der normalen Werte (https://github.com/heaversm/google-custom-form).

Habe ich auch schon versucht, die @nelsonic Ansatz, und es E-Mails die Antworten im JSON-format richtig, aber es muss nicht laden Sie Sie in die Google-Tabelle, zumindest für mich. Das ist, warum ich wollte, um zu kombinieren zwei Methoden zum speichern die Daten der Nutzer im Falle von mehr Verschleierung änderungen sind in der Zukunft von Google.

Also ich empfehle dir eine Webseite mit einer iframe im inneren. In diesem iframe enthalten würde, Ihre eigenen benutzerdefinierte Formular von einer anderen Website oder –wie in meinem Beispiel aus Gründen der Vereinfachung– von sich selbst über die srcdoc Attribut.

Dann kopieren Sie den names der verborgenen Eingänge sowie die action Formular-url von Ihrem Google-Formular-Vorschau-Seite und fügen Sie Sie in das benutzerdefinierte Formular.

Und schließlich, mit Ajax können wir ganz einfach senden Sie eine Kopie der Formulardaten an die normale Google-Tabelle, und die andere, um unsere E-Mails mit der @nelsonic Skript-Lösung.

Diese Weise mit dem iframe und Ajax, wir sind zu vermeiden, die url-Umleitung auf die 'Antwort registriert" - Seite, wenn das Formular an Google gesendet wird, aber wir können ausblenden, iframe aus der übergeordneten Ansicht zu 100% sicher sein.

Poste ich hier mein code für Sie, um es zu testen:

Benutzerdefiniertes Formular:

<!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>

Hoffe es konnte jemandem helfen!

Hi,Wo bist du mit name='Eintrag.314619096' ?

InformationsquelleAutor BigKangu

2

Kopieren Sie den HTML-von Google generierten Formular, und fügen Sie Sie auf Sie benutzerdefinierte HTML-Seite. Auf diese Weise können Sie eine Neugestaltung der Darstellung der google-Formular, wie Sie möchten, und mit jQuery oder ähnliche Techniken, die Sie hinzufügen können Sie eigene Logik, auf die form (falls erforderlich).

Hier haben Sie ein Beispiel:
http://www.immersionmedia.com/blog/customizing-and-styling-google-forms/
- Dieser link ist nicht aktuell
InformationsquelleAutor user10901

Es ist sehr einfach.

Erhalten Sie Ihre Formular-id aus dem FORM-tag "action" - Eigenschaft, die Sie bekommen können form-tag an der Quelle der Google-Formular web-Seite
Erhalten Sie Ihre Feld-ids
Ex. " - Eintrag.1472837636"

Bitte siehe unten Beispiel jetzt.

<!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>

InformationsquelleAutor Bhautik Nada

Ich zu kämpfen hatte, mit, dass aus vergangenen Tagen, nichts funktionierte. Am Ende habe ich eine sehr gute Lösung gefunden.

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()  
  }  

 }

Für weitere detail-Informationen klicken Sie hier

InformationsquelleAutor ziaullahzia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Google-Formulare: Senden von Daten in eine Kalkulationstabelle

Komplette Schritt-für-Schritt - Anweisungen

HTML-Form:

Ergebnis (Zeile in Blatt):