Monday, June 4, 2012

Embedding a google drive form in your website

If you do not want to embed the complete google form iframe in your webpage, you can bypass that and have some simple code instead. The following lines show a way where I create the input field myself and set up everything, but the response gets stored in a google drive spreadsheet.
<form method="post" action="https://docs.google.com/spreadsheet/formResponse?formkey=xxxx">
<span style="font: 16px calibri">Enter email: </span>
<input type="text" name="entry.0.single" value="" style="font: 16px calibri" />
<input type="submit" value="Submit Email" style="font: 16px calibri" />
</form>
Check it out - can be useful in certain circumstances.

Here is a slightly longer version, with a form having four fields, where I take care of the form submission myself, using jQuery and jQuery Mobile (slightly dated version of both - for reference only). The jQuery .ajax(..) call is used here - works great. Note: do not use dataType: "jsonp" while POST-ing, since the call returns a complete HTML page which we have no use and can't process directly. While developing, use a tool like Firebug, so you are sure what is getting in and what is getting out.

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />

    <!-- Load all required scripts. -->
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="app-request" data-role="page" class="backdrop">
    <script type="text/javascript" charset="utf-8">
        function formSubmit()
        {
            console.log("Submitting form");
            // Collect form data
            var formData =
            {
                "entry.0.single" : $("#entry_0", $.mobile.activePage).val(),
                "entry.4.group" : $("#req_form", $.mobile.activePage).find("input[type='radio'][name='entry.4.group']:checked").val(),
                "pageNumber" : 0,
                "backupCache" : ""
            };
            // Show the loading image.
            $("#req_form", $.mobile.activePage).html("<img src='../common/images/progressbar.gif' />");
            $.ajax(
            {
                type: "POST",
                url: "https://docs.google.com/spreadsheet/formResponse?formkey=xxxx",
                data: formData,
                success: function (data)
                {
                    $("#req_form").html(
                        "Thanks for your interest!! We will be in touch shortly.<br />" +
                        "<br />" +
                        "Regards,<br />" +
                        "ConferenceToGo Team"
                    );
                },
                failure: function (data)
                {
                    $("#req_form").html(
                        "Sorry !! Couldn't send your request.<br />" +
                        "Can you please try again?<br />" +
                        "<br />" +
                        "Regards,<br />" +
                        "ConferenceToGo Team"
                    );
                }
            });
        }
    </script>
    <div data-role="header" style="height: 45px">
        <a href="#" class="ui-btn-left top-btn" data-icon="back" data-rel="back">Back</a>
    </div><!-- /header -->

    <div data-role="content" style="padding-top:5px;">
        <h2>ConferenceToGo for your Conference</h2>
        <div id="req_form">
            <p>
            Thanks for your interest in the ConferenceToGo app. Please fill out this short
            form and one of our team members will get back to you shortly.<br />
            <span style="color:Red">* Required</span>
            </p>
            <form data-ajax="false" onsubmit="formSubmit(); return false;">
                <input type="text" name="entry.0.single" placeholder="Your Name (*)" id="entry_0" value="" required />
                <fieldset data-role="controlgroup">
                    <legend>Typical number of attendees:</legend>
                    <label for="group_4_1">Less than 500</label>
                    <input type="radio" name="entry.4.group" value="Less than 500" id="group_4_1" />
                    <label for="group_4_2">500 to 1000</label>
                    <input type="radio" name="entry.4.group" value="500 to 1000" id="group_4_2" />
                    <label for="group_4_3">1000 to 5000</label>
                    <input type="radio" name="entry.4.group" value="1000 to 5000" id="group_4_3" />
                    <label for="group_4_4">More than 5000</label>
                    <input type="radio" name="entry.4.group" value="More than 5000" id="group_4_4" />
                </fieldset>
                <input type="submit" name="submit" value="Submit" data-inline="true" />
            </form>
        </div>
        <br />
        <br />
        <span style="font-size:small">Powered by <a href="http://docs.google.com" target="_new">Google Docs</a></span>
    </div><!-- /content -->
</div><!-- /page -->

</body>
</html>
 Update (3/15/2013): Added a longer example.