Areya
/
basic-business-template
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

add spinner button

master
Gustavo Luigi 2024-01-09 17:06:04 -03:00
parent f793b90902
commit 39f5cf71ce
2 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
content/contents/leistungen.blade.php
View File

@ -76,8 +76,7 @@
</div> </div>
</div> </div>
@else @else
<x-form id="anfrage" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde" > <x-form id="anfrage" class="form-load" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde">

<div class="mb-4"> <div class="mb-4">
<label for="exampleInputEmail1" class="form-label">Name:</label> <label for="exampleInputEmail1" class="form-label">Name:</label>
<input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required> <input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required>
@ -93,20 +92,16 @@
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required> <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required>
</div> </div>



<div class="form-floating mb-4"> <div class="form-floating mb-4">
<textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea> <textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea>
<label for="floatingTextarea">Nachricht</label> <label for="floatingTextarea">Nachricht</label>
</div> </div>



<div class="d-grid gap-2"> <div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-block">Anfrage unverbindlich absenden <button type="submit" d-load-message="seding" class="btn btn-primary btn-block btn-load">Anfrage unverbindlich absenden
<svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg> <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
</button> </button>

</div> </div>

</x-form> </x-form>
@endif @endif
</div> </div>
@ -152,12 +147,12 @@
text: 'Text', text: 'Text',
url: window.location.href, url: window.location.href,
} }
</script> </script>
<script src="{{ asset('template/js/pages/news/methods.js') }}"></script> <!-- <script src="{{ asset('template/js/pages/news/methods.js') }}"></script>
<script src="{{ asset('template/js/pages/news/events.js') }}"></script> <script src="{{ asset('template/js/pages/news/events.js') }}"></script>
<script src="{{ asset('template/js/pages/news/script.js') }}"></script> <script src="{{ asset('template/js/pages/news/script.js') }}"></script>
<script src="{{ asset('system/js/intlTelInput.min.js') }}"></script> <script src="{{ asset('system/js/intlTelInput.min.js') }}"></script> -->
<script> <!-- <script>
var input = document.querySelector(".phone"); var input = document.querySelector(".phone");
var iti = window.intlTelInput(input, { var iti = window.intlTelInput(input, {
initialCountry: "de", initialCountry: "de",
@ -177,5 +172,18 @@
} }
return true; return true;
}); });
</script> </script> -->
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".form-load").forEach(formLoad => formLoad.addEventListener("submit", () => {
let btnLoad = formLoad.querySelector('.btn-load');
let message = btnLoad.getAttribute('d-load-message');
btnLoad.innerHTML = `
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">${message}...</span>
`;
}));
});
</script>
@stop @stop

2
content/includes/scripts.blade.php
View File

@ -2,4 +2,4 @@
<script src="{{storage('assets/libs/js-cookie-3.0.1.min.js')}}"></script> <script src="{{storage('assets/libs/js-cookie-3.0.1.min.js')}}"></script>
<script src="{{storage('assets/libs/lottie-player-0.4.0.js')}}"></script> <script src="{{storage('assets/libs/lottie-player-0.4.0.js')}}"></script>
<script src="{{storage('assets/js/components/cookies-consent.js')}}"></script> <script src="{{storage('assets/js/components/cookies-consent.js')}}"></script>
<script type="module" src="{{storage('assets/js/main.js')}}"></script> <!-- <script type="module" src="{{storage('assets/js/main.js')}}"></script> -->