Bagaimana kita bisa membuat formulir umpan balik menggunakan html dan javascript?

Question

Kode lengkap - HTML, CSS dan Javascript dapat ditemukan di bawah. Bonusnya, ia memiliki validasi dan pemuat yang keren

Table of Contents Show

desain formulir responsif
html validasi formulir javascript
Tutorial ujung depan
Bagaimana cara membuat formulir umpan balik dalam JavaScript?
Bagaimana cara membuat tombol umpan balik di HTML?
Bagaimana cara membuat formulir umpan balik menggunakan HTML dan CSS?
Bagaimana cara membuat formulir umpan balik untuk situs web saya?

<!DOCTYPE html>
<html>

<head>
    <title>RESPONSIVE FEEDBACK FORM </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <style>
        body {
            margin: 0 auto;
            background-color: black;
        }
        
        div.formContainer {
            margin: 4em auto 4em auto;
            width: 80%;
            color: #FCE205;
            border: 1px solid #FCE205;
            border-radius: 2px;
        }
        
        div.heading {
            margin: 0 auto 0 auto;
            width: 100%;
            padding: 1em 0 1em 0;
            letter-spacing: 0.1em;
            font-size: 1.2em;
            font-weight: bold;
            border-bottom: 1px solid #FCE205;
            text-align: center;
            background-color: #FCE205;
            color: black;
        }
        
        div.description {
            padding: 1em 0 1em 0;
            width: 80%;
            margin: 0 auto 0 auto;
            text-align: center;
        }
        
        div.form {
            margin: 0 auto 0 auto;
            width: 100%;
        }
        
        div.form form {
            margin: 0 auto 0 auto;
            width: 80%;
        }
        
        div.form label {
            display: block;
            width: 80%;
            margin: 1em auto 1em auto;
            outline: none;
            color: #FCE205;
            font-weight: bolder;
            letter-spacing: 0.1;
        }
        
        div.form input {
            display: block;
            width: 80%;
            margin: 1em auto 1em auto;
            outline: none;
            color: #FCE205;
            padding: 1.2em 0 1em 1.2em;
            background-color: black;
            border: 0.5px solid #FCE205;
        }
        
        div.form textarea {
            display: block;
            width: 80%;
            margin: 1em auto 1em auto;
            outline: none;
            color: #FCE205;
            padding: 1.2em 0 1em 1.2em;
            background-color: black;
            border: 0.5px solid #FCE205;
            height: 8em;
            resize: none;
        }
        
        div.form button {
            outline: none;
            margin: 2em auto 2em auto;
            padding: 2em;
            cursor: pointer;
            border: none;
            display: block;
            width: 60%;
            text-align: center;
            border: 1px solid #FCE205;
        }
        
        div.form input:active,
        div.form input:focus,
        div.form select:active,
        div.form select:focus,
        div.form textarea:active,
        div.form textarea:focus,
        div.form button:active,
        div.form button:hover {
            box-shadow: 0 0 2px 2px white;
        }
        
        div.form button {
            background-color: black;
            color: #FCE205;
            font-weight: bolder;
            transition: all 0.2s linear;
        }
        
        @keyframes status {
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }
        
        div.statusActive {
            display: block;
            width: 80%;
            margin: 1em auto 1em auto;
            padding: 1.2em 0 1em 1.2em;
            background-color: #FCE205;
            color: black;
            text-align: center;
            animation-name: status;
            animation-duration: 0.3s;
            transition: all 0.2s linear;
        }
        
        div.loadingActive {
            width: 90%;
            margin: 4em auto 4em auto;
            grid-template-columns: 33.3% 33.3% 33.3%;
            display: grid;
            transition: all linear 0.2s;
        }
        
        div.loadingActive div {
            padding: 0.5em;
            background-color: #FCE205;
            animation-name: rotatingDiv;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }
        
        @keyframes rotatingDiv {
            from {
                transform: rotate(-180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @media only screen and (min-width: 1224px) {
            div.formContainer {
                width: 500px;
            }
        }
        
        @media only screen and (min-width: 1824px) {
            div.formContainer {
                width: 500px;
            }
        }
        
        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
            div.formContainer {
                width: 80%;
            }
        }
    </style>


</head>

<body>


    <div class="formContainer">
        <div class="heading">
            FEEDBACK FORM STYLE
        </div>
        <div class="description">
            <p> This is a responsive form with some Good UI.</p>
        </div>
        <div class="form">
            <form id="form">
                <label for="name">Name</label>
                <input name="name" type="text" id="name" />
                <label for="email">Email</label>
                <input name="email" type="email" id="email" />
                <label for="designation">Designation</label>
                <input name="designation" type="text" id="designation" />
                <label for="feedback">Feedback</label>
                <textarea name="feedback" id="feedback"></textarea>
                <button type="submit">SUBMIT</button>
            </form>
        </div>

        <div id="loading">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>

        <div id="status">

        </div>

    </div>

    <script>
        class Feedback {
            constructor() {
                this.formEle = document.getElementById("form");
                this.emailEle = document.getElementById("email");
                this.designationEle = document.getElementById("designation");
                this.nameEle = document.getElementById("name");
                this.feedbackEle = document.getElementById("feedback");
                this.statusEle = document.getElementById("status");
                this.loading = document.getElementById("loading");
            }
            setStatus(content) {
                this.removeLoading();
                this.statusEle.classList.add("statusActive");
                this.statusEle.innerHTML = content;
            }
            removeStatus() {
                this.statusEle.classList.remove("statusActive");
                this.statusEle.innerHTML = ``;
            }
            addLoading() {
                this.loading.classList.add("loadingActive");
            }
            removeLoading() {
                this.loading.classList.remove("loadingActive");
            }
            isEmpty(value) {
                return (value.trim().length == 0) ? true : false;
            }
            invalidLength(value, len) {
                return (value.length > len) ? true : false;
            }
            validateEmail(email) {
                let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }

            initialize() {
                this.formEle.onsubmit = (e) => {
                    e.preventDefault();
                    this.removeStatus();
                    this.addLoading();
                    this.validate();
                }
            }

            validate() {
                let email = this.emailEle.value.trim();
                let designation = this.designationEle.value.trim();
                let feedback = this.feedbackEle.value.trim();
                let name = this.nameEle.value.trim();
                let hasErrors = false;
                let errors = `<h>ERROR</h>`;
                if (this.isEmpty(name)) {
                    errors = `${errors} <p> We need your name pal !!! </p>`;
                    hasErrors = true;
                }
                if (this.invalidLength(name, 59)) {
                    errors = `${errors} <p>Name cant exceed 60 characters</p>`;
                    hasErrors = true;
                }
                if (!this.validateEmail(email)) {
                    errors = `${errors} <p> Is that a valid email ? ? </p>`;
                    hasErrors = true;
                }
                if (this.isEmpty(email)) {
                    errors = `${errors} <p> Email can not be empty </p>`;
                    hasErrors = true;
                }
                if (this.invalidLength(email, 319)) {
                    errors = `${errors} <p>Email can not exceed 320 characters</p>`;
                    hasErrors = true;
                }

                if (this.isEmpty(designation)) {
                    errors = `${errors} <p> Designation cant be empty </p>`;
                    hasErrors = true;
                }
                if (this.invalidLength(designation, 59)) {
                    errors = `${errors} <p>Please fit your designation within 60 characters</p>`;
                    hasErrors = true;
                }

                if (this.isEmpty(feedback)) {
                    errors = `${errors} <p> Irony....!feedback cant be empty</p>`;
                    hasErrors = true;
                }
                if (this.invalidLength(feedback, 5999)) {
                    errors = `${errors} <p>Thats a long feedback,sorry feedback can not exceed 6000 characters</p>`;
                    hasErrors = true;
                }

                if (hasErrors) {
                    this.setStatus(errors);
                } else {
                    let data = {
                            data: {
                                email: email,
                                designation: designation,
                                name: name,
                                feedback: feedback
                            }
                        }
                        // this.sendData(JSON.stringify(data));
                }
            }

            sendData(jsonData) {
                const url = "./php/AddFeedback.php";
                let xhttp = new XMLHttpRequest();
                let that = this;
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        if (this.responseText) {
                            that.setStatus("Thank you ! We got your feedback, we look forward to more from you.");
                            that.formEle.reset();
                        } else {
                            that.setStatus("Are you sure you entered valid data? Dont worry there might also be problem with our server. Why not give it another shot?");
                        }
                    }
                };
                xhttp.open("POST", url, true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send(`data=${jsonData}`);
            }

        }
        const fb = new Feedback();
        fb.initialize();
    </script>

</body>

</html>

Seperti yang dikatakan sebelumnya, ini adalah formulir Ajax lengkap dengan validasi

Ini akan mengirimkan Data Formulir ke server dalam format JSON dengan permintaan POST , yang nama parameternya adalah data.

Sebelum permintaan POST, objek di bawah ini dirangkai menggunakan JSON. stringify lalu diteruskan ke parameter POST data di XMLHTTPRequest

let data = {
    data: {
        email: email,
        designation: designation,
        name: name,
        feedback: feedback
    }
}

_

Untuk segera menggunakan formulir ini, batalkan komentar ini. sendData() di validate() dan juga mengubah url in sendData()

Untuk demo langsung - di sini

Bonus - Hubungi kami ajax responsive dari kode front end dan back end di sini

JUDUL ALTERNATIF

formulir html

desain formulir responsif

html validasi formulir javascript

Formulir kirim ajax

membentuk motivasi desain

Pelajari css, tutorial lanjutan css

Pelajari javascript, tutorial javascript

Pelajari html, pelajari Pengembangan web, pelajari desain web

Tutorial ujung depan

Bagaimana cara membuat formulir umpan balik dalam JavaScript?

fungsi toggle_visibility() {

var e = dokumen. getElementById('umpan balik-utama');

jika (mis. gaya. tampilkan == 'blok')

e. gaya. tampilkan = 'tidak ada';

e. gaya. tampilan = 'blok';

Bagaimana cara membuat tombol umpan balik di HTML?

Berikut adalah langkah-langkah tentang cara membuat pemicu khusus untuk formulir umpan balik. .

Pilih tombol pemicu JS

Ketik ID ke dalam jendela ID pemicu yang ditentukan

Tambahkan ID ini pada tautan, gambar, atau elemen div lainnya di html situs web Anda

Rekatkan javascript juga di bagian badan html itu

Bagaimana cara membuat formulir umpan balik menggunakan HTML dan CSS?

Untuk membuat formulir umpan balik, Anda dapat membuka halaman pengeditan kode HTML baru di IDE Anda . Di sini, saya menggunakan Visual Studio Code untuk tujuan ini. Anda dapat menginstal Kode Visual Studio dengan mengklik di sini. Saya menyematkan kode dalam satu file, tetapi Anda dapat menautkan file yang berbeda untuk style sheet, Javascript, dan pekerjaan PHP.