Embedding and customising a Google Form (with dynamic parallel session selection)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$formKey = "blahblahblah"; // ENTER YOUR OWN VALUE - you can find your formkey by going to your live form in the spreadsheet and copying the value from the url | |
$redirectUrl = "http://www.yoursite.com/thank-you/"; // ENTER YOUR OWN VALUE - the url you want to direct people to after they fill in the form | |
$dataUrl = "https://spreadsheets0.google.com/spreadsheet/pub?blahblahblah&single=true&gid=1&output=csv"; // ENTER YOUR OWN VALUE - for parallel sessions you need to publish the public sheet via the share settings. This url is not published in the live webpage source | |
// function to get external webpages/data | |
function getData($url){ | |
$ch = curl_init(); | |
curl_setopt($ch, CURLOPT_URL, $url); | |
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); | |
curl_setopt($ch, CURLOPT_FRESH_CONNECT, 1); | |
curl_setopt($ch, CURLOPT_REFERER, "eAssessment Scotland"); | |
$res = curl_exec($ch); | |
curl_close($ch); | |
return $res; | |
} | |
// function to convert csv to array | |
function importCSV($input,$head=false,$delim=",",$len=5000) { | |
$return = array(); | |
$fiveMBs = 5 * 1024 * 1024; | |
$handle = fopen("php://temp/maxmemory:$fiveMBs", 'r+'); | |
fputs($handle, $input); | |
rewind($handle); | |
if ($head) { | |
$header = fgetcsv($handle, $len, $delim); | |
} | |
while (($data = fgetcsv($handle, $len, $delim)) !== FALSE) { | |
$return[$data[0]]['title'] = $data[1]; | |
$return[$data[0]]['left'] = $data[2]; | |
} | |
fclose($handle); | |
return $return; | |
} | |
// get current booking numbers | |
$data = importCSV(getData($dataUrl),true); | |
// get current Google Form | |
$response = getData("https://spreadsheets.google.com/spreadsheet/viewform?hl=en_GB&hl=en_GB&formkey=".$formKey); | |
// extract the Google Form body | |
preg_match_all("~<body[^>]*>(.*?)</body>~si", $response, $page); | |
$new_page = $page[1][0]; | |
// for parallel sessions read options into array | |
preg_match_all("~<option[^>]*>(.*?)</option>~si", $response, $options); | |
// cycle through all the parallel sessions and if a session is full mark it FULL and remove submit value | |
$count = 0; | |
foreach($data as $key => $value){ | |
$old_option = $new_option = '<option value="'.$key.' '.$data[$key]['title'].'">'.$key." ".$data[$key]['title'].'</option>'; | |
if ($data[$key]['left'] <= 0){ | |
$new_option = '<option value="">FULL '.$data[$key]['title'].'</option>'; | |
$new_page = str_replace($old_option,$new_option, $new_page); | |
} | |
} | |
// building the redirect after submit code | |
// build using info from http://www.2webvideo.com/video-production/customizing-google-docs-form-for-email-validation-with-free-jquery-script | |
$formRedirect = '<script type="text/javascript">var submitted=false;</script> | |
<iframe name="hidden_iframe" id="hidden_iframe" | |
style="display:none;" onload="if(submitted) | |
{window.location=\''.$redirectUrl.'\';}"></iframe> | |
<form action="https://spreadsheets.google.com/spreadsheet/formResponse?'; | |
// we replace the formAction with formRedirect | |
$formAction = '<form action="https://spreadsheets.google.com/spreadsheet/formResponse?'; | |
$new_page = str_replace($formAction, $formRedirect, $new_page); | |
?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>Untitled Document</title> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><style type='text/css'> | |
input,select,textarea,option{font-family:inherit;font-size:inherit}.ss-q-short,.ss-q-other{width:20em}.g-doc,.g-doc-1024,.g-doc-800{font-size:130%}.ss-base-body{font-size:.8em}.ss-textarea{max-width:99%}.ss-choice-item{margin:0;line-height:1.3em;padding-bottom:.5em}.ss-form-entry input{vertical-align:middle;margin-top:0}.g{color:#666}.i{display:inline}.ss-form-desc{font:inherit;width:99%;margin:0}.ss-q-title{display:block;font-weight:bold}.ss-q-help{display:block;color:#666;margin:.1em 0 .25em 0}.ss-q-long{max-width:90%}.ss-form-entry{zoom:1;}.ss-choices{list-style:none;margin:.5em 0 0 0;padding:0}.ss-powered-by{display:block;clear:left;color:#666;margin:1em 0.2em 0.2em}.ss-powered-by a:link,.ss-powered-by a:visited{color:#666}.ss-terms{display:block;clear:left;margin:1em 0.2em 0.2em}.ss-required-asterisk{color:#c43b1d}.ss-section-title{background-color:#eee;padding:0.4em;margin:2em -0.4em 0}.ss-section-description{margin-top:0.5em}.ss-no-ignore-whitespace{white-space:pre-wrap;white-space:-moz-pre-wrap;word-wrap:break-word}.ss-page-title{margin:0;padding:0}.ss-gridnumbers{text-align:center;border-bottom:1px solid #d3d8d3}.ss-gridnumber{display:block;padding:0.5em 0 .5em}.ss-gridrow{text-align:center;color:#666;border-bottom:1px solid #d3d8d3;padding:.5em .25em}.ss-grid-row-even{background-color:#fff}.ss-grid-row-odd{background-color:#f2f2f2}.ss-gridrow-leftlabel{padding:0 1em}.ss-grideditor-columns input{line-height:150%}.ss-grideditor-editor .ss-magiclist-ul span.ss-header{font-weight:bold;padding-right:1em}.ss-grid .errorbox-component .errorbox-good,.ss-grid .errorbox-component .errorbox-bad{display:none}.ss-scalenumbers{text-align:center}.ss-scalenumber{display:block;padding:0.5em 0 .5em}.ss-scalerow{text-align:center;color:#666;border:1px solid #d3d8d3;border-left:0;border-right:0;padding:.5em .25em}td.ss-leftlabel{text-align:right;padding-left:0}td.ss-rightlabel{text-align:left;padding-right:0}label{display:block;cursor:pointer}ul label{display:inline}hr{border:0;height:1px;background-color:#ddd}table{border-collapse:collapse}.ss-response-cell{background-color:#fff;border:1px solid #ccc;padding:.1em .5em}.ss-responses-header{background-color:#969696;color:#fff;padding:.2em .5em}.ss-old-form-response{background-color:#ffff3d;font-weight:bold}.errorbox-bad{border:2px solid #c43b1d;background-color:#ffe6cc;padding:2px}.errorheader{color:#c43b1d}.ss-no-ignore-whitespace{*white-space:pre} | |
</style> | |
<style type="text/css"> | |
label.error { | |
float: none; | |
color: red; | |
padding-left: .5em; | |
vertical-align: top; | |
} | |
</style> | |
<script type="text/javascript"> | |
// Using jQuery Validation plugin | |
// in the source of the live form you can identify the field names of required entries | |
// in this example entry.5.single is a required email address | |
// entry.6.single is checked to make sure it is a valid twitter username | |
// and entry.8.single is a parallel session validation eg if it is full you can't get in | |
$(document).ready(function(){ | |
jQuery.validator.addMethod("accept", function(value, element, param) { | |
if (value.length <= 0 || value.match(new RegExp("^" + param + "$"))) | |
return true; | |
}); | |
$("#ss-form").validate({ | |
rules: {"entry.2.single": "required", | |
"entry.3.single": "required", | |
"entry.4.single": "required", | |
"entry.5.single": { | |
required: true, | |
email: true | |
}, | |
"entry.6.single": { accept: "[a-zA-Z0-9_]+" }, | |
"entry.8.single": { | |
required: true, | |
minlength: 1 | |
} | |
}, | |
messages: { | |
"entry.6.single": "Please enter without '@'", | |
"entry.8.single": "This session is full. Please select another", | |
} | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<?php | |
// this is where we output the modified Google Form we contructed at the beginning of this script | |
print_r($new_page); | |
?> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment