├── LICENSE ├── README.md ├── app.js ├── index.html ├── jquery-2.1.4.js ├── preview.png ├── start_server.sh ├── style.css └── update_github_pages.sh /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Typeform I/O 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sorry, Typeform I/O will be deprecated soon. Please visit https://developer.typeform.com/ to discover our new developer products 2 | 3 | 4 | # form-submit demo 5 | 6 | This is a demo of how you can use the `form-submit` event in Typeform I/O to create 7 | your own thank-you screens or send the user to a different page. 8 | 9 | ![preview](preview.png) 10 | 11 | ## Requirements 12 | 13 | * A browser 14 | 15 | ## Installing 16 | 17 | * Clone this project into your local computer 18 | 19 | ## Running 20 | 21 | * Run the server by executing `./start_server.sh` when inside the application directory 22 | * Visit http://localhost:8000 in your browser 23 | 24 | ## Where to get help 25 | 26 | * [Open up an issue](https://github.com/TypeformIO/form-submit-demo/issues/new) in this repository 27 | * In our official Slack channel ( [Signup](https://io1.typeform.com/to/sHP9NQ) ) 28 | * Send email to [support@typeform.io](mailto:support@typeform.io) 29 | 30 | ## Contributing 31 | 32 | If you want to contribute, just follow the general code style and code on! We 33 | love pull requests. 34 | 35 | If you're unsure if we're gonna merge it or not, create an issue before and we'll 36 | discuss it. 37 | 38 | ## License 39 | The MIT License (MIT) 40 | 41 | Copyright (c) 2015 Typeform 42 | 43 | Permission is hereby granted, free of charge, to any person obtaining a copy 44 | of this software and associated documentation files (the "Software"), to deal 45 | in the Software without restriction, including without limitation the rights 46 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 47 | copies of the Software, and to permit persons to whom the Software is 48 | furnished to do so, subject to the following conditions: 49 | 50 | The above copyright notice and this permission notice shall be included in 51 | all copies or substantial portions of the Software. 52 | 53 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 54 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 55 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 56 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 57 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 58 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 59 | THE SOFTWARE. 60 | 61 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // _______ __ _____ ______ 2 | // |__ __| / _| |_ _| / / __ \ 3 | // | |_ _ _ __ ___| |_ ___ _ __ _ __ ___ | | / / | | | 4 | // | | | | | '_ \ / _ \ _/ _ \| '__| '_ ` _ \ | | / /| | | | 5 | // | | |_| | |_) | __/ || (_) | | | | | | | | _| |_ / / | |__| | 6 | // |_|\__, | .__/ \___|_| \___/|_| |_| |_| |_| |_____/_/ \____/ 7 | // __/ | | 8 | // |___/|_| 9 | // 10 | // form-submit event demo 11 | // 12 | // This demo application simply demonstrates how the form-submit in Typeform I/O 13 | // works. 14 | // 15 | // Run the `run-server.sh` script to start a server, navigate to http://localhost:8000 16 | // and try it out. 17 | // 18 | // The code is open source and available at https://github.com/typeformio/form-submit-demo 19 | 20 | 21 | 22 | // Which page to start on 23 | var first_page = "one"; 24 | 25 | ///////////////////// 26 | // Individual page actions 27 | ///////////////////// 28 | var pages = { 29 | "page_one": function() { 30 | fadeInStepsInPage('one', ['one', 'two', 'three', 'four']); 31 | // When the user clicks on the ready button, go to page two 32 | this.on('click', '#ready', function() { 33 | goToPage('two'); 34 | }); 35 | }, 36 | "page_two": function() { 37 | // Defer and focus the form for user input 38 | setTimeout(function() { 39 | $('#form').attr('src', 'https://forms.typeform.io/to/N8SfkWWXZG'); 40 | $('#form').focus(); 41 | }, 0); 42 | ///////////////////////////////////////////////////////////////////////////// 43 | // This is what you care about, the message event. It comes from the embedded 44 | // typeform and will have the originalEvent.data set to 'form-submit' if the 45 | // user submits the form. 46 | // If this event gets sent, we send the user to the third page and then change 47 | // the little debug event-status thing we have in the top-left 48 | $(window).on('message', function(ev) { 49 | if(ev.originalEvent.data === 'form-submit') { 50 | goToPage('three'); 51 | formEventHaveBeenSubmitted(); 52 | } 53 | }); 54 | }, 55 | "page_three": function() { 56 | fadeInStepsInPage('three', ['one', 'two', 'three', 'four']); 57 | }, 58 | } 59 | 60 | 61 | ///////////////////// 62 | // Application start 63 | ///////////////////// 64 | $(document).ready(function() { 65 | goToPage(first_page); 66 | }); 67 | 68 | 69 | ///////////////////// 70 | // Helper functions 71 | ///////////////////// 72 | 73 | // Hides all the pages 74 | function hideAllPages() { 75 | Object.keys(pages).forEach(function(page) { 76 | $('#' + page).hide(); 77 | }); 78 | } 79 | 80 | // Hides all the pages, show the one declared in page_name and then executes the 81 | // page function 82 | function goToPage(page_name) { 83 | hideAllPages(); 84 | $page = $('#page_' + page_name); 85 | $page.show(); 86 | pages['page_' + page_name].bind($page)(); 87 | } 88 | 89 | // Function to switch the status of the debug event-status 90 | function formEventHaveBeenSubmitted() { 91 | $('.event_not_yet').hide(); 92 | $('.event_submitted').fadeIn(); 93 | } 94 | 95 | // Function to animate the steps like a flashy intro 96 | function fadeInStepsInPage(page, steps) { 97 | if(steps.length > 0) { 98 | $('#page_' + page + ' .step_' + steps[0]).fadeIn(1000, function() { 99 | fadeInStepsInPage(page, steps.slice(1)); 100 | }); 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | form-submit demo | Typeform I/O 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
Waiting for form-submit event...
17 |
form-submit event have been received!!!
18 |
19 |
20 |

