-
-
Save netconstructor/2172391 to your computer and use it in GitHub Desktop.
Embedding and customising a Google Form in WordPress example (with dynamic parallel session selection)
This file contains hidden or 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); | |
| // 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(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment