Michael Bumann
e46e68cc22
The demo page shows a form and an embedded google sheet side by side. The form needs be be configured with a DEMO_FORM_ID environment variable.
78 lines
3.0 KiB
Plaintext
78 lines
3.0 KiB
Plaintext
<section class="section demo">
|
|
<div class="container content">
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
<form class="form demo-form" id="demo-form" action="<%= submission_url(DEMO_FORM) %>" method="POST" enctype="multipart/form-data" data-tinyforms="true">
|
|
<h3>Demo</h3>
|
|
<p>
|
|
This short form is connected to the embedded document on the right. <br>
|
|
Submit the form and see the update of the document.
|
|
</p>
|
|
|
|
<div id="demo-success" style="display:none;">
|
|
<p class="is-size-4 has-text-success">
|
|
Thanks for your submission!
|
|
</p>
|
|
<p>See your entry in the spreadsheet?!</p>
|
|
<p>
|
|
<%= link_to "Get started now", signup_url, class: 'button' %>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="demo-fields">
|
|
<div class="field">
|
|
<label class="label">What's your name?</label>
|
|
<div class="control">
|
|
<input class="input" type="text" name="Name" required="true" placeholder="Your name">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Where are you from?</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select name="Continent">
|
|
<option value="Africa">Africa</option>
|
|
<option value="Antartica">Antartica</option>
|
|
<option value="Asia">Asia</option>
|
|
<option value="Australia">Australia</option>
|
|
<option value="Europe">Europe</option>
|
|
<option value="North America">North America</option>
|
|
<option value="South America">South America</option>
|
|
<option value="Australia">Australia</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Do you like Pizza with Pinapples?</label>
|
|
<div class="control">
|
|
<label class="radio">
|
|
<input type="radio" name="Pinapples Pizza?" required value="yes">
|
|
Yes
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="Pinapples Pizza?" required value="no">
|
|
Hell, no!
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button class="button is-link">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<iframe id="demo-sheet" style="width:100%;height:100%;" src="https://docs.google.com/spreadsheets/d/<%= DEMO_FORM.google_spreadsheet_id %>/edit?usp=sharing&nocache=<%= Time.now.to_i %>#gid=0&range=<%= DEMO_FORM.submissions.count + 1 %>:<%= DEMO_FORM.submissions.count + 2 %>"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|