├── .gitignore
├── static-server.js
├── package.json
├── README.md
├── google-script.js
├── HISTORY.md
├── _par.html
├── _lon.html
├── index.html
├── LICENSE
├── _par-phone.html
└── _lon-phone.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/static-server.js:
--------------------------------------------------------------------------------
 1 | var Hapi   = require('hapi');
 2 | var Inert  = require('inert'); // serve static content
 3 | var Path   = require('path');
 4 | var server = new Hapi.Server();
 5 | var port   = process.env.PORT || 8000;
 6 | server.register(Inert, function () {
 7 |   server.connection({ port: port });
 8 |   server.route( {
 9 |     method: 'GET',
10 |     path: '/{param*}',
11 |     handler: {
12 |       directory: { path: Path.normalize(__dirname + '/') }
13 |     }
14 |   });
15 |   server.start(function() { console.log('Visit: http://127.0.0.1:' +port) });
16 | }); // requires a callback function but can be blank
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-form-to-google-sheet",
 3 |   "version": "1.0.2",
 4 |   "description": "post form directly to google spreadsheet without server",
 5 |   "main": "email.js",
 6 |   "scripts": {
 7 |     "start": "./node_modules/.bin/nodemon static-server.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/nelsonic/web-form-to-google-sheet.git"
12 |   },
13 |   "author": "this guy",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/nelsonic/web-form-to-google-sheet/issues"
17 |   },
18 |   "homepage": "https://github.com/nelsonic/web-form-to-google-sheet#readme",
19 |   "devDependencies": {
20 |     "codeclimate-test-reporter": "0.1.1",
21 |     "hapi": "^11.0.1",
22 |     "inert": "^3.1.0",
23 |     "istanbul": "^0.4.0",
24 |     "jsdoc": "^3.3.3",
25 |     "nodemon": "^1.7.3",
26 |     "qunit-tap": "^1.5.0",
27 |     "qunitjs": "^1.19.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Web Form to Google Sheet (*No Backend*)
 2 | 
 3 | A simple example of sending data from an ordinary web form
 4 | straight to a Google Spreadsheet *without a server*.
 5 | 
 6 | I created this code for a client, but it is **_not up-to-date_**.
 7 | I recommend checking out the walkthrough repo below instead:
 8 | https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
 9 | 
10 | <hr />
11 | <br />
12 | 
13 | ## Why? (*context*)
14 | 
15 | A *friend* called and asked for a *favor*:
16 | 
17 | > "*Can you set up a* ***web form***
18 | *that* ***posts data*** *to a*
19 | ***Google Spreadsheet***  
20 | ***without*** *a (server)* ***backend***...?
21 | *(We need it done by tomorrow)*"
22 | 
23 | *Never* one to turn down a chance to help a *friend*
24 | and *learn* something new, I agreed to the task!
25 | 
26 | ## Whaaaat? (*you can build things without backend?!*)
27 | 
28 | The *plan* is to *simulate* the `POST` request an *actual* Google Form sends when it submits a survey response to its google ("results") spreadsheet. Sounds simple. it is. kinda ...
29 | 
30 | ## How? >> Google Apps *Script*
31 | 
32 | This repo is just a quick example I made. If you want a full step-by-step tutorial, see:
33 | https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
34 | 
35 | ## Email
36 | 
37 | An *additional* requirement was to send an **email** (***IKR***!)
38 | when ever the HTML Form is submitted.  
39 | Thankfully, Google has a good Method for doing this:
40 | [MaillApp](https://developers.google.com/apps-script/reference/mail/mail-app)
41 | 
42 | # Phase 2 - Phone Number Experiment
43 | 
44 | > Hypothesis: for high value items some people will prefer to
45 | speak to a *person* on the phone instead of emails.
46 | Therefore having a form input for Phone Number will "*convert*"" better
47 | than email.
48 | 
49 | I've added two new files: `_lon-phone.html` and `_par-phone.html`
50 | to *test* this Hypothesis.
51 | 
52 | 
53 | 
54 | # Want *More*?
55 | 
56 | If you want *more*, please
57 | [***ask***](https://github.com/dwyl/web-form-to-google-sheet/pulls)!
58 | 
59 | <br />
60 | <br />
61 | 
62 | ## Background Reading
63 | 
64 | + AJAX post to google spreadsheet: https://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet which points to:
65 |   + https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/
66 | + MailApp Service: https://developers.google.com/apps-script/reference/mail/mail-app
67 | + I Posted this OverFlow Question because I *could* not get `MailApp.sendEmail`
68 | to work:
69 | https://stackoverflow.com/questions/33180172/why-does-mailapp-sendemail-from-google-spreadsheet-script-not-work
70 | 


--------------------------------------------------------------------------------
/google-script.js:
--------------------------------------------------------------------------------
  1 | /******************************************************************************
  2 |  * If you have any questions, please get in touch: contact.nelsonic@gmail.com *
  3 |  ******************************************************************************/
  4 | 
  5 | var LON_ADDRESS1 = "london.reservations@reservations.company.com";
  6 | var LON_ADDRESS2 = "london@reservations.company.com";
  7 | var PAR_ADDRESS  = "paris@reservations.company.com";
  8 | 
  9 | 
 10 | function dayOfWeek () {
 11 |   new Date().getDay();
 12 | }
 13 | 
 14 | function getAddress (e) {
 15 |   if(e.parameter['city'] === 'LON') {
 16 |     if(dayOfWeek() % 2 === 0) { // even days are Sun, Tues, Thurs
 17 |       return LON_ADDRESS1;
 18 |     }
 19 |     else { // Monday Wednesday Friday
 20 |       return LON_ADDRESS2;
 21 |     }
 22 | 
 23 |   }
 24 |   else {
 25 |    return PAR_ADDRESS;
 26 |   }
 27 | }
 28 | 
 29 | function doPost(e) {
 30 | 
 31 |   try {
 32 |     Logger.log(e); // the Google Script version of console.log see: Class Logger
 33 |     var ROW_NUMBER = record_data(e); // saves the data to the spreadsheet and returns ROW_NUMBER
 34 |     var TO_ADDRESS = getAddress(e);
 35 |     var START      = e.parameter['start_date'] || "no start"; // date or blank
 36 |     var END        = e.parameter['end_date']   || "no end"; // date or blank
 37 |     var CITY       = e.parameter['city'];
 38 |     var SLEEPS     = e.parameter['sleeps'] || "TBD";
 39 |     var SUBJECT    = "*MOBILE* Enquiry for " + CITY
 40 |     + " from: " + START  + " - " + END + " "
 41 |     + " for " + SLEEPS + " people "
 42 |     +" (Enquiry # " +ROW_NUMBER  + ") GO GET IT!"
 43 |     MailApp.sendEmail(TO_ADDRESS, SUBJECT,
 44 |                       "Please check the Google Spreadsheet https://goo.gl/EkRtIX");
 45 |     return ContentService    // return json success results
 46 |           .createTextOutput(
 47 |             JSON.stringify({"result":"success",
 48 |                             "data": JSON.stringify(e.parameters) }))
 49 |           .setMimeType(ContentService.MimeType.JSON);
 50 |   } catch(error) { // if error return this
 51 |     Logger.log(error);
 52 |     return ContentService
 53 |           .createTextOutput(JSON.stringify({"result":"error", "error": e}))
 54 |           .setMimeType(ContentService.MimeType.JSON);
 55 |   }
 56 | }
 57 | 
 58 | // new property service GLOBAL
 59 | var SCRIPT_PROP = PropertiesService.getScriptProperties();
 60 | // see: https://developers.google.com/apps-script/reference/properties/
 61 | 
 62 | /**
 63 |  * select the sheet
 64 |  */
 65 | function setup() {
 66 |     var doc = SpreadsheetApp.getActiveSpreadsheet();
 67 |     SCRIPT_PROP.setProperty("key", doc.getId());
 68 | }
 69 | 
 70 | /**
 71 |  * record_data inserts the data received from the html form submission
 72 |  * e is the data received from the POST
 73 |  * @param {Object} e - the POST parameters
 74 |  * @returns {Number} ROW_NUMBER - the row number for the latest row in the sheet.
 75 |  */
 76 | function record_data(e) {
 77 |   Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
 78 |   var ROW_NUMBER;
 79 |   try {
 80 |     var doc     = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
 81 |     var sheet   = doc.getSheetByName('LON+PAR'); // select the responses sheet
 82 |     var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
 83 |     var nextRow = sheet.getLastRow()+1; // get next row
 84 |     ROW_NUMBER  = nextRow; // this gets returned so we can included it in the email sbject
 85 |     var row     = [ new Date() ]; // first element in the row should always be a timestamp
 86 |     // loop through the header columns
 87 |     for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
 88 |       if(headers[i].length > 0 && e.parameter[headers[i]] !== undefined) {
 89 |         row.push(e.parameter[headers[i]]); // add data to row
 90 |       }
 91 |     }
 92 |     // more efficient to set values as [][] array than individually
 93 |     sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
 94 |   }
 95 |   catch(error) {
 96 |     Logger.log(e);
 97 |   }
 98 |   finally {
 99 |     return ROW_NUMBER;
100 |   }
101 | 
102 | }
103 | 


--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ### 1. Create a *New* Google Form
  3 | 
  4 | Open your ***Google Drive*** and create a new form:
  5 | 
  6 | ![01-google-drive-create-form](https://cloud.githubusercontent.com/assets/194400/10529330/d9c59f4a-7394-11e5-9e22-ad92c45553c3.png)
  7 | 
  8 | ### 2. Click "Get Started"
  9 | 
 10 | Skip the Wizard and dive straight into building your form:
 11 | 
 12 | ![02-gform-wizard-get-started](https://cloud.githubusercontent.com/assets/194400/10529351/1b604270-7395-11e5-8617-92152180e157.png)
 13 | 
 14 | 
 15 | ### 3. Add a Few Questions to your Form
 16 | 
 17 | Add a couple of fields to your form.
 18 | 
 19 | ![03-gform-wizard-create-field](https://cloud.githubusercontent.com/assets/194400/10529380/565eb852-7395-11e5-99a4-50a80a77fd54.png)
 20 | 
 21 | ### 4. Click on "View Responses"
 22 | 
 23 | To create the Spreadsheet where your form data will be stored:
 24 | 
 25 | ![04-sample-form](https://cloud.githubusercontent.com/assets/194400/10529416/c2fc9538-7395-11e5-99ee-d0ddc9d1e16e.png)
 26 | 
 27 | ### 5. (Click to) *Create* the Spreadsheet
 28 | 
 29 | Create a new spreadsheet for the results:
 30 | 
 31 | ![05-create-responses-spreadsheet](https://cloud.githubusercontent.com/assets/194400/10529468/2153de70-7396-11e5-996a-908c2ac7e2ac.png)
 32 | 
 33 | ### 6. Open the Form in *Firefox* & Submit Some Data
 34 | 
 35 | Open the form in ***Firefox*** and open the ***Web Inspector*** to "*Network*" and populate the form:
 36 | 
 37 | ![06-firefox-inspector-data-in-form](https://cloud.githubusercontent.com/assets/194400/10529708/38a8a23e-7398-11e5-9528-314ce856ef8f.png)
 38 | 
 39 | ***Submit*** the form with dummy data.
 40 | 
 41 | ### 7. View the cURL for the `POST` Request issued by the Browser
 42 | 
 43 | After you click `Submit` on the form, you will see the request(s)
 44 | being sent to the server, the main one you're interested in
 45 | is the `POST` request which sends the form data to Google.
 46 | 
 47 | ![07-firefox-inspector-copy-as-curl](https://cloud.githubusercontent.com/assets/194400/10529578/1e03925a-7397-11e5-8dec-9dce7523a8b0.png)
 48 | 
 49 | Right-click on the `POST` row in the "*Network*" inspector then click on "***Copy as cURL***" to get the code you will need to Submit the form from your command line.
 50 | 
 51 | #### 7.1 Example cURL Request
 52 | 
 53 | ```sh
 54 | curl 'https://docs.google.com/forms/d/1qwGbbUAT1yPZ-yVqXzIg8h0PGW281srrkBtCdJwFgdA/formResponse' \
 55 | -H 'Host: docs.google.com' \
 56 | -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:41.0) Gecko/20100101 Firefox/41.0' \
 57 | -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8' \
 58 | -H 'Accept-Language: en-US,en;q=0.5' --compressed \
 59 | -H 'Referer: https://docs.google.com/forms/d/1qwGbbUAT1yPZ-yVqXzIg8h0PGW281srrkBtCdJwFgdA/viewform?fbzx=-4417037870062614176' \
 60 | -H 'Cookie: S=spreadsheet_forms=QDGgsetEGofY8ACPHHufQw; NID=71=Remk3p7UeYnI01GsXgQ3acVcBgiN8iKiBVrXK9GdwVnop4j9kaBDSWlxWl1vuvTKPdrK66DdXWRFTFo-2Onj0zUyCaJ1xfMACh8hTUb0XBIVYdVJdkr1jvvmlkhZVAkgbow9Scr_X17OI-M9tw4evTQHJ4tU6P7xM695WlCtODmubmt57QgkpTAXNwdZrQ05GqRhWfw; PREF=ID=1111111111111111:FF=0:TM=1442226709:LM=1442226709:V=1:S=es4FGMNhg_KRMNf0; OGP=-5061451:' \
 61 | -H 'Connection: keep-alive' \
 62 | --data 'entry.507774908=23&entry.241430440=tesa&entry.335159234=Female&draftResponse=%5B%2C%2C%22-4417037870062614176%22%5D%0D%0A&pageHistory=0&fvv=0&fbzx=-4417037870062614176'
 63 | ```
 64 | 
 65 | ### 8. Confirm the response was recorded in the spreadsheet
 66 | 
 67 | Go back to the Google Spreadsheet you created in **Step 5** above.
 68 | 
 69 | ![08-gform-response-in-sheet](https://cloud.githubusercontent.com/assets/194400/10529619/774bec5e-7397-11e5-85ad-619f9ae3b195.png)
 70 | 
 71 | The data is exactly as we submitted it in the Google Form in **Step 6**.
 72 | 
 73 | ### 9. Attempt to Re-Submit the Form using cURL
 74 | 
 75 | Paste the cURL command you copied from FireFox into your terminal
 76 | and hit the enter key:
 77 | 
 78 | ![09-curl-response-in-terminal](https://cloud.githubusercontent.com/assets/194400/10529836/40e63c4e-7399-11e5-8b46-468ec0035c39.png)
 79 | 
 80 | ## The *Fun* Part ...
 81 | 
 82 | ### 10. Craft your HTML Form with JQuery Ajax Submission
 83 | 
 84 | built a basic HTML form with the same fields as the Google Form:
 85 | 
 86 | ![html form](https://cloud.githubusercontent.com/assets/194400/10537810/380648f0-73ec-11e5-96c6-26b62145dbe3.png)
 87 | 
 88 | tried to submit the form using ***JQuery Ajax*** *directly* to
 89 | google but this was rejected because of CORS...
 90 | 
 91 | ![Ajax Form Submission Blocked by CORS](https://cloud.githubusercontent.com/assets/194400/10537624/0d9fa076-73eb-11e5-9532-d3b4d52fd1d5.png)
 92 | 
 93 | We can either attempt to get JQuery to set the correct headers for this or...
 94 | 
 95 | ### 11. Use an *iFrame* ?
 96 | 
 97 | Still have the same CORS issue ... need to *re-think* this.
 98 | 
 99 | ## Background Reading
100 | 
101 | + Record HTTP Form `POST`: https://stackoverflow.com/questions/5119861/record-http-form-posts-via-a-browser
102 | + Firefox copy cURL Command: https://hacks.mozilla.org/2013/08/firebug-1-12-new-features/#copyAsCURL
103 | + Add headers to JQuery Ajax request:
104 | https://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery
105 | + CORS info: https://stackoverflow.com/questions/24371734/firefox-cors-request-giving-cross-origin-request-blocked-despite-headers
106 | + CORS is is *meant* to block this... https://stackoverflow.com/questions/23607901/cross-origin-request-blocked-on
107 | 


--------------------------------------------------------------------------------
/_par.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |     /**
  3 |     * CSS coded to be mobile first. All media
  4 |     * queries are then added by individual component
  5 |     * to adjust for the various break points.
  6 |     **/
  7 |     #landing .ofs-LandingPage__Heading {
  8 |         text-align: center;
  9 |     }
 10 |     /**
 11 |     * Background image is applied in two different
 12 |     * ways in order to get desired responsive behavior.
 13 |     * Mobile version: image is contained in
 14 |     * ofs-Heading__BackgroundImage with
 15 |     * ofs-LandingPage__Heading as the parent. Desktop
 16 |     * version: ofs-Heading__BackgroundImage is hidden,
 17 |     * and the image is contained in the ::after element
 18 |     * for ofs-LandingPage__Headinga
 19 |     **/
 20 |     #landing .ofs-Heading__BackgroundImage {
 21 |         display: block;
 22 |         min-height: 200px;
 23 |         width: 100%;
 24 |         padding-bottom: calc((5/8) * 100%);
 25 |         background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg');
 26 |         background-repeat: no-repeat;
 27 |         background-position: 50% 50%;
 28 |         -ms-background-size: cover;
 29 |         -o-background-size: cover;
 30 |         -moz-background-size: cover;
 31 |         -webkit-background-size: cover;
 32 |         background-size: cover;
 33 |     }
 34 |     #landing .ofs-Heading__TextOnBackground {
 35 |         margin: 1.5rem 0;
 36 |     }
 37 |     /* Override h1 styles for mobile */
 38 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
 39 |         padding: 0 2.5rem;
 40 |         font-size: 1.625rem;
 41 |         line-height: 2rem;
 42 |     }
 43 |     /* Override h2 styles for mobile */
 44 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
 45 |         font-size: 1rem;
 46 |         line-height: 1.5rem;
 47 |     }
 48 |     @media screen and (min-width: 641px) {
 49 |         #landing .ofs-LandingPage__Heading {
 50 |             position: relative;
 51 |             min-height: 380px; /* Match height of standard screen width, but don't fix, because we need mobile to expand height to fit */
 52 |             background-color: #2a2730; /* Set a dark background for the image opacity to fade into */
 53 |             z-index: 1;
 54 |         }
 55 |         #landing .ofs-LandingPage__Heading::after {
 56 |             content: ' ';
 57 |             display: block;
 58 |             position: absolute;
 59 |             left: 0;
 60 |             top: 0;
 61 |             width: 100%;
 62 |             height: 100%;
 63 |             opacity: 0.6; /* Used in conjunction with the element's background-color */
 64 |             background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg.');
 65 |             background-repeat: no-repeat;
 66 |             background-position: 50% 50%;
 67 |             -ms-background-size: cover;
 68 |             -o-background-size: cover;
 69 |             -moz-background-size: cover;
 70 |             -webkit-background-size: cover;
 71 |             background-size: cover;
 72 |             z-index: -1;
 73 |         }
 74 |         /* vertically and horizontally center group of elements in heading */
 75 |         #landing .ofs-LandingPage__Contents {
 76 |             top: 50%;
 77 |             left: 50%;
 78 |             -webkit-transform: translate(-50%, -50%);
 79 |             -ms-transform: translate(-50%, -50%);
 80 |             transform: translate(-50%, -50%);
 81 |             position: absolute;
 82 |         }
 83 |         /* This element is used in the mobile version and must be hidden for larger screens */
 84 |         #landing .ofs-Heading__BackgroundImage {
 85 |             display: none;
 86 |         }
 87 |         /* Remove margin since it throws off the vertical centering for parent */
 88 |         #landing .ofs-Heading__TextOnBackground {
 89 |             margin-top: 0;
 90 |         }
 91 |         /* Forces the text color to white for text on-top of background images */
 92 |         #landing .ofs-Heading__TextOnBackground h1,
 93 |         #landing .ofs-Heading__TextOnBackground h2,
 94 |         #landing .ofs-Heading__TextOnBackground h3,
 95 |         #landing .ofs-Heading__TextOnBackground h4,
 96 |         #landing .ofs-Heading__TextOnBackground h5,
 97 |         #landing .ofs-Heading__TextOnBackground h6 {
 98 |             color: white;
 99 |         }
100 |         /* Reset h1 & h2 after custom mobile responsiveness */
101 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
102 |             margin-bottom: .5rem; /* fix to pull the sub-text closer to the header */
103 |             padding: 0;
104 |             font-size: 2.3125rem;
105 |             line-height: 3rem;
106 |         }
107 |         /* Reset h1 & h2 after custom mobile responsiveness */
108 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
109 |             width: 430px;
110 |             font-size: 1.3125rem;
111 |             line-height: 2rem;
112 |             margin-left: auto;
113 |             margin-right: auto;
114 |         }
115 |     }
116 |     #landing .ofs-Heading__SearchBar {
117 |         padding: 1.5rem;
118 |         border-radius: 2px;
119 |         margin: 1rem auto;
120 |     }
121 |     /* Wrapper for Arrival and Departure fields. This gets modified from screensizes 641-851px */
122 |     .ofs-Heading__SearchBarColumnWrapper {
123 |         margin-bottom: 0;
124 |     }
125 |     /* Eliminate extra spacing between Form and value props */
126 |     .ofs-Heading__SearchBar .ofs-Form {
127 |         margin-bottom: 0;
128 |     }
129 |     /* Aligns all of the search placeholders left */
130 |     .ofs-Heading__SearchBar .ofs-Form .ofs-Input {
131 |         text-align: left;
132 |     }
133 |     /* Fix for inline forms without labels */
134 |     .ofs-Button--inline {
135 |         margin-top: 1.5rem;
136 |     }
137 |     /* Custom grid style for laptop (851px+) */
138 |     .ofs-Grid__Column--medium-half {
139 |         width: 100%;
140 |     }
141 |     /* Custom grid style to always be 50% regardless of screensize */
142 |     .ofs-Grid__Column--permanent-half {
143 |         width: 50%;
144 |     }
145 |     #landing .CallToAction-browse-top{
146 |         display: none;
147 |         text-align: right;
148 |         padding-bottom: 0.5rem;
149 |         }
150 |      #landing .CallToAction-browse-bottom{
151 |         display:block;
152 |         padding-top: 0.5rem;
153 |         text-align: left;
154 |      }
155 |     @media screen and (min-width: 641px) {
156 |         .ofs-Button--inline {
157 |         margin-top: 0rem;
158 |     }
159 |     }
160 |     @media screen and (min-width: 851px) {
161 |         /* Expand and constrain width slightly so that everything fits inline */
162 |         #landing .ofs-Heading__SearchBar {
163 |            width: 750px;
164 |         }
165 |         /* Remove input field's bottom margins when they're inline */
166 |         #landing .ofs-Heading__SearchBarColumnWrapper {
167 |             margin-bottom: 0;
168 |         }
169 |         /* Custom grid style for laptop (851px+) */
170 |         #landing .ofs-Grid__Column--medium-half {
171 |             width: 50%;
172 |         }
173 |     }
174 |     /* Modified homepage styling to make spacing consistent */
175 |     .about-wrap-container{
176 |         background-color: #F8F6F1;
177 |     }
178 |     .about-wrap {
179 |         margin-bottom: 2.5rem;
180 |     }
181 |     .about-wrap .heading {
182 |         text-align: center;
183 |     }
184 |     .about-wrap .values {
185 |         width: 100%;
186 |         padding-top: 1rem;
187 |     }
188 |     .about-wrap .values:after {
189 |         content: ".";
190 |         visibility: hidden;
191 |         display: block;
192 |         height: 0;
193 |         clear: both
194 |     }
195 |     .about-wrap .values__Item {
196 |         padding: 0 5px;
197 |         width: 50%;
198 |     }
199 |     .about-wrap .values--upper {
200 |         margin-bottom: 2.5rem;
201 |     }
202 |     .about-wrap .values--upper,
203 |     .about-wrap .values--lower {
204 |         padding: 0 5px;
205 |     }
206 |     .about-wrap .values__Item__Image {
207 |         display: block;
208 |         width: 130px;
209 |         height: 130px;
210 |         margin: 0 auto 2rem auto;
211 |     }
212 |     .about-wrap .values__Item__Copy {
213 |         text-align: center;
214 |         margin-bottom: 0;
215 |         padding: 0 1rem;
216 |     }
217 |     .press-wrap {
218 |         border-top: 1px solid #cdcdd1;
219 |         border-bottom: 1px solid #cdcdd1;
220 |         display: block;
221 |         margin-bottom: 2.5rem;
222 |     }
223 |     @media only screen and (min-width:641px) {
224 |         .about-wrap .values--upper,
225 |         .about-wrap .values--lower {
226 |             width: 50%;
227 |             float: left;
228 |             margin-bottom: 0;
229 |         }
230 |     }
231 |     @media only screen and (min-width:1025px) {
232 |         .about-wrap .values__Item {
233 |             padding: 0 40px;
234 |         }
235 |     }
236 |     .browse-homes{
237 |         color: white;
238 |         background-color: #2A2730;
239 |     }
240 |     /*Video container*/
241 |     .video-container{
242 |         width: 500px;
243 |         height: 281px;
244 |     }
245 |     @media only screen and (max-width: 500px){
246 |         .video-container{
247 |             width: 282px;
248 |             height: 158px;
249 |         }
250 |     }
251 |     .heading{
252 |         text-align: center;
253 |     }
254 |     .search-bar{
255 |         padding: 1.5rem 0;
256 |         background-color: #F6F7F9;
257 |     }
258 |     .search-cta{
259 |         padding-left: 0.5rem;
260 |         padding-right: 0.5rem;
261 |         padding-bottom: 1rem;
262 |     }
263 |     .sleep-selector{
264 |         padding-bottom: 1.5rem;
265 |     }
266 |     .section{
267 |         margin: 2rem 0;
268 |     }
269 |     /******************* MOBILE SEM LANDING PAGE STYLES ***********************/
270 |     .rf-Message { display:block;color:#d80033;font-size:.875rem;line-height:1rem;}
271 |     #email-invalid, .browse_all { display: none; }
272 |     /* HIDE Nav Menu & FOOTER ON MOBILE LANDING PAGE - Requested by Naza */
273 |     .ofs-GlobalFooter .ofs-GlobalFooter__Links, .ofs-GlobalFooter__UserConfig { display: none !important; }
274 |     #mobile-menu-toggle, #mobile-contact-toggle, .ofs-GlobalHeader__MobileSearchWrapper { display: none !important; }
275 | </style>
276 | 
277 | <div id="landing">
278 | 
279 |     <div class="ofs-LandingPage__Heading">
280 |         <div class="ofs-LandingPage__Contents">
281 |           <div class="ofs-Heading__TextOnBackground">
282 |             <h2 class="ofs-EnquiryForm__Title">
283 |               500 of the finest Parisian homes <br/>
284 |               Wifi as standard and iPhone for data <br/>
285 |               Linens, towels &amp; L&#8217;Occitane toiletries
286 |             </h2>
287 |           </div>
288 |             <!-- only visible on mobile -->
289 |             <div class="ofs-Heading__BackgroundImage" id="LONDON_BG"></div>
290 |         </div>
291 |     </div>
292 | 
293 | 
294 |     <div class="ofs-Container">
295 |         <div class="ofs-Container__Content">
296 |             <div class="ofs-EditorialGrid section">
297 |                 <div class="ofs-EditorialGrid__Column ofs-EditorialGrid__Column--half">
298 |                     <div class="ofs-Grid search-cta">
299 |                         <h3>Put your feet up. Our Paris Specialists will find you the perfect home</h3>
300 |                         <p>With just a few details, our dedicated Reservations team will get back to you with a shortlist of homes that meet your requirements. It's quick and easy.</p>
301 |                         <p>Once submitted, you will be free to browse our homes!</p>
302 |                     </div>
303 |                     <form class="ofs-Form" id="gform">
304 |                         <input type="hidden" id="city" name="city" value="PAR" />
305 |                         <div class="ofs-grid">
306 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
307 |                                 <div data-ofs-component="newDatepicker" id="start_date" data-name="start_date" data-placeholder="Arrival"></div>
308 |                             </div>
309 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
310 |                                 <div data-ofs-component="newDatepicker" id="end_date" data-name="end_date" data-placeholder="Departure"></div>
311 |                             </div>
312 |                         </div>
313 |                         <div class="ofs-grid">
314 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
315 |                                 <select name="sleeps" id="sleeps" data-ofs-component="simpleChoice">
316 |                                     <option value="">Guests</option>
317 |                                     <option value=1>1</option>
318 |                                     <option value=2>2</option>
319 |                                     <option value=3>3</option>
320 |                                     <option value=4>4</option>
321 |                                     <option value=5>5</option>
322 |                                     <option value=6>6</option>
323 |                                     <option value=7>7</option>
324 |                                     <option value=8>8</option>
325 |                                     <option value=9>9</option>
326 |                                 </select>
327 |                             </div>
328 |                             <div class="ofs-grid">
329 |                              <div class="ofs-Grid__Column ofs-Grid__Column--half">
330 |                                   <div class="ofs-Form__Field">
331 |                                   <p class="ofs-Form__Label" id="email-label"></p> <!--spacer-->
332 |                                   <input required name="email" id="email" type="email" placeholder="Email address*" />
333 |                                   <span id="email-invalid" class="rf-Message">Must be a valid email address</span>
334 |                                   </div>
335 |                               </div>
336 |                             </div>
337 | 
338 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
339 |                                 <button class="ofs-Button ofs-Button--small ofs-Button--full-width ofs-Button--inline">Submit</button>
340 |                                 <div class="ofs-Form__HelpText rf-Required">* indicates a required field</div>
341 |                             </div>
342 |                         </div>
343 |                     </form>
344 |                     <div class="heading">
345 |                       <h2 id="thankyou" style="display:none">Thanks! We will contact you soon!</h2>
346 |                     <di>
347 |                     <a class="ofs-Button" id="browse_all" style="display:none"
348 |                     href="https://www.onefinestay.com/search/?city=465">
349 |                       Browse All Paris Homes
350 |                     </a>
351 |                 </div>
352 |             </div>
353 |         </div>
354 |     </div>
355 | </div>
356 | 
357 | <!-- Form submission handler to GoogleDocs -->
358 | <script data-cfasync="false" type="text/javascript">
359 |   // Client side email validation Requested by Naza ... See: https://stackoverflow.com/a/46181
360 |   function validEmail(email) {
361 |     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
362 |     return re.test(email);
363 |   }
364 |   // get all data in form and return object
365 |   function getFormData() {
366 |     var data   = {
367 |       city       : document.getElementById("city").value,
368 |       start_date : document.getElementsByName("start_date")[1].value,
369 |       end_date   : document.getElementsByName("end_date")[1].value,
370 |       sleeps     : document.getElementsByName("sleeps")[0].value,
371 |       email      : document.getElementById("email").value
372 |     }
373 |     console.log(data);
374 |     return data;
375 |   }
376 |   // set the browse all url
377 |   // e.g: https://www.onefinestay.com/search/?city=108&start_date=2015-10-23&end_date=2015-10-31&sleeps=5
378 |   function browseAllUrl (data) {
379 |     var url = document.getElementById("browse_all").getAttribute('href');  // $('.browse_all').attr("href");
380 |     var params = "&start_date="    + data.start_date; // $('#start_date').val();
381 |     params = params + "&end_date=" + data.end_date;   // $('#end_date').val();
382 |     params = params + "&sleeps="   + data.sleeps;     // $('#sleeps option:selected').val();
383 |     url = url + params.replace(/\//g,'-');
384 |     console.log("Browse all:" + url);
385 |     document.getElementById("browse_all").href = url; // $('.browse_all').attr("href", url);
386 |   }
387 |   // handles form submit withtout any jquery
388 |   function handleFormSubmit(event) {
389 |     event.preventDefault();     // we are submitting via xhr below
390 |     var data = getFormData();   // get the values submitted in the form
391 |     if( !validEmail(data.email) ) {
392 |       document.getElementById('email-invalid').style.display = 'block';
393 |       return false;
394 |     } else {
395 |       browseAllUrl(data); // set the url for search results page.
396 |       var url = "https://script.google.com/macros/s/AKfycbzFU_-z9lEQFy0exGZFlbd6dvtD4V07JaDI_3i_4J52OR3v8E_r/exec"; // prod
397 |       var xhr = new XMLHttpRequest();
398 |       xhr.open('POST', url);
399 |       // xhr.withCredentials = true;
400 |       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
401 |       xhr.onreadystatechange = function() {
402 |           console.log( xhr.status, xhr.statusText )
403 |           console.log(xhr.responseText);
404 |           document.getElementById('gform').style.display = 'none'; // hide form
405 |           document.getElementById('thankyou').style.display = 'block';
406 |           document.getElementById('browse_all').style.display = 'block';
407 |           return;
408 |       };
409 |       // url encode form data for sending as post data
410 |       var encoded = Object.keys(data).map(function(k) {
411 |           return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
412 |       }).join('&')
413 |       xhr.send(encoded);
414 |     }
415 |   }
416 | 
417 |   function loaded() {
418 |     // bind to the submit event of our form
419 |     var form = document.getElementById('gform');
420 |     form.addEventListener("submit", handleFormSubmit, false);
421 |   };
422 |   document.addEventListener('DOMContentLoaded', loaded, false);
423 | </script>
424 | 


--------------------------------------------------------------------------------
/_lon.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |     /**
  3 |     * CSS coded to be mobile first. All media
  4 |     * queries are then added by individual component
  5 |     * to adjust for the various break points.
  6 |     **/
  7 |     #landing .ofs-LandingPage__Heading {
  8 |         text-align: center;
  9 |     }
 10 |     /**
 11 |     * Background image is applied in two different
 12 |     * ways in order to get desired responsive behavior.
 13 |     * Mobile version: image is contained in
 14 |     * ofs-Heading__BackgroundImage with
 15 |     * ofs-LandingPage__Heading as the parent. Desktop
 16 |     * version: ofs-Heading__BackgroundImage is hidden,
 17 |     * and the image is contained in the ::after element
 18 |     * for ofs-LandingPage__Headinga
 19 |     **/
 20 |     #landing .ofs-Heading__BackgroundImage {
 21 |         display: block;
 22 |         min-height: 200px;
 23 |         width: 100%;
 24 |         padding-bottom: calc((5/8) * 100%);
 25 |         background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/landingpage-london-sem.jpg');
 26 |         background-repeat: no-repeat;
 27 |         background-position: 50% 50%;
 28 |         -ms-background-size: cover;
 29 |         -o-background-size: cover;
 30 |         -moz-background-size: cover;
 31 |         -webkit-background-size: cover;
 32 |         background-size: cover;
 33 |     }
 34 |     #landing .ofs-Heading__TextOnBackground {
 35 |         margin: 1.5rem 0;
 36 |     }
 37 |     /* Override h1 styles for mobile */
 38 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
 39 |         padding: 0 2.5rem;
 40 |         font-size: 1.625rem;
 41 |         line-height: 2rem;
 42 |     }
 43 |     /* Override h2 styles for mobile */
 44 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
 45 |         font-size: 1rem;
 46 |         line-height: 1.5rem;
 47 |     }
 48 |     @media screen and (min-width: 641px) {
 49 |         #landing .ofs-LandingPage__Heading {
 50 |             position: relative;
 51 |             min-height: 380px; /* Match height of standard screen width, but don't fix, because we need mobile to expand height to fit */
 52 |             background-color: #2a2730; /* Set a dark background for the image opacity to fade into */
 53 |             z-index: 1;
 54 |         }
 55 |         #landing .ofs-LandingPage__Heading::after {
 56 |             content: ' ';
 57 |             display: block;
 58 |             position: absolute;
 59 |             left: 0;
 60 |             top: 0;
 61 |             width: 100%;
 62 |             height: 100%;
 63 |             opacity: 0.6; /* Used in conjunction with the element's background-color */
 64 |             background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/landingpage-london-sem.jpg');
 65 |             background-repeat: no-repeat;
 66 |             background-position: 50% 50%;
 67 |             -ms-background-size: cover;
 68 |             -o-background-size: cover;
 69 |             -moz-background-size: cover;
 70 |             -webkit-background-size: cover;
 71 |             background-size: cover;
 72 |             z-index: -1;
 73 |         }
 74 |         /* vertically and horizontally center group of elements in heading */
 75 |         #landing .ofs-LandingPage__Contents {
 76 |             top: 50%;
 77 |             left: 50%;
 78 |             -webkit-transform: translate(-50%, -50%);
 79 |             -ms-transform: translate(-50%, -50%);
 80 |             transform: translate(-50%, -50%);
 81 |             position: absolute;
 82 |         }
 83 |         /* This element is used in the mobile version and must be hidden for larger screens */
 84 |         #landing .ofs-Heading__BackgroundImage {
 85 |             display: none;
 86 |         }
 87 |         /* Remove margin since it throws off the vertical centering for parent */
 88 |         #landing .ofs-Heading__TextOnBackground {
 89 |             margin-top: 0;
 90 |         }
 91 |         /* Forces the text color to white for text on-top of background images */
 92 |         #landing .ofs-Heading__TextOnBackground h1,
 93 |         #landing .ofs-Heading__TextOnBackground h2,
 94 |         #landing .ofs-Heading__TextOnBackground h3,
 95 |         #landing .ofs-Heading__TextOnBackground h4,
 96 |         #landing .ofs-Heading__TextOnBackground h5,
 97 |         #landing .ofs-Heading__TextOnBackground h6 {
 98 |             color: white;
 99 |         }
