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

Cleanup

Browse Source
This commit is contained in:
Yannick 2020-04-30 00:01:41 +02:00
parent 0957b2cd70
commit 67b538c8b5
3 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/contact_us_form.js Normal file
View File

@ -0,0 +1,12 @@
document.addEventListener("turbolinks:load", function () {
var form = document.getElementById('contact-us-form');
form.addEventListener('submit', function (e) {
document.getElementById("contact-us-form-submit-button").classList.add('is-hidden');
document.getElementById("contact-us-form-loading-state").classList.remove('is-hidden');
});
form.addEventListener('tinyforms:submitted', function(e) {
form.classList.add('is-hidden');
document.getElementById("contact-us-form-success-message").classList.remove('is-hidden');
})
});

1
app/javascript/packs/application.js
View File

@ -14,6 +14,7 @@ require('demo');
require('backend_typed'); require('backend_typed');
require('tabs'); require('tabs');
require('prism'); require('prism');
require('contact_us_form');
// Uncomment to copy all static images under ../images to the output folder and reference // Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

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

@ -188,7 +188,7 @@
<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 data-tinyforms="true" data-tinyforms-submitted="myCallback" id="contact-us-form" method=" POST" <form id="contact-us-form" data-tinyforms="true" method=" POST"
action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW" enctype="multipart/form-data"> 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">
@ -206,35 +206,18 @@
</div> </div>
<div class="control has-text-centered"> <div class="control has-text-centered">
<button id="contact-us-form-submit-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> <span id="contact-us-form-loading-state" class="is-hidden">Loading...</span>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
<div id="contact-us-form-success-message" style="display: none"> <div id="contact-us-form-success-message" class="columns is-centered is-hidden">
<div class="columns is-centered">
<div class="column is-one-third"> <div class="column is-one-third">
<h3 class="is-size-5"> <h3 class="is-size-5">
Thank you for reaching out! Thank you for reaching out!
</h3> </h3>
</div> </div>
</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>