bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Submit the contact us form using javascript

Browse Source 
Added tinyforms js compatibitlity with the form and added different form
submission stages such as the loading and success stage
This commit is contained in:
Yannick 2020-04-29 14:56:57 +02:00
parent 235cbd798f
commit 0957b2cd70
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/views/home/index.html.erb
View File

@ -14,7 +14,9 @@
].sample %> ].sample %>
</h1> </h1>
<p class="tag-line is-size-5"> <p class="tag-line is-size-5">
Link your online forms to <span class="google-sheets backend-logo"><%= image_tag 'google_sheets-icon.svg' %> Google Sheets</span> or <span class="airtable backend-logo"><%= image_tag 'airtable-icon.svg' %> Airtable</span> and receive form submissions in your favorite spreadsheet tool. Link your online forms to <span class="google-sheets backend-logo"><%= image_tag 'google_sheets-icon.svg' %>
Google Sheets</span> or <span class="airtable backend-logo"><%= image_tag 'airtable-icon.svg' %>
Airtable</span> and receive form submissions in your favorite spreadsheet tool.
</p> </p>
<p class="call-to-action"> <p class="call-to-action">
<%= link_to "Get started", signup_url, class: 'is-uppercase button is-rounded is-primary has-text-white a-menu' %> <%= link_to "Get started", signup_url, class: 'is-uppercase button is-rounded is-primary has-text-white a-menu' %>
@ -186,7 +188,8 @@
<p class="paragraph"> <p class="paragraph">
We are building tinyforms to make your work easier! Let us know what we can do for you. We are building tinyforms to make your work easier! Let us know what we can do for you.
</p> </p>
<form method="POST" class="contact-form has-text-left" action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW"> <form data-tinyforms="true" data-tinyforms-submitted="myCallback" id="contact-us-form" method=" POST"
action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW" enctype="multipart/form-data">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-one-third"> <div class="column is-one-third">
<div class="field"> <div class="field">
@ -202,13 +205,36 @@
</div> </div>
</div> </div>
<div class="control has-text-centered"> <div class="control has-text-centered">
<button class="button is-primary">Submit</button> <button id="contact-us-form-submit-button" class="button is-primary">Submit</button>
<span id="contact-us-form-loading-state" style="display: none">Loading...</span>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
<div id="contact-us-form-success-message" style="display: none">
<div class="columns is-centered">
<div class="column is-one-third">
<h3 class="is-size-5">
Thank you for reaching out!
</h3>
</div>
</div>
</div>
</div> </div>
</section> </section>
</div> </div>
<script>
var form = document.getElementById('contact-us-form');
form.addEventListener('submit', function (e) {
document.getElementById("contact-us-form-submit-button").style.display = 'none';
document.getElementById("contact-us-form-loading-state").style.display = 'inline-block';
});
function myCallback(submission) {
document.getElementById("contact-us-form").style.display =
'none'; // the event detail.submission holds the submission data
document.getElementById("contact-us-form-success-message").style.display =
'block'; // the event detail.submission holds the submission data
}
</script>