100 |         /* Reset h1 & h2 after custom mobile responsiveness */
101 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
102 |             margin-bottom: .5rem; /* fix to pull the sub-text closer to the header */
103 |             padding: 0;
104 |             font-size: 2.3125rem;
105 |             line-height: 3rem;
106 |         }
107 |         /* Reset h1 & h2 after custom mobile responsiveness */
108 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
109 |             width: 430px;
110 |             font-size: 1.3125rem;
111 |             line-height: 2rem;
112 |             margin-left: auto;
113 |             margin-right: auto;
114 |         }
115 |     }
116 |     #landing .ofs-Heading__SearchBar {
117 |         padding: 1.5rem;
118 |         border-radius: 2px;
119 |         margin: 1rem auto;
120 |     }
121 |     /* Wrapper for Arrival and Departure fields. This gets modified from screensizes 641-851px */
122 |     .ofs-Heading__SearchBarColumnWrapper {
123 |         margin-bottom: 0;
124 |     }
125 |     /* Eliminate extra spacing between Form and value props */
126 |     .ofs-Heading__SearchBar .ofs-Form {
127 |         margin-bottom: 0;
128 |     }
129 |     /* Aligns all of the search placeholders left */
130 |     .ofs-Heading__SearchBar .ofs-Form .ofs-Input {
131 |         text-align: left;
132 |     }
133 |     /* Fix for inline forms without labels */
134 |     .ofs-Button--inline {
135 |         margin-top: 1.5rem;
136 |     }
137 |     /* Custom grid style for laptop (851px+) */
138 |     .ofs-Grid__Column--medium-half {
139 |         width: 100%;
140 |     }
141 |     /* Custom grid style to always be 50% regardless of screensize */
142 |     .ofs-Grid__Column--permanent-half {
143 |         width: 50%;
144 |     }
145 |     #landing .CallToAction-browse-top{
146 |         display: none;
147 |         text-align: right;
148 |         padding-bottom: 0.5rem;
149 |         }
150 |      #landing .CallToAction-browse-bottom{
151 |         display:block;
152 |         padding-top: 0.5rem;
153 |         text-align: left;
154 |      }
155 |     @media screen and (min-width: 641px) {
156 |         .ofs-Button--inline {
157 |         margin-top: 0rem;
158 |     }
159 |     }
160 |     @media screen and (min-width: 851px) {
161 |         /* Expand and constrain width slightly so that everything fits inline */
162 |         #landing .ofs-Heading__SearchBar {
163 |            width: 750px;
164 |         }
165 |         /* Remove input field's bottom margins when they're inline */
166 |         #landing .ofs-Heading__SearchBarColumnWrapper {
167 |             margin-bottom: 0;
168 |         }
169 |         /* Custom grid style for laptop (851px+) */
170 |         #landing .ofs-Grid__Column--medium-half {
171 |             width: 50%;
172 |         }
173 |     }
174 |     /* Modified homepage styling to make spacing consistent */
175 |     .about-wrap-container{
176 |         background-color: #F8F6F1;
177 |     }
178 |     .about-wrap {
179 |         margin-bottom: 2.5rem;
180 |     }
181 |     .about-wrap .heading {
182 |         text-align: center;
183 |     }
184 |     .about-wrap .values {
185 |         width: 100%;
186 |         padding-top: 1rem;
187 |     }
188 |     .about-wrap .values:after {
189 |         content: ".";
190 |         visibility: hidden;
191 |         display: block;
192 |         height: 0;
193 |         clear: both
194 |     }
195 |     .about-wrap .values__Item {
196 |         padding: 0 5px;
197 |         width: 50%;
198 |     }
199 |     .about-wrap .values--upper {
200 |         margin-bottom: 2.5rem;
201 |     }
202 |     .about-wrap .values--upper,
203 |     .about-wrap .values--lower {
204 |         padding: 0 5px;
205 |     }
206 |     .about-wrap .values__Item__Image {
207 |         display: block;
208 |         width: 130px;
209 |         height: 130px;
210 |         margin: 0 auto 2rem auto;
211 |     }
212 |     .about-wrap .values__Item__Copy {
213 |         text-align: center;
214 |         margin-bottom: 0;
215 |         padding: 0 1rem;
216 |     }
217 |     .press-wrap {
218 |         border-top: 1px solid #cdcdd1;
219 |         border-bottom: 1px solid #cdcdd1;
220 |         display: block;
221 |         margin-bottom: 2.5rem;
222 |     }
223 |     @media only screen and (min-width:641px) {
224 |         .about-wrap .values--upper,
225 |         .about-wrap .values--lower {
226 |             width: 50%;
227 |             float: left;
228 |             margin-bottom: 0;
229 |         }
230 |     }
231 |     @media only screen and (min-width:1025px) {
232 |         .about-wrap .values__Item {
233 |             padding: 0 40px;
234 |         }
235 |     }
236 |     .browse-homes{
237 |         color: white;
238 |         background-color: #2A2730;
239 |     }
240 |     /*Video container*/
241 |     .video-container{
242 |         width: 500px;
243 |         height: 281px;
244 |     }
245 |     @media only screen and (max-width: 500px){
246 |         .video-container{
247 |             width: 282px;
248 |             height: 158px;
249 |         }
250 |     }
251 |     .heading{
252 |         text-align: center;
253 |     }
254 |     .search-bar{
255 |         padding: 1.5rem 0;
256 |         background-color: #F6F7F9;
257 |     }
258 |     .search-cta{
259 |         padding-left: 0.5rem;
260 |         padding-right: 0.5rem;
261 |         padding-bottom: 1rem;
262 |     }
263 |     .sleep-selector{
264 |         padding-bottom: 1.5rem;
265 |     }
266 |     .section{
267 |         margin: 2rem 0;
268 |     }
269 |     /******************* MOBILE SEM LANDING PAGE STYLES ***********************/
270 |     .rf-Message { display:block;color:#d80033;font-size:.875rem;line-height:1rem;}
271 |     #email-invalid, .browse_all { display: none; }
272 |     /* HIDE Nav Menu & FOOTER ON MOBILE LANDING PAGE - Requested by Naza */
273 |     .ofs-GlobalFooter .ofs-GlobalFooter__Links, .ofs-GlobalFooter__UserConfig { display: none !important; }
274 |     #mobile-menu-toggle, #mobile-contact-toggle, .ofs-GlobalHeader__MobileSearchWrapper { display: none !important; }
275 | </style>
276 | 
277 | <div id="landing" a name="landing">
278 | 
279 |     <div class="ofs-LandingPage__Heading">
280 |         <div class="ofs-LandingPage__Contents">
281 |             <div class="ofs-Heading__TextOnBackground">
282 |                 <h2 class="ofs-EnquiryForm__Title">
283 |                   1200 of the finest London homes <br/>
284 |                   Wifi as standard and iPhone for data <br/>
285 |                   The White Company linens, towels &amp; toiletries <br/>
286 |                 </h2>
287 |             </div>
288 |             <!-- only visible on mobile -->
289 |             <div class="ofs-Heading__BackgroundImage" id="LONDON_BG"></div>
290 |         </div>
291 |     </div>
292 | 
293 | 
294 |     <div class="ofs-Container">
295 |         <div class="ofs-Container__Content">
296 |             <div class="ofs-EditorialGrid section">
297 |                 <div class="ofs-EditorialGrid__Column ofs-EditorialGrid__Column--half">
298 |                     <div class="ofs-Grid search-cta">
299 |                       <h3>Put your feet up. Our London Specialists will find you the perfect home</h3>
300 |                       <p>With just a few details, our dedicated Reservations team will get back to you with a shortlist of homes that meet your requirements. It's quick and easy.</p>
301 |                       <p>Once submitted, you will be free to browse our homes!</p>
302 |                     </div>
303 |                     <form class="ofs-Form" id="gform">
304 |                         <input type="hidden" id="city" name="city" value="LON">
305 |                         <div class="ofs-grid">
306 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
307 |                                 <div data-ofs-component="newDatepicker" id="start_date" data-name="start_date" data-placeholder="Arrival"></div>
308 |                             </div>
309 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
310 |                                 <div data-ofs-component="newDatepicker" id="end_date" data-name="end_date" data-placeholder="Departure"></div>
311 |                             </div>
312 |                         </div>
313 |                         <div class="ofs-grid">
314 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
315 |                                 <select name="sleeps" id="sleeps" data-ofs-component="simpleChoice">
316 |                                     <option value="">Guests</option>
317 |                                     <option value=1>1</option>
318 |                                     <option value=2>2</option>
319 |                                     <option value=3>3</option>
320 |                                     <option value=4>4</option>
321 |                                     <option value=5>5</option>
322 |                                     <option value=6>6</option>
323 |                                     <option value=7>7</option>
324 |                                     <option value=8>8</option>
325 |                                     <option value=9>9</option>
326 |                                 </select>
327 |                             </div>
328 |                             <div class="ofs-grid">
329 |                              <div class="ofs-Grid__Column ofs-Grid__Column--half">
330 |                                   <div class="ofs-Form__Field">
331 |                                   <p class="ofs-Form__Label" id="email-label"></p> <!--spacer-->
332 |                                   <input required name="email" id="email" type="email" placeholder="Email address*"></input>
333 |                                   <span id="email-invalid" class="rf-Message">Must be a valid email address</span>
334 |                                   </div>
335 |                               </div>
336 |                             </div>
337 | 
338 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
339 |                                 <button class="ofs-Button ofs-Button--small ofs-Button--full-width ofs-Button--inline">Submit</button>
340 |                                 <div class="ofs-Form__HelpText rf-Required">* indicates a required field</div>
341 |                             </div>
342 |                         </div>
343 |                     </form>
344 |                     <div class="heading">
345 |                       <h2 id="thankyou" style="display:none">Thanks! We will contact you soon!</h2>
346 |                     <di>
347 |                     <a  class="ofs-Button" id="browse_all" style="display:none"
348 |                     href="https://www.onefinestay.com/search/?city=108">
349 |                       Browse All London Homes
350 |                     </a>
351 |                 </div>
352 |             </div>
353 |         </div>
354 |     </div>
355 | </div>
356 | 
357 | <!-- Form submission handler to GoogleDocs -->
358 | <script data-cfasync="false" type="text/javascript">
359 |   // Client side email validation Requested by Naza ... See: https://stackoverflow.com/a/46181
360 |   function validEmail(email) {
361 |     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
362 |     return re.test(email);
363 |   }
364 |   // get all data in form and return object
365 |   function getFormData() {
366 |     var data   = {
367 |       city       : document.getElementById("city").value,
368 |       start_date : document.getElementsByName("start_date")[1].value,
369 |       end_date   : document.getElementsByName("end_date")[1].value,
370 |       sleeps     : document.getElementsByName("sleeps")[0].value,
371 |       email      : document.getElementById("email").value
372 |     }
373 |     console.log(data);
374 |     return data;
375 |   }
376 |   // set the browse all url
377 |   // e.g: https://www.onefinestay.com/search/?city=108&start_date=2015-10-23&end_date=2015-10-31&sleeps=5
378 |   function browseAllUrl (data) {
379 |     var url = document.getElementById("browse_all").getAttribute('href');  // $('.browse_all').attr("href");
380 |     var params = "&start_date="    + data.start_date; // $('#start_date').val();
381 |     params = params + "&end_date=" + data.end_date;   // $('#end_date').val();
382 |     params = params + "&sleeps="   + data.sleeps;     // $('#sleeps option:selected').val();
383 |     url = url + params.replace(/\//g,'-');
384 |     console.log("Browse all:" + url);
385 |     document.getElementById("browse_all").href = url; // $('.browse_all').attr("href", url);
386 |   }
387 |   // handles form submit withtout any jquery
388 |   function handleFormSubmit(event) {
389 |     event.preventDefault();     // we are submitting via xhr below
390 |     var data = getFormData();   // get the values submitted in the form
391 |     if( !validEmail(data.email) ) {
392 |       document.getElementById('email-invalid').style.display = 'block';
393 |       return false;
394 |     } else {
395 |       browseAllUrl(data); // set the url for search results page.
396 |       var url = "https://script.google.com/macros/s/AKfycbzFU_-z9lEQFy0exGZFlbd6dvtD4V07JaDI_3i_4J52OR3v8E_r/exec"; // prod
397 |       var xhr = new XMLHttpRequest();
398 |       xhr.open('POST', url);
399 |       // xhr.withCredentials = true;
400 |       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
401 |       xhr.onreadystatechange = function() {
402 |           console.log( xhr.status, xhr.statusText )
403 |           console.log(xhr.responseText);
404 |           document.getElementById('gform').style.display = 'none'; // hide form
405 |           document.getElementById('thankyou').style.display = 'block';
406 |           document.getElementById('browse_all').style.display = 'block';
407 |           return;
408 |       };
409 |       // url encode form data for sending as post data
410 |       var encoded = Object.keys(data).map(function(k) {
411 |           return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
412 |       }).join('&')
413 |       xhr.send(encoded);
414 |     }
415 |   }
416 | 
417 |   function loaded() {
418 |     // bind to the submit event of our form
419 |     var form = document.getElementById('gform');
420 |     form.addEventListener("submit", handleFormSubmit, false);
421 |   };
422 |   document.addEventListener('DOMContentLoaded', loaded, false);
423 | </script>
424 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta name="description" content="enquiry form">
  7 | <title>PAR TEST</title>
  8 | </head>
  9 | <body>
 10 | 
 11 | <!-- START of CODE to be inserted into "Tintofs" -->
 12 | 
 13 | <style type="text/css" scoped>
 14 |     /**
 15 |     * CSS coded to be mobile first. All media
 16 |     * queries are then added by individual component
 17 |     * to adjust for the various break points.
 18 |     **/
 19 |     #landing .ofs-LandingPage__Heading {
 20 |         text-align: center;
 21 |     }
 22 |     /**
 23 |     * Background image is applied in two different
 24 |     * ways in order to get desired responsive behavior.
 25 |     * Mobile version: image is contained in
 26 |     * ofs-Heading__BackgroundImage with
 27 |     * ofs-LandingPage__Heading as the parent. Desktop
 28 |     * version: ofs-Heading__BackgroundImage is hidden,
 29 |     * and the image is contained in the ::after element
 30 |     * for ofs-LandingPage__Headinga
 31 |     **/
 32 |     #landing .ofs-Heading__BackgroundImage {
 33 |         display: block;
 34 |         min-height: 200px;
 35 |         width: 100%;
 36 |         padding-bottom: calc((5/8) * 100%);
 37 |         background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg');
 38 |         background-repeat: no-repeat;
 39 |         background-position: 50% 50%;
 40 |         -ms-background-size: cover;
 41 |         -o-background-size: cover;
 42 |         -moz-background-size: cover;
 43 |         -webkit-background-size: cover;
 44 |         background-size: cover;
 45 |     }
 46 |     #landing .ofs-Heading__TextOnBackground {
 47 |         margin: 1.5rem 0;
 48 |     }
 49 |     /* Override h1 styles for mobile */
 50 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
 51 |         padding: 0 2.5rem;
 52 |         font-size: 1.625rem;
 53 |         line-height: 2rem;
 54 |     }
 55 |     /* Override h2 styles for mobile */
 56 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
 57 |         font-size: 1rem;
 58 |         line-height: 1.5rem;
 59 |     }
 60 |     @media screen and (min-width: 641px) {
 61 |         #landing .ofs-LandingPage__Heading {
 62 |             position: relative;
 63 |             min-height: 380px; /* Match height of standard screen width, but don't fix, because we need mobile to expand height to fit */
 64 |             background-color: #2a2730; /* Set a dark background for the image opacity to fade into */
 65 |             z-index: 1;
 66 |         }
 67 |         #landing .ofs-LandingPage__Heading::after {
 68 |             content: ' ';
 69 |             display: block;
 70 |             position: absolute;
 71 |             left: 0;
 72 |             top: 0;
 73 |             width: 100%;
 74 |             height: 100%;
 75 |             opacity: 0.6; /* Used in conjunction with the element's background-color */
 76 |             background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg.');
 77 |             background-repeat: no-repeat;
 78 |             background-position: 50% 50%;
 79 |             -ms-background-size: cover;
 80 |             -o-background-size: cover;
 81 |             -moz-background-size: cover;
 82 |             -webkit-background-size: cover;
 83 |             background-size: cover;
 84 |             z-index: -1;
 85 |         }
 86 |         /* vertically and horizontally center group of elements in heading */
 87 |         #landing .ofs-LandingPage__Contents {
 88 |             top: 50%;
 89 |             left: 50%;
 90 |             -webkit-transform: translate(-50%, -50%);
 91 |             -ms-transform: translate(-50%, -50%);
 92 |             transform: translate(-50%, -50%);
 93 |             position: absolute;
 94 |         }
 95 |         /* This element is used in the mobile version and must be hidden for larger screens */
 96 |         #landing .ofs-Heading__BackgroundImage {
 97 |             display: none;
 98 |         }
 99 |         /* Remove margin since it throws off the vertical centering for parent */
