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>
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">Update (3/15/2013): Added a longer example.
<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>
