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

Cleanup

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('tabs');
require('prism');
require('contact_us_form');
// 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' %>)

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

@ -188,7 +188,7 @@
<p class="paragraph">
We are building tinyforms to make your work easier! Let us know what we can do for you.
</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">
<div class="columns is-centered">
<div class="column is-one-third">
@ -206,35 +206,18 @@
</div>
<div class="control has-text-centered">
<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>
</form>
<div id="contact-us-form-success-message" style="display: none">
<div class="columns is-centered">
<div id="contact-us-form-success-message" class="columns is-centered is-hidden">
<div class="column is-one-third">
<h3 class="is-size-5">
Thank you for reaching out!
</h3>
</div>
</div>
</div>
</div>
</section>
</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>
</div>