window.addEventListener("DOMContentLoaded", function () { // get the form elements defined in your form HTML above var form = document.getElementById("my-form"); // var button = document.getElementById("my-form-button"); var status = document.getElementById("status"); // Success and Error functions for after the form is submitted function success() { form.reset(); status.classList.add("success"); status.innerHTML = "Thanks!"; } function error() { status.classList.add("error"); status.innerHTML = "Oops! There was a problem."; } // handle the form submission event form.addEventListener("submit", function (ev) { ev.preventDefault(); var data = new FormData(form); ajax(form.method, form.action, data, success, error); }); }); // helper function for sending an AJAX request function ajax(method, url, data, success, error) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.setRequestHeader("Accept", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState !== XMLHttpRequest.DONE) return; if (xhr.status === 200) { success(xhr.response, xhr.responseType); } else { error(xhr.status, xhr.response, xhr.responseType); } }; xhr.send(data); } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat"; } section { height: 100vh; width: 100%; background-color: aliceblue; display: flex; align-items: center; justify-content: center; flex-direction: column; } .container { width: 90%; max-width: 500px; margin: 0 auto; padding: 20px; box-shadow: 0px 0px 20px #00000010; background-color: white; border-radius: 8px; margin-bottom: 20px; } .form-group { width: 100%; margin-top: 20px; font-size: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 5px; font-size: 18px; border: 1px solid rgba(128, 128, 128, 0.199); margin-top: 5px; } textarea { resize: vertical; } button[type="submit"] { width: 100%; border: none; outline: none; padding: 20px; font-size: 24px; border-radius: 8px; font-family: "Montserrat"; color: rgb(27, 166, 247); text-align: center; cursor: pointer; margin-top: 10px; transition: 0.3s ease background-color; } button[type="submit"]:hover { background-color: rgb(214, 226, 236); } #status { width: 90%; max-width: 500px; text-align: center; padding: 10px; margin: 0 auto; border-radius: 8px; } #status.success { background-color: rgb(211, 250, 153); animation: status 4s ease forwards; } #status.error { background-color: rgb(250, 129, 92); color: white; animation: status 4s ease forwards; } @keyframes status { 0% { opacity: 1; pointer-events: all; } 90% { opacity: 1; pointer-events: all; } 100% { opacity: 0; pointer-events: none; } }

Dodaj komentarz