100 |         #landing .ofs-Heading__TextOnBackground {
101 |             margin-top: 0;
102 |         }
103 |         /* Forces the text color to white for text on-top of background images */
104 |         #landing .ofs-Heading__TextOnBackground h1,
105 |         #landing .ofs-Heading__TextOnBackground h2,
106 |         #landing .ofs-Heading__TextOnBackground h3,
107 |         #landing .ofs-Heading__TextOnBackground h4,
108 |         #landing .ofs-Heading__TextOnBackground h5,
109 |         #landing .ofs-Heading__TextOnBackground h6 {
110 |             color: white;
111 |         }
112 |         /* Reset h1 & h2 after custom mobile responsiveness */
113 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
114 |             margin-bottom: .5rem; /* fix to pull the sub-text closer to the header */
115 |             padding: 0;
116 |             font-size: 2.3125rem;
117 |             line-height: 3rem;
118 |         }
119 |         /* Reset h1 & h2 after custom mobile responsiveness */
120 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
121 |             width: 430px;
122 |             font-size: 1.3125rem;
123 |             line-height: 2rem;
124 |             margin-left: auto;
125 |             margin-right: auto;
126 |         }
127 |     }
128 |     #landing .ofs-Heading__SearchBar {
129 |         padding: 1.5rem;
130 |         border-radius: 2px;
131 |         margin: 1rem auto;
132 |     }
133 |     /* Wrapper for Arrival and Departure fields. This gets modified from screensizes 641-851px */
134 |     .ofs-Heading__SearchBarColumnWrapper {
135 |         margin-bottom: 0;
136 |     }
137 |     /* Eliminate extra spacing between Form and value props */
138 |     .ofs-Heading__SearchBar .ofs-Form {
139 |         margin-bottom: 0;
140 |     }
141 |     /* Aligns all of the search placeholders left */
142 |     .ofs-Heading__SearchBar .ofs-Form .ofs-Input {
143 |         text-align: left;
144 |     }
145 |     /* Fix for inline forms without labels */
146 |     .ofs-Button--inline {
147 |         margin-top: 1.5rem;
148 |     }
149 |     /* Custom grid style for laptop (851px+) */
150 |     .ofs-Grid__Column--medium-half {
151 |         width: 100%;
152 |     }
153 |     /* Custom grid style to always be 50% regardless of screensize */
154 |     .ofs-Grid__Column--permanent-half {
155 |         width: 50%;
156 |     }
157 |     #landing .CallToAction-browse-top{
158 |         display: none;
159 |         text-align: right;
160 |         padding-bottom: 0.5rem;
161 |         }
162 |      #landing .CallToAction-browse-bottom{
163 |         display:block;
164 |         padding-top: 0.5rem;
165 |         text-align: left;
166 |      }
167 |     @media screen and (min-width: 641px) {
168 |         .ofs-Button--inline {
169 |         margin-top: 0rem;
170 |     }
171 |     }
172 |     @media screen and (min-width: 851px) {
173 |         /* Expand and constrain width slightly so that everything fits inline */
174 |         #landing .ofs-Heading__SearchBar {
175 |            width: 750px;
176 |         }
177 |         /* Remove input field's bottom margins when they're inline */
178 |         #landing .ofs-Heading__SearchBarColumnWrapper {
179 |             margin-bottom: 0;
180 |         }
181 |         /* Custom grid style for laptop (851px+) */
182 |         #landing .ofs-Grid__Column--medium-half {
183 |             width: 50%;
184 |         }
185 |     }
186 |     /* Modified homepage styling to make spacing consistent */
187 |     .about-wrap-container{
188 |         background-color: #F8F6F1;
189 |     }
190 |     .about-wrap {
191 |         margin-bottom: 2.5rem;
192 |     }
193 |     .about-wrap .heading {
194 |         text-align: center;
195 |     }
196 |     .about-wrap .values {
197 |         width: 100%;
198 |         padding-top: 1rem;
199 |     }
200 |     .about-wrap .values:after {
201 |         content: ".";
202 |         visibility: hidden;
203 |         display: block;
204 |         height: 0;
205 |         clear: both
206 |     }
207 |     .about-wrap .values__Item {
208 |         padding: 0 5px;
209 |         width: 50%;
210 |     }
211 |     .about-wrap .values--upper {
212 |         margin-bottom: 2.5rem;
213 |     }
214 |     .about-wrap .values--upper,
215 |     .about-wrap .values--lower {
216 |         padding: 0 5px;
217 |     }
218 |     .about-wrap .values__Item__Image {
219 |         display: block;
220 |         width: 130px;
221 |         height: 130px;
222 |         margin: 0 auto 2rem auto;
223 |     }
224 |     .about-wrap .values__Item__Copy {
225 |         text-align: center;
226 |         margin-bottom: 0;
227 |         padding: 0 1rem;
228 |     }
229 |     .press-wrap {
230 |         border-top: 1px solid #cdcdd1;
231 |         border-bottom: 1px solid #cdcdd1;
232 |         display: block;
233 |         margin-bottom: 2.5rem;
234 |     }
235 |     @media only screen and (min-width:641px) {
236 |         .about-wrap .values--upper,
237 |         .about-wrap .values--lower {
238 |             width: 50%;
239 |             float: left;
240 |             margin-bottom: 0;
241 |         }
242 |     }
243 |     @media only screen and (min-width:1025px) {
244 |         .about-wrap .values__Item {
245 |             padding: 0 40px;
246 |         }
247 |     }
248 |     .browse-homes{
249 |         color: white;
250 |         background-color: #2A2730;
251 |     }
252 |     /*Video container*/
253 |     .video-container{
254 |         width: 500px;
255 |         height: 281px;
256 |     }
257 |     @media only screen and (max-width: 500px){
258 |         .video-container{
259 |             width: 282px;
260 |             height: 158px;
261 |         }
262 |     }
263 |     .heading{
264 |         text-align: center;
265 |     }
266 |     .search-bar{
267 |         padding: 1.5rem 0;
268 |         background-color: #F6F7F9;
269 |     }
270 |     .search-cta{
271 |         padding-left: 0.5rem;
272 |         padding-right: 0.5rem;
273 |         padding-bottom: 1rem;
274 |     }
275 |     .sleep-selector{
276 |         padding-bottom: 1.5rem;
277 |     }
278 |     .section{
279 |         margin: 2rem 0;
280 |     }
281 |     /******************* MOBILE SEM LANDING PAGE STYLES ***********************/
282 |     .rf-Message { display:block;color:#d80033;font-size:.875rem;line-height:1rem;}
283 |     #email-invalid, .browse_all { display: none; }
284 |     /* HIDE Nav Menu & FOOTER ON MOBILE LANDING PAGE - Requested by Naza */
285 |     .ofs-GlobalFooter .ofs-GlobalFooter__Links, .ofs-GlobalFooter__UserConfig { display: none !important; }
286 |     #mobile-menu-toggle, #mobile-contact-toggle, .ofs-GlobalHeader__MobileSearchWrapper { display: none !important; }
287 | </style>
288 | 
289 | <div id="landing">
290 | 
291 |     <div class="ofs-LandingPage__Heading">
292 |         <div class="ofs-LandingPage__Contents">
293 |             <div class="ofs-Heading__TextOnBackground">
294 |                 <h1 class="ofs-LandingPage__Title">
295 |                   We have selected 500 of the best homes in Paris, ranging from Marais studios to penthouses by the Eiffel Tower
296 |                 </h1>
297 | 
298 |             </div>
299 |             <!-- only visible on mobile -->
300 |             <div class="ofs-Heading__BackgroundImage" id="LONDON_BG"></div>
301 |         </div>
302 |     </div>
303 | 
304 | 
305 |     <div class="ofs-Container">
306 |         <div class="ofs-Container__Content">
307 |             <div class="ofs-EditorialGrid section">
308 |                 <div class="ofs-EditorialGrid__Column ofs-EditorialGrid__Column--half">
309 |                     <div class="ofs-Grid search-cta">
310 |                         <h2>Find a Paris home</h2>
311 |                         <p>With just a few details, our dedicated reservations team will get back to you with a shortlist of homes that meet your requirements within 15 minutes.</p>
312 |                         <p>Once submitted, you will be free to browse our homes!</p>
313 |                     </div>
314 |                     <form class="ofs-Form" id="gform">
315 |                         <input type="hidden" name="city" value="PAR" />
316 |                         <div class="ofs-grid">
317 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
318 |                                 <input type="date" data-ofs-component="newDatepicker" id="start_date" data-name="start_date" data-placeholder="Arrival" />
319 |                             </div>
320 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
321 |                                 <input type="date" data-ofs-component="newDatepicker" id="end_date" data-name="end_date" data-placeholder="Departure" />
322 |                             </div>
323 |                         </div>
324 |                         <div class="ofs-grid">
325 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
326 |                                 <select name="sleeps" id="sleeps" data-ofs-component="simpleChoice">
327 |                                     <option value="">Guests</option>
328 |                                     <option value=1>1</option>
329 |                                     <option value=2>2</option>
330 |                                     <option value=3>3</option>
331 |                                     <option value=4>4</option>
332 |                                     <option value=5>5</option>
333 |                                     <option value=6>6</option>
334 |                                     <option value=7>7</option>
335 |                                     <option value=8>8</option>
336 |                                     <option value=9>9</option>
337 |                                 </select>
338 |                             </div>
339 |                             <div class="ofs-grid">
340 |                              <div class="ofs-Grid__Column ofs-Grid__Column--half">
341 |                                   <div class="ofs-Form__Field">
342 |                                   <p class="ofs-Form__Label" id="email-label"></p> <!--spacer-->
343 |                                   <input required name="email" id="email" type="email" placeholder="Email address*" />
344 |                                   <span id="email-invalid" class="rf-Message">Must be a valid email address</span>
345 |                                   </div>
346 |                               </div>
347 |                             </div>
348 | 
349 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
350 |                                 <button class="ofs-Button ofs-Button--small ofs-Button--full-width ofs-Button--inline">Submit</button>
351 |                                 <div class="ofs-Form__HelpText rf-Required">* indicates a required field</div>
352 |                             </div>
353 |                         </div>
354 |                     </form>
355 |                     <div class="heading">
356 |                       <h2 id="thankyou" style="display:none">Thanks! We will contact you soon!</h2>
357 |                     <di>
358 |                     <a class="ofs-Button" id="browse_all" style="display:none"
359 |                     href="https://www.onefinestay.com/search/?city=465">
360 |                       Browse All Paris Homes
361 |                     </a>
362 |                 </div>
363 |             </div>
364 |         </div>
365 |     </div>
366 | </div>
367 | 
368 | <!-- Form submission handler to GoogleDocs -->
369 | <script data-cfasync="false" type="text/javascript">
370 |   // Client side email validation Requested by Naza ... See: https://stackoverflow.com/a/46181
371 |   function validEmail(email) {
372 |     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
373 |     return re.test(email);
374 |   }
375 |   // get all data in form and return object
376 |   function getFormData() {
377 |     var select = document.getElementById("sleeps");     // get sleeps selector
378 |     var data   = {
379 |       start_date : document.getElementById("start_date").value,
380 |       end_date   : document.getElementById("end_date").value,
381 |       sleeps     : select.options[select.selectedIndex].value,
382 |       email      : document.getElementById("email").value
383 |     }
384 |     console.log(data);
385 |     return data;
386 |   }
387 |   // set the browse all url
388 |   // e.g: https://www.onefinestay.com/search/?city=108&start_date=2015-10-23&end_date=2015-10-31&sleeps=5
389 |   function browseAllUrl (data) {
390 |     var url = document.getElementById("browse_all").getAttribute('href');  // $('.browse_all').attr("href");
391 |     var params = "&start_date="    + data.start_date; // $('#start_date').val();
392 |     params = params + "&end_date=" + data.end_date;   // $('#end_date').val();
393 |     params = params + "&sleeps="   + data.sleeps;     // $('#sleeps option:selected').val();
394 |     url = url + params.replace(/\//g,'-');
395 |     console.log("Browse all:" + url);
396 |     document.getElementById("browse_all").href = url; // $('.browse_all').attr("href", url);
397 |   }
398 |   // handles form submit withtout any jquery
399 |   function handleFormSubmit(event) {
400 |     event.preventDefault();     // we are submitting via xhr below
401 |     var data = getFormData();   // get the values submitted in the form
402 |     if( !validEmail(data.email) ) {
403 |       document.getElementById('email-invalid').style.display = 'block';
404 |       return false;
405 |     } else {
406 |       browseAllUrl(data); // set the url for search results page.
407 |       /*************** STANDARD AJAX - NO JQUERY ****************/
408 |       // var url = "https://script.google.com/macros/s/AKfycbxhWEqtp4LejDhNBgr8hsaDyO6qDu4LgRBY6jZkWD3-bBvMsVge/exec", // test
409 |       var url = "https://script.google.com/macros/s/AKfycbzFU_-z9lEQFy0exGZFlbd6dvtD4V07JaDI_3i_4J52OR3v8E_r/exec"; // prod
410 |       var xhr = new XMLHttpRequest();
411 |       xhr.open('POST', url);
412 |       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
413 |       xhr.onload = function() {
414 |         if (xhr.status === 200) {
415 |           console.log(xhr.responseText);
416 |           document.getElementById('gform').style.display = 'none'; // hide form
417 |           document.getElementById('thankyou').style.display = 'block';
418 |           document.getElementById('browse_all').style.display = 'block';
419 |           return;
420 |         }
421 |         else {
422 |           console.log('Request failed. Returned status: ' + xhr.status);
423 |           return;
424 |         }
425 |       };
426 |       // url encode form data for sending as post data
427 |       var encoded = Object.keys(data).map(function(k) {
428 |           return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
429 |       }).join('&')
430 |       xhr.send(encoded);
431 |     }
432 |   }
433 | 
434 |   function loaded() {
435 |     // bind to the submit event of our form
436 |     var form = document.getElementById('gform');
437 |     form.addEventListener("submit", handleFormSubmit, false);
438 |   };
439 |   document.addEventListener('DOMContentLoaded', loaded, false);
440 | </script>
441 | 
442 | <!-- END of CODE to be inserted into "Tintofs" -->
443 | </body>
444 | </html>
445 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc., <https://fsf.org/>
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 | 
280 |                      END OF TERMS AND CONDITIONS
281 | 
282 |             How to Apply These Terms to Your New Programs
283 | 
284 |   If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 | 
288 |   To do so, attach the following notices to the program.  It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 | 
293 |     {description}
294 |     Copyright (C) {year}  {fullname}
295 | 
296 |     This program is free software; you can redistribute it and/or modify
297 |     it under the terms of the GNU General Public License as published by
298 |     the Free Software Foundation; either version 2 of the License, or
299 |     (at your option) any later version.
300 | 
301 |     This program is distributed in the hope that it will be useful,
302 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
303 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
304 |     GNU General Public License for more details.
305 | 
306 |     You should have received a copy of the GNU General Public License along
307 |     with this program; if not, write to the Free Software Foundation, Inc.,
308 |     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 | 
310 | Also add information on how to contact you by electronic and paper mail.
311 | 
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 | 
315 |     Gnomovision version 69, Copyright (C) year name of author
316 |     Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 |     This is free software, and you are welcome to redistribute it
318 |     under certain conditions; type `show c' for details.
319 | 
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License.  Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 | 
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary.  Here is a sample; alter the names:
328 | 
329 |   Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 |   `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 | 
332 |   {signature of Ty Coon}, 1 April 1989
333 |   Ty Coon, President of Vice
334 | 
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs.  If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library.  If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 | 
341 | 


--------------------------------------------------------------------------------
/_par-phone.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |     /**
  3 |     * CSS coded to be mobile first. All media
  4 |     * queries are then added by individual component
  5 |     * to adjust for the various break points.
  6 |     **/
  7 |     #landing .ofs-LandingPage__Heading {
  8 |         text-align: center;
  9 |     }
 10 |     /**
 11 |     * Background image is applied in two different
 12 |     * ways in order to get desired responsive behavior.
 13 |     * Mobile version: image is contained in
 14 |     * ofs-Heading__BackgroundImage with
 15 |     * ofs-LandingPage__Heading as the parent. Desktop
 16 |     * version: ofs-Heading__BackgroundImage is hidden,
 17 |     * and the image is contained in the ::after element
 18 |     * for ofs-LandingPage__Headinga
 19 |     **/
 20 |     #landing .ofs-Heading__BackgroundImage {
 21 |         display: block;
 22 |         min-height: 200px;
 23 |         width: 100%;
 24 |         padding-bottom: calc((5/8) * 100%);
 25 |         background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg');
 26 |         background-repeat: no-repeat;
 27 |         background-position: 50% 50%;
 28 |         -ms-background-size: cover;
 29 |         -o-background-size: cover;
 30 |         -webkit-background-size: cover;
 31 |         background-size: cover;
 32 |     }
 33 |     #landing .ofs-Heading__TextOnBackground {
 34 |         margin: 1.5rem 0;
 35 |     }
 36 |     /* Override h1 styles for mobile */
 37 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
 38 |         padding: 0 2.5rem;
 39 |         font-size: 1.625rem;
 40 |         line-height: 2rem;
 41 |     }
 42 |     /* Override h2 styles for mobile */
 43 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
 44 |         font-size: 1rem;
 45 |         line-height: 1.5rem;
 46 |     }
 47 |     @media screen and (min-width: 641px) {
 48 |         #landing .ofs-LandingPage__Heading {
 49 |             position: relative;
 50 |             min-height: 380px; /* Match height of standard screen width, but don't fix, because we need mobile to expand height to fit */
 51 |             background-color: #2a2730; /* Set a dark background for the image opacity to fade into */
 52 |             z-index: 1;
 53 |         }
 54 |         #landing .ofs-LandingPage__Heading::after {
 55 |             content: ' ';
 56 |             display: block;
 57 |             position: absolute;
 58 |             left: 0;
 59 |             top: 0;
 60 |             width: 100%;
 61 |             height: 100%;
 62 |             opacity: 0.6; /* Used in conjunction with the element's background-color */
 63 |             background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/EUROSTAR_Landing_page_new_2742x916.jpg');
 64 |             background-repeat: no-repeat;
 65 |             background-position: 50% 50%;
 66 |             -ms-background-size: cover;
 67 |             -o-background-size: cover;
 68 |             -webkit-background-size: cover;
 69 |             background-size: cover;
 70 |             z-index: -1;
 71 |         }
 72 |         /* vertically and horizontally center group of elements in heading */
 73 |         #landing .ofs-LandingPage__Contents {
 74 |             top: 50%;
 75 |             left: 50%;
 76 |             -webkit-transform: translate(-50%, -50%);
 77 |             -ms-transform: translate(-50%, -50%);
 78 |             transform: translate(-50%, -50%);
 79 |             position: absolute;
 80 |         }
 81 |         /* This element is used in the mobile version and must be hidden for larger screens */
 82 |         #landing .ofs-Heading__BackgroundImage {
 83 |             display: none;
 84 |         }
 85 |         /* Remove margin since it throws off the vertical centering for parent */
 86 |         #landing .ofs-Heading__TextOnBackground {
 87 |             margin-top: 0;
 88 |         }
 89 |         /* Forces the text color to white for text on-top of background images */
 90 |         #landing .ofs-Heading__TextOnBackground h1,
 91 |         #landing .ofs-Heading__TextOnBackground h2,
 92 |         #landing .ofs-Heading__TextOnBackground h3,
 93 |         #landing .ofs-Heading__TextOnBackground h4,
 94 |         #landing .ofs-Heading__TextOnBackground h5,
 95 |         #landing .ofs-Heading__TextOnBackground h6 {
 96 |             color: white;
 97 |         }
 98 |         /* Reset h1 & h2 after custom mobile responsiveness */
 99 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
