89 lines
3.7 KiB
Plaintext
89 lines
3.7 KiB
Plaintext
<section class="section demo">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
<form class="form demo-form" id="demo-form" action="<%= submission_url(GOOGLE_DEMO_FORM) %>" method="POST" enctype="multipart/form-data" data-tinyforms="true">
|
|
<input type="hidden" name="ID" value="tinyforms_id">
|
|
<h3 class="title">Demo</h3>
|
|
<p>
|
|
This short form is connected to the embedded <%= link_to 'document', GOOGLE_DEMO_FORM.spreadsheet_url %> on the right. <br>
|
|
Submit the form and see the update of the document in realtime.
|
|
</p>
|
|
|
|
<div id="demo-success" style="display:none;">
|
|
<p class="is-size-4 has-text-success">
|
|
<span id="demo-submission-name"></span>, thanks for your submission!
|
|
</p>
|
|
<p>See your entry in the spreadsheet?!</p>
|
|
<p>
|
|
<%= link_to "Create your form now!", signup_url, class: 'button' %>
|
|
<br>
|
|
or got <%= link_to 'further questions?', contact_url %>
|
|
</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">
|
|
<label class="label">What's your favorit cat picture?</label>
|
|
<div class="control">
|
|
<input class="input" type="file" name="Cat Picture">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button class="button is-link" id="demo-submit">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/<%= GOOGLE_DEMO_FORM.google_spreadsheet_id %>/edit?usp=sharing&nocache=<%= Time.now.to_i %>#gid=0&range=<%= GOOGLE_DEMO_FORM.submissions.count + 1 %>:<%= GOOGLE_DEMO_FORM.submissions.count + 2 %>"></iframe>
|
|
<p class="has-text-grey has-text-centered">Document not loading? <%= link_to 'Open it here', GOOGLE_DEMO_FORM.spreadsheet_url %>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|