public
Last active

Embedding and customising a Google Form in WordPress example (with dynamic parallel session selection)

  • Download Gist
regform.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
<?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);
 
// if you are not using wordpress you can replace this next bit with some html code for the <head>
/* Set up WordPress stuff */
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
get_header();
 
?><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>
 
<!-- some more wordpress markup - the format of this is dependant on your theme -->
<?php get_sidebar(); ?>
<div id="content" class="float-right two-column">
 
<div class="post">
<?php
// this is where we output the modified Google Form we contructed at the beginning of this script
print_r($new_page);
?>
<!-- some more wordpress markup - the format of this is dependant on your theme -->
</div>
<!--/content -->
<?php get_footer(); ?>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.