100 |             margin-bottom: .5rem; /* fix to pull the sub-text closer to the header */
101 |             padding: 0;
102 |             font-size: 2.3125rem;
103 |             line-height: 3rem;
104 |         }
105 |         /* Reset h1 & h2 after custom mobile responsiveness */
106 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
107 |             width: 430px;
108 |             font-size: 1.3125rem;
109 |             line-height: 2rem;
110 |             margin-left: auto;
111 |             margin-right: auto;
112 |         }
113 |     }
114 |     #landing .ofs-Heading__SearchBar {
115 |         padding: 1.5rem;
116 |         border-radius: 2px;
117 |         margin: 1rem auto;
118 |     }
119 |     /* Wrapper for Arrival and Departure fields. This gets modified from screensizes 641-851px */
120 |     .ofs-Heading__SearchBarColumnWrapper {
121 |         margin-bottom: 0;
122 |     }
123 |     /* Eliminate extra spacing between Form and value props */
124 |     .ofs-Heading__SearchBar .ofs-Form {
125 |         margin-bottom: 0;
126 |     }
127 |     /* Aligns all of the search placeholders left */
128 |     .ofs-Heading__SearchBar .ofs-Form .ofs-Input {
129 |         text-align: left;
130 |     }
131 |     /* Fix for inline forms without labels */
132 |     .ofs-Button--inline {
133 |         margin-top: 1.5rem;
134 |     }
135 |     /* Custom grid style for laptop (851px+) */
136 |     .ofs-Grid__Column--medium-half {
137 |         width: 100%;
138 |     }
139 |     /* Custom grid style to always be 50% regardless of screensize */
140 |     .ofs-Grid__Column--permanent-half {
141 |         width: 50%;
142 |     }
143 |     #landing .CallToAction-browse-top{
144 |         display: none;
145 |         text-align: right;
146 |         padding-bottom: 0.5rem;
147 |         }
148 |      #landing .CallToAction-browse-bottom{
149 |         display:block;
150 |         padding-top: 0.5rem;
151 |         text-align: left;
152 |      }
153 |     @media screen and (min-width: 641px) {
154 |         .ofs-Button--inline {
155 |         margin-top: 0rem;
156 |     }
157 |     }
158 |     @media screen and (min-width: 851px) {
159 |         /* Expand and constrain width slightly so that everything fits inline */
160 |         #landing .ofs-Heading__SearchBar {
161 |            width: 750px;
162 |         }
163 |         /* Remove input field's bottom margins when they're inline */
164 |         #landing .ofs-Heading__SearchBarColumnWrapper {
165 |             margin-bottom: 0;
166 |         }
167 |         /* Custom grid style for laptop (851px+) */
168 |         #landing .ofs-Grid__Column--medium-half {
169 |             width: 50%;
170 |         }
171 |     }
172 |     /* Modified homepage styling to make spacing consistent */
173 |     .about-wrap-container{
174 |         background-color: #F8F6F1;
175 |     }
176 |     .about-wrap {
177 |         margin-bottom: 2.5rem;
178 |     }
179 |     .about-wrap .heading {
180 |         text-align: center;
181 |     }
182 |     .about-wrap .values {
183 |         width: 100%;
184 |         padding-top: 1rem;
185 |     }
186 |     .about-wrap .values:after {
187 |         content: ".";
188 |         visibility: hidden;
189 |         display: block;
190 |         height: 0;
191 |         clear: both
192 |     }
193 |     .about-wrap .values__Item {
194 |         padding: 0 5px;
195 |         width: 50%;
196 |     }
197 |     .about-wrap .values--upper {
198 |         margin-bottom: 2.5rem;
199 |     }
200 |     .about-wrap .values--upper,
201 |     .about-wrap .values--lower {
202 |         padding: 0 5px;
203 |     }
204 |     .about-wrap .values__Item__Image {
205 |         display: block;
206 |         width: 130px;
207 |         height: 130px;
208 |         margin: 0 auto 2rem auto;
209 |     }
210 |     .about-wrap .values__Item__Copy {
211 |         text-align: center;
212 |         margin-bottom: 0;
213 |         padding: 0 1rem;
214 |     }
215 |     .press-wrap {
216 |         border-top: 1px solid #cdcdd1;
217 |         border-bottom: 1px solid #cdcdd1;
218 |         display: block;
219 |         margin-bottom: 2.5rem;
220 |     }
221 |     @media only screen and (min-width:641px) {
222 |         .about-wrap .values--upper,
223 |         .about-wrap .values--lower {
224 |             width: 50%;
225 |             float: left;
226 |             margin-bottom: 0;
227 |         }
228 |     }
229 |     @media only screen and (min-width:1025px) {
230 |         .about-wrap .values__Item {
231 |             padding: 0 40px;
232 |         }
233 |     }
234 |     .browse-homes{
235 |         color: white;
236 |         background-color: #2A2730;
237 |     }
238 |     /*Video container*/
239 |     .video-container{
240 |         width: 500px;
241 |         height: 281px;
242 |     }
243 |     @media only screen and (max-width: 500px){
244 |         .video-container{
245 |             width: 282px;
246 |             height: 158px;
247 |         }
248 |     }
249 |     .heading{
250 |         text-align: center;
251 |     }
252 |     .search-bar{
253 |         padding: 1.5rem 0;
254 |         background-color: #F6F7F9;
255 |     }
256 |     .search-cta{
257 |         padding-left: 0.5rem;
258 |         padding-right: 0.5rem;
259 |         padding-bottom: 1rem;
260 |     }
261 |     .sleep-selector{
262 |         padding-bottom: 1.5rem;
263 |     }
264 |     .section{
265 |         margin: 2rem 0;
266 |     }
267 |     /******************* MOBILE SEM LANDING PAGE STYLES ***********************/
268 |     .rf-Message { display:block;color:#d80033;font-size:.875rem;line-height:1rem;}
269 |     #email-invalid, .browse_all { display: none; }
270 |     /* HIDE Nav Menu & FOOTER ON MOBILE LANDING PAGE - Requested by Naza */
271 |     .ofs-GlobalFooter .ofs-GlobalFooter__Links, .ofs-GlobalFooter__UserConfig { display: none !important; }
272 |     #mobile-menu-toggle, #mobile-contact-toggle, .ofs-GlobalHeader__MobileSearchWrapper { display: none !important; }
273 |     #phone { border: 1px solid #CDCDD1 !important; width: 100%;
274 |       margint-top: 1.5em;
275 |       -webkit-appearance: none; -moz-appearance: none; appearance: none; }
276 |     #phone_invalid { margin-top:0.8em; display: none; }
277 | </style>
278 | 
279 | <div id="landing">
280 | 
281 |     <div class="ofs-LandingPage__Heading">
282 |         <div class="ofs-LandingPage__Contents">
283 |             <div class="ofs-Heading__TextOnBackground">
284 |               <h2 class="ofs-EnquiryForm__Title">
285 |                 500 of the finest Parisian homes <br/>
286 |                 Wifi as standard and iPhone for data <br/>
287 |                 Linens, towels &amp; L&#8217;Occitane toiletries
288 |               </h2>
289 |             </div>
290 |             <!-- only visible on mobile -->
291 |             <div class="ofs-Heading__BackgroundImage" id="LONDON_BG"></div>
292 |         </div>
293 |     </div>
294 | 
295 | 
296 |     <div class="ofs-Container">
297 |         <div class="ofs-Container__Content">
298 |             <div class="ofs-EditorialGrid section">
299 |                 <div class="ofs-EditorialGrid__Column ofs-EditorialGrid__Column--half">
300 |                     <div class="ofs-Grid search-cta">
301 |                         <h3>Put your feet up. Our Paris Specialists will find you the perfect home</h3>
302 |                         <p>With just a few details, our dedicated Reservations team will call you back and talk you through our homes, the onefinestay service and the local areas. It's quick and efficient.</p>
303 |                         <p>Once submitted, you will be free to browse our homes!</p>
304 |                     </div>
305 |                     <form class="ofs-Form" id="gform">
306 |                         <input type="hidden" id="city" name="city" value="PAR" />
307 |                         <div class="ofs-grid">
308 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
309 |                                 <div data-ofs-component="newDatepicker" id="start_date" data-name="start_date" data-placeholder="Arrival"></div>
310 |                             </div>
311 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
312 |                                 <div data-ofs-component="newDatepicker" id="end_date" data-name="end_date" data-placeholder="Departure"></div>
313 |                             </div>
314 |                         </div>
315 |                         <div class="ofs-grid">
316 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
317 |                                 <select name="sleeps" id="sleeps" data-ofs-component="simpleChoice">
318 |                                     <option value="">Guests</option>
319 |                                     <option value=1>1</option>
320 |                                     <option value=2>2</option>
321 |                                     <option value=3>3</option>
322 |                                     <option value=4>4</option>
323 |                                     <option value=5>5</option>
324 |                                     <option value=6>6</option>
325 |                                     <option value=7>7</option>
326 |                                     <option value=8>8</option>
327 |                                     <option value=9>9</option>
328 |                                 </select>
329 |                             </div>
330 | 
331 |                             <!-- Disable Email Field for this Experiment
332 |                             <div class="ofs-grid">
333 |                              <div class="ofs-Grid__Column ofs-Grid__Column--half">
334 |                                   <div class="ofs-Form__Field">
335 |                                   <p class="ofs-Form__Label" id="email-label"></p>
336 |                                   <input required name="email" id="email" type="email" placeholder="Email address*"></input>
337 |                                   <span id="email-invalid" class="rf-Message">Must be a valid email address</span>
338 |                                   </div>
339 |                               </div>
340 |                             </div>
341 |                           -->
342 |                           <div class="ofs-grid" id="phone_number_wrapper">
343 |                            <div class="ofs-Grid__Column ofs-Grid__Column--half">
344 |                                 <div class="ofs-Form__Field">
345 |                                 <p class="ofs-Form__Label" id="email-label"></p>
346 |                                 <input required name="phone" id="phone" type="tel" placeholder="Phone number*"></input>
347 |                                 <span id="phone_invalid" class="rf-Message" style="visibility:hidden">Please enter a valid phone number</span>
348 |                                 </div>
349 |                             </div>
350 |                           </div>
351 | 
352 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
353 |                                 <button class="ofs-Button ofs-Button--small ofs-Button--full-width ofs-Button--inline" id="submit">Submit</button>
354 |                                 <div class="ofs-Form__HelpText rf-Required">* indicates a required field</div>
355 |                             </div>
356 |                         </div>
357 |                     </form>
358 |                     <div class="heading">
359 |                       <h2 id="thankyou" style="display:none">Thanks! We will contact you soon!</h2>
360 |                     <di>
361 |                     <a class="ofs-Button" id="browse_all" style="display:none"
362 |                     href="https://www.onefinestay.com/search/?city=465">
363 |                       Browse All Paris Homes
364 |                     </a>
365 |                 </div>
366 |             </div>
367 |         </div>
368 |     </div>
369 | </div>
370 | 
371 | 
372 | <!-- Form submission handler to GoogleDocs -->
373 | <script data-cfasync="false" type="text/javascript">
374 |   // Client side email validation Requested by Naza ... See: https://stackoverflow.com/a/46181
375 |   function validEmail(email) {
376 |     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
377 |     return re.test(email);
378 |   }
379 |   // get all data in form and return object
380 |   function getFormData() {
381 |     var data   = {
382 |       city         : document.getElementById("city").value,
383 |       start_date   : document.getElementsByName("start_date") > 0 ? document.getElementsByName("start_date")[1].value : '',
384 |       end_date     : document.getElementsByName("end_date")   > 0 ? document.getElementsByName("end_date")[1].value   : '',
385 |       sleeps       : document.getElementsByName("sleeps")         ? document.getElementsByName("sleeps")[0].value     : '',
386 |       email        : document.getElementById("email") ? document.getElementById("email").value : '',
387 |       phone_number : document.getElementById("phone") ? document.getElementById("phone").value : '8888888'
388 |     }
389 | 
390 |     console.log(data);
391 |     return data;
392 |   }
393 |   // set the browse all url
394 |   // e.g: https://www.onefinestay.com/search/?city=108&start_date=2015-10-23&end_date=2015-10-31&sleeps=5
395 |   function browseAllUrl (data) {
396 |     var url = document.getElementById("browse_all").getAttribute('href');  // $('.browse_all').attr("href");
397 |     var params = "&start_date="    + data.start_date; // $('#start_date').val();
398 |     params = params + "&end_date=" + data.end_date;   // $('#end_date').val();
399 |     params = params + "&sleeps="   + data.sleeps;     // $('#sleeps option:selected').val();
400 |     url = url + params.replace(/\//g,'-');
401 |     console.log("Browse all:" + url);
402 |     document.getElementById("browse_all").href = url; // $('.browse_all').attr("href", url);
403 |   }
404 |   // handles form submit withtout any jquery
405 |   function handleFormSubmit(event) {
406 |     event.preventDefault();     // we are submitting via xhr below
407 |     var data = getFormData();   // get the values submitted in the form
408 |     var phone = document.getElementById("phone");
409 |     // https://stackoverflow.com/a/6449750/1148249
410 |     if (phone && ( isNaN(phone.value) || phone.value.length < 7) ) {
411 |       console.log(phone.value);
412 |       document.getElementById('phone').style.border = '1px solid #ED5434';
413 |       document.getElementById('phone_invalid').style.display = 'block';
414 |       document.getElementById('phone_invalid').style.visibility = 'visible';
415 |       return false;
416 |     }
417 |     else if( document.getElementById("email") && !validEmail(data.email) ) {
418 |       document.getElementById('email-invalid').style.display = 'block';
419 |       return false;
420 |     } else {
421 |       document.getElementById("submit").disabled = true;
422 |       browseAllUrl(data); // set the url for search results page.
423 |       var url = "https://script.google.com/macros/s/AKfycbzFU_-z9lEQFy0exGZFlbd6dvtD4V07JaDI_3i_4J52OR3v8E_r/exec"; // prod
424 |       // var url = "https://script.google.com/macros/s/AKfycbzodNnKcXPo5_x1OmbV8bMBpJYnNDxSWqIklB0mWh3fKb7-Z20/exec"; // test
425 |       var xhr = new XMLHttpRequest();
426 |       xhr.open('POST', url);
427 |       // xhr.withCredentials = true;
428 |       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
429 |       xhr.onreadystatechange = function() {
430 |           console.log( xhr.status, xhr.statusText )
431 |           console.log(xhr.responseText);
432 |           document.getElementById('gform').style.display = 'none'; // hide form
433 |           document.getElementById('thankyou').style.display = 'block';
434 |           document.getElementById('browse_all').style.display = 'block';
435 |           return;
436 |       };
437 |       // url encode form data for sending as post data
438 |       var encoded = Object.keys(data).map(function(k) {
439 |           return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
440 |       }).join('&')
441 |       xhr.send(encoded);
442 |     }
443 |   }
444 | 
445 |   function loaded() {
446 |     // bind to the submit event of our form
447 |     var form = document.getElementById('gform');
448 |     form.addEventListener("submit", handleFormSubmit, false);
449 |   };
450 |   document.addEventListener('DOMContentLoaded', loaded, false);
451 | </script>
452 | 


--------------------------------------------------------------------------------
/_lon-phone.html:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |     /**
  3 |     * CSS coded to be mobile first. All media
  4 |     * queries are then added by individual component
  5 |     * to adjust for the various break points.
  6 |     **/
  7 |     #landing .ofs-LandingPage__Heading {
  8 |         text-align: center;
  9 |     }
 10 |     /**
 11 |     * Background image is applied in two different
 12 |     * ways in order to get desired responsive behavior.
 13 |     * Mobile version: image is contained in
 14 |     * ofs-Heading__BackgroundImage with
 15 |     * ofs-LandingPage__Heading as the parent. Desktop
 16 |     * version: ofs-Heading__BackgroundImage is hidden,
 17 |     * and the image is contained in the ::after element
 18 |     * for ofs-LandingPage__Headinga
 19 |     **/
 20 |     #landing .ofs-Heading__BackgroundImage {
 21 |         display: block;
 22 |         min-height: 200px;
 23 |         width: 100%;
 24 |         padding-bottom: calc((5/8) * 100%);
 25 |         background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/landingpage-london-sem.jpg');
 26 |         background-repeat: no-repeat;
 27 |         background-position: 50% 50%;
 28 |         -ms-background-size: cover;
 29 |         -o-background-size: cover;
 30 |         -webkit-background-size: cover;
 31 |         background-size: cover;
 32 |     }
 33 |     #landing .ofs-Heading__TextOnBackground {
 34 |         margin: 1.5rem 0;
 35 |     }
 36 |     /* Override h1 styles for mobile */
 37 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
 38 |         padding: 0 2.5rem;
 39 |         font-size: 1.625rem;
 40 |         line-height: 2rem;
 41 |     }
 42 |     /* Override h2 styles for mobile */
 43 |     #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
 44 |         font-size: 1rem;
 45 |         line-height: 1.5rem;
 46 |     }
 47 |     @media screen and (min-width: 641px) {
 48 |         #landing .ofs-LandingPage__Heading {
 49 |             position: relative;
 50 |             min-height: 380px; /* Match height of standard screen width, but don't fix, because we need mobile to expand height to fit */
 51 |             background-color: #2a2730; /* Set a dark background for the image opacity to fade into */
 52 |             z-index: 1;
 53 |         }
 54 |         #landing .ofs-LandingPage__Heading::after {
 55 |             content: ' ';
 56 |             display: block;
 57 |             position: absolute;
 58 |             left: 0;
 59 |             top: 0;
 60 |             width: 100%;
 61 |             height: 100%;
 62 |             opacity: 0.6; /* Used in conjunction with the element's background-color */
 63 |             background-image: url('https://ofs-media-production.s3.amazonaws.com/media-library/landingpage-london-sem.jpg');
 64 |             background-repeat: no-repeat;
 65 |             background-position: 50% 50%;
 66 |             -ms-background-size: cover;
 67 |             -o-background-size: cover;
 68 |             -webkit-background-size: cover;
 69 |             background-size: cover;
 70 |             z-index: -1;
 71 |         }
 72 |         /* vertically and horizontally center group of elements in heading */
 73 |         #landing .ofs-LandingPage__Contents {
 74 |             top: 50%;
 75 |             left: 50%;
 76 |             -webkit-transform: translate(-50%, -50%);
 77 |             -ms-transform: translate(-50%, -50%);
 78 |             transform: translate(-50%, -50%);
 79 |             position: absolute;
 80 |         }
 81 |         /* This element is used in the mobile version and must be hidden for larger screens */
 82 |         #landing .ofs-Heading__BackgroundImage {
 83 |             display: none;
 84 |         }
 85 |         /* Remove margin since it throws off the vertical centering for parent */
 86 |         #landing .ofs-Heading__TextOnBackground {
 87 |             margin-top: 0;
 88 |         }
 89 |         /* Forces the text color to white for text on-top of background images */
 90 |         #landing .ofs-Heading__TextOnBackground h1,
 91 |         #landing .ofs-Heading__TextOnBackground h2,
 92 |         #landing .ofs-Heading__TextOnBackground h3,
 93 |         #landing .ofs-Heading__TextOnBackground h4,
 94 |         #landing .ofs-Heading__TextOnBackground h5,
 95 |         #landing .ofs-Heading__TextOnBackground h6 {
 96 |             color: white;
 97 |         }
 98 |         /* Reset h1 & h2 after custom mobile responsiveness */
 99 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Title {
100 |             margin-bottom: .5rem; /* fix to pull the sub-text closer to the header */
101 |             padding: 0;
102 |             font-size: 2.3125rem;
103 |             line-height: 3rem;
104 |         }
105 |         /* Reset h1 & h2 after custom mobile responsiveness */
106 |         #landing .ofs-Heading__TextOnBackground .ofs-LandingPage__Subtitle {
107 |             width: 430px;
108 |             font-size: 1.3125rem;
109 |             line-height: 2rem;
110 |             margin-left: auto;
111 |             margin-right: auto;
112 |         }
113 |     }
114 |     #landing .ofs-Heading__SearchBar {
115 |         padding: 1.5rem;
116 |         border-radius: 2px;
117 |         margin: 1rem auto;
118 |     }
119 |     /* Wrapper for Arrival and Departure fields. This gets modified from screensizes 641-851px */
120 |     .ofs-Heading__SearchBarColumnWrapper {
121 |         margin-bottom: 0;
122 |     }
123 |     /* Eliminate extra spacing between Form and value props */
124 |     .ofs-Heading__SearchBar .ofs-Form {
125 |         margin-bottom: 0;
126 |     }
127 |     /* Aligns all of the search placeholders left */
128 |     .ofs-Heading__SearchBar .ofs-Form .ofs-Input {
129 |         text-align: left;
130 |     }
131 |     /* Fix for inline forms without labels */
132 |     .ofs-Button--inline {
133 |         margin-top: 1.5rem;
134 |     }
135 |     /* Custom grid style for laptop (851px+) */
136 |     .ofs-Grid__Column--medium-half {
137 |         width: 100%;
138 |     }
139 |     /* Custom grid style to always be 50% regardless of screensize */
140 |     .ofs-Grid__Column--permanent-half {
141 |         width: 50%;
142 |     }
143 |     #landing .CallToAction-browse-top{
144 |         display: none;
145 |         text-align: right;
146 |         padding-bottom: 0.5rem;
147 |         }
148 |      #landing .CallToAction-browse-bottom{
149 |         display:block;
150 |         padding-top: 0.5rem;
151 |         text-align: left;
152 |      }
153 |     @media screen and (min-width: 641px) {
154 |         .ofs-Button--inline {
155 |         margin-top: 0rem;
156 |     }
157 |     }
158 |     @media screen and (min-width: 851px) {
159 |         /* Expand and constrain width slightly so that everything fits inline */
160 |         #landing .ofs-Heading__SearchBar {
161 |            width: 750px;
162 |         }
163 |         /* Remove input field's bottom margins when they're inline */
164 |         #landing .ofs-Heading__SearchBarColumnWrapper {
165 |             margin-bottom: 0;
166 |         }
167 |         /* Custom grid style for laptop (851px+) */
168 |         #landing .ofs-Grid__Column--medium-half {
169 |             width: 50%;
170 |         }
171 |     }
172 |     /* Modified homepage styling to make spacing consistent */
173 |     .about-wrap-container{
174 |         background-color: #F8F6F1;
175 |     }
176 |     .about-wrap {
177 |         margin-bottom: 2.5rem;
178 |     }
179 |     .about-wrap .heading {
180 |         text-align: center;
181 |     }
182 |     .about-wrap .values {
183 |         width: 100%;
184 |         padding-top: 1rem;
185 |     }
186 |     .about-wrap .values:after {
187 |         content: ".";
188 |         visibility: hidden;
189 |         display: block;
190 |         height: 0;
191 |         clear: both
192 |     }
193 |     .about-wrap .values__Item {
194 |         padding: 0 5px;
195 |         width: 50%;
196 |     }
197 |     .about-wrap .values--upper {
198 |         margin-bottom: 2.5rem;
199 |     }
200 |     .about-wrap .values--upper,
201 |     .about-wrap .values--lower {
202 |         padding: 0 5px;
203 |     }
204 |     .about-wrap .values__Item__Image {
205 |         display: block;
206 |         width: 130px;
207 |         height: 130px;
208 |         margin: 0 auto 2rem auto;
209 |     }
210 |     .about-wrap .values__Item__Copy {
211 |         text-align: center;
212 |         margin-bottom: 0;
213 |         padding: 0 1rem;
214 |     }
215 |     .press-wrap {
216 |         border-top: 1px solid #cdcdd1;
217 |         border-bottom: 1px solid #cdcdd1;
218 |         display: block;
219 |         margin-bottom: 2.5rem;
220 |     }
221 |     @media only screen and (min-width:641px) {
222 |         .about-wrap .values--upper,
223 |         .about-wrap .values--lower {
224 |             width: 50%;
225 |             float: left;
226 |             margin-bottom: 0;
227 |         }
228 |     }
229 |     @media only screen and (min-width:1025px) {
230 |         .about-wrap .values__Item {
231 |             padding: 0 40px;
232 |         }
233 |     }
234 |     .browse-homes{
235 |         color: white;
236 |         background-color: #2A2730;
237 |     }
238 |     /*Video container*/
239 |     .video-container{
240 |         width: 500px;
241 |         height: 281px;
242 |     }
243 |     @media only screen and (max-width: 500px){
244 |         .video-container{
245 |             width: 282px;
246 |             height: 158px;
247 |         }
248 |     }
249 |     .heading{
250 |         text-align: center;
251 |     }
252 |     .search-bar{
253 |         padding: 1.5rem 0;
254 |         background-color: #F6F7F9;
255 |     }
256 |     .search-cta{
257 |         padding-left: 0.5rem;
258 |         padding-right: 0.5rem;
259 |         padding-bottom: 1rem;
260 |     }
261 |     .sleep-selector{
262 |         padding-bottom: 1.5rem;
263 |     }
264 |     .section{
265 |         margin: 2rem 0;
266 |     }
267 |     /******************* MOBILE SEM LANDING PAGE STYLES ***********************/
268 |     .rf-Message { display:block;color:#d80033;font-size:.875rem;line-height:1rem;}
269 |     #email-invalid, .browse_all { display: none; }
270 |     /* HIDE Nav Menu & FOOTER ON MOBILE LANDING PAGE - Requested by Naza */
271 |     .ofs-GlobalFooter .ofs-GlobalFooter__Links, .ofs-GlobalFooter__UserConfig { display: none !important; }
272 |     #mobile-menu-toggle, #mobile-contact-toggle, .ofs-GlobalHeader__MobileSearchWrapper { display: none !important; }
273 |     #phone { border: 1px solid #CDCDD1 !important; width: 100%;
274 |       margint-top: 1.5em;
275 |       -webkit-appearance: none; -moz-appearance: none; appearance: none; }
276 |     #phone_invalid { margin-top:0.8em; display: none; }
277 | </style>
278 | 
279 | <div id="landing" a name="landing">
280 | 
281 |     <div class="ofs-LandingPage__Heading">
282 |         <div class="ofs-LandingPage__Contents">
283 |             <div class="ofs-Heading__TextOnBackground">
284 |               <h2 class="ofs-EnquiryForm__Title">
285 |                 1200 of the finest London homes <br/>
286 |                 Full concierge service <br/>
287 |                 Free WiFi and iPhone <br/>
288 |                 The White Company linens, towels &amp; toiletries <br/>
289 |               </h2>
290 |             </div>
291 |             <!-- only visible on mobile -->
292 |             <div class="ofs-Heading__BackgroundImage" id="LONDON_BG"></div>
293 |         </div>
294 |     </div>
295 | 
296 | 
297 |     <div class="ofs-Container">
298 |         <div class="ofs-Container__Content">
299 |             <div class="ofs-EditorialGrid section">
300 |                 <div class="ofs-EditorialGrid__Column ofs-EditorialGrid__Column--half">
301 |                     <div class="ofs-Grid search-cta">
302 |                       <h3>Put your feet up. Our London Specialists will find you the perfect home</h3>
303 |                       <p>With just a few details, our dedicated Reservations team will call you back and talk you through our homes, the onefinestay service and the local areas. It's quick and efficient.</p>
304 |                       <p>Once submitted, you will be free to browse our homes!</p>
305 |                     </div>
306 |                     <form class="ofs-Form" id="gform">
307 |                         <input type="hidden" id="city" name="city" value="LON">
308 |                         <div class="ofs-grid">
309 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
310 |                                 <div data-ofs-component="newDatepicker" id="start_date" data-name="start_date" data-placeholder="Arrival"></div>
311 |                             </div>
312 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
313 |                                 <div data-ofs-component="newDatepicker" id="end_date" data-name="end_date" data-placeholder="Departure"></div>
314 |                             </div>
315 |                         </div>
316 |                         <div class="ofs-grid">
317 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
318 |                                 <select name="sleeps" id="sleeps" data-ofs-component="simpleChoice">
319 |                                     <option value="">Guests</option>
320 |                                     <option value=1>1</option>
321 |                                     <option value=2>2</option>
322 |                                     <option value=3>3</option>
323 |                                     <option value=4>4</option>
324 |                                     <option value=5>5</option>
325 |                                     <option value=6>6</option>
326 |                                     <option value=7>7</option>
327 |                                     <option value=8>8</option>
328 |                                     <option value=9>9</option>
329 |                                 </select>
330 |                             </div>
331 |                             <!-- Disable Email Field for this Experiment
332 |                             <div class="ofs-grid">
333 |                              <div class="ofs-Grid__Column ofs-Grid__Column--half">
334 |                                   <div class="ofs-Form__Field">
335 |                                   <p class="ofs-Form__Label" id="email-label"></p>
336 |                                   <input required name="email" id="email" type="email" placeholder="Email address*"></input>
337 |                                   <span id="email-invalid" class="rf-Message">Must be a valid email address</span>
338 |                                   </div>
339 |                               </div>
340 |                             </div>
341 |                           -->
342 |                           <div class="ofs-grid" id="phone_number_wrapper">
343 |                            <div class="ofs-Grid__Column ofs-Grid__Column--half">
344 |                                 <div class="ofs-Form__Field">
345 |                                 <p class="ofs-Form__Label" id="email-label"></p>
346 |                                 <input required name="phone" id="phone" type="tel" placeholder="Phone number*"></input>
347 |                                 <span id="phone_invalid" class="rf-Message" style="visibility:hidden">Please enter a valid phone number</span>
348 |                                 </div>
349 |                             </div>
350 |                           </div>
351 | 
352 |                             <div class="ofs-Grid__Column ofs-Grid__Column--half">
353 |                                 <button class="ofs-Button ofs-Button--small ofs-Button--full-width ofs-Button--inline" id="submit">Submit</button>
354 |                                 <div class="ofs-Form__HelpText rf-Required">* indicates a required field</div>
355 |                             </div>
356 |                         </div>
357 |                     </form>
358 |                     <div class="heading">
359 |                       <h2 id="thankyou" style="display:none">Thanks! We will contact you soon!</h2>
360 |                     <di>
361 |                     <a  class="ofs-Button" id="browse_all" style="display:none"
362 |                     href="https://www.onefinestay.com/search/?city=108">
363 |                       Browse All London Homes
364 |                     </a>
365 |                 </div>
366 |             </div>
367 |         </div>
368 |     </div>
369 | </div>
370 | 
371 | <!-- Form submission handler to GoogleDocs -->
372 | <script data-cfasync="false" type="text/javascript">
373 |   // Client side email validation Requested by Naza ... See: https://stackoverflow.com/a/46181
374 |   function validEmail(email) {
375 |     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
376 |     return re.test(email);
377 |   }
378 |   // get all data in form and return object
379 |   function getFormData() {
380 |     var data   = {
381 |       city         : document.getElementById("city").value,
382 |       start_date   : document.getElementsByName("start_date") > 0 ? document.getElementsByName("start_date")[1].value : '',
383 |       end_date     : document.getElementsByName("end_date")   > 0 ? document.getElementsByName("end_date")[1].value   : '',
384 |       sleeps       : document.getElementsByName("sleeps")         ? document.getElementsByName("sleeps")[0].value     : '',
385 |       email        : document.getElementById("email") ? document.getElementById("email").value : '',
386 |       phone_number : document.getElementById("phone") ? document.getElementById("phone").value : '8888888'
387 |     }
388 | 
389 |     console.log(data);
390 |     return data;
391 |   }
392 |   // set the browse all url
393 |   // e.g: https://www.onefinestay.com/search/?city=108&start_date=2015-10-23&end_date=2015-10-31&sleeps=5
394 |   function browseAllUrl (data) {
395 |     var url = document.getElementById("browse_all").getAttribute('href');  // $('.browse_all').attr("href");
396 |     var params = "&start_date="    + data.start_date; // $('#start_date').val();
397 |     params = params + "&end_date=" + data.end_date;   // $('#end_date').val();
398 |     params = params + "&sleeps="   + data.sleeps;     // $('#sleeps option:selected').val();
399 |     url = url + params.replace(/\//g,'-');
400 |     console.log("Browse all:" + url);
401 |     document.getElementById("browse_all").href = url; // $('.browse_all').attr("href", url);
402 |   }
403 |   // handles form submit withtout any jquery
404 |   function handleFormSubmit(event) {
405 |     event.preventDefault();     // we are submitting via xhr below
406 |     var data = getFormData();   // get the values submitted in the form
407 |     var phone = document.getElementById("phone");
408 |     // https://stackoverflow.com/a/6449750/1148249
409 |     if (phone && ( isNaN(phone.value) || phone.value.length < 7) ) {
410 |       console.log(phone.value);
411 |       document.getElementById('phone').style.border = '1px solid #ED5434';
412 |       document.getElementById('phone_invalid').style.display = 'block';
413 |       document.getElementById('phone_invalid').style.visibility = 'visible';
414 |       return false;
415 |     }
416 |     else if ( document.getElementById("email") && !validEmail(data.email) ) {
417 |       document.getElementById('email-invalid').style.display = 'block';
418 |       return false;
419 |     } else {
420 |       document.getElementById("submit").disabled = true;
421 |       browseAllUrl(data); // set the url for search results page.
422 |       var url = "https://script.google.com/macros/s/AKfycbzFU_-z9lEQFy0exGZFlbd6dvtD4V07JaDI_3i_4J52OR3v8E_r/exec"; // prod
423 |       // var url = "https://script.google.com/macros/s/AKfycbzodNnKcXPo5_x1OmbV8bMBpJYnNDxSWqIklB0mWh3fKb7-Z20/exec"; // test
424 |       var xhr = new XMLHttpRequest();
425 |       xhr.open('POST', url);
426 |       // xhr.withCredentials = true;
427 |       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
428 |       xhr.onreadystatechange = function() {
429 |           console.log( xhr.status, xhr.statusText )
430 |           console.log(xhr.responseText);
431 |           document.getElementById('gform').style.display = 'none'; // hide form
432 |           document.getElementById('thankyou').style.display = 'block';
433 |           document.getElementById('browse_all').style.display = 'block';
434 |           return;
435 |       };
436 |       // url encode form data for sending as post data
437 |       var encoded = Object.keys(data).map(function(k) {
438 |           return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
439 |       }).join('&')
440 |       xhr.send(encoded);
441 |     }
442 |   }
443 | 
444 |   function loaded() {
445 |     // bind to the submit event of our form
446 |     var form = document.getElementById('gform');
447 |     form.addEventListener("submit", handleFormSubmit, false);
448 |   };
449 |   document.addEventListener('DOMContentLoaded', loaded, false);
450 | </script>
451 | 


--------------------------------------------------------------------------------