Fill out this form

21 |

22 | We would really like to hear your opinion about the Toaster Fridge you just bought. Click below to be able to win a teddy bear 23 |

24 |
25 | I'm ready! 26 |

27 | Protip: Look at the top-left corner to see the status of the submit event 28 |

29 |
30 |
31 | 32 |
33 |
34 |

Thank you!

35 | 36 |

We value your feedback extremely much!

37 | Visit Typeform I/O 38 |
39 |
40 | Fork me on GitHub 41 | 42 | 43 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TypeformIO/form-submit-demo/1f5f391dc94b62430cfd8d7fcacdd41acb7afe0f/preview.png -------------------------------------------------------------------------------- /start_server.sh: -------------------------------------------------------------------------------- 1 | #! /bin/sh 2 | 3 | python -m SimpleHTTPServer 4 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0px; padding: 0px; 3 | overflow: hidden; 4 | 5 | text-align: center; 6 | font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; 7 | font-size: 20px; 8 | color: #37404A; 9 | } 10 | 11 | #form { 12 | border: none; 13 | } 14 | 15 | .slide { 16 | position: absolute; 17 | top: 0px; 18 | right: 0px; 19 | bottom: 0px; 20 | left: 0px; 21 | display: none; 22 | } 23 | 24 | #page_one { 25 | padding-top: 10%; 26 | width: 90%; 27 | margin-left: 5%; 28 | } 29 | 30 | #page_three { 31 | overflow: scroll; 32 | padding-top: 2%; 33 | padding-bottom: 10%; 34 | } 35 | 36 | #page_three img { 37 | width: 100%; 38 | } 39 | 40 | @media (min-width: 600px) { 41 | #page_three img { 42 | width: 50%; 43 | } 44 | } 45 | 46 | #application a { 47 | text-decoration: none; 48 | border-radius: 3px; 49 | border: 2px solid; 50 | color: #8BCBCA; 51 | border-color: #8BCBCA; 52 | padding: 10px; 53 | } 54 | 55 | #application a:hover { 56 | color: #FFF; 57 | background-color: #8BCBCA; 58 | cursor: pointer; 59 | } 60 | 61 | .step_one, .step_two, .step_three, .step_four, .step_five { 62 | display: none; 63 | } 64 | 65 | #event_status { 66 | position: absolute; 67 | font-size: 12px; 68 | left: 10px; 69 | top: 10px; 70 | z-index: 1000; 71 | } 72 | 73 | small { 74 | opacity: 0.7; 75 | font-size: 13px; 76 | } 77 | 78 | .event_submitted, .event_not_yet { 79 | padding: 5px; 80 | } 81 | 82 | .event_submitted { 83 | background-color: lime; 84 | display: none; 85 | } 86 | 87 | .event_not_yet { 88 | background-color: firebrick; 89 | color: white; 90 | } 91 | -------------------------------------------------------------------------------- /update_github_pages.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # To use this, be on the master branch and run this command. 4 | # It will automagically merge master into gh-pages and push it. When it's done, 5 | # it switches you over to master again 6 | 7 | git checkout gh-pages 8 | git merge master 9 | git push origin gh-pages 10 | git checkout master 11 | --------------------------------------------------------------------------------