Formulir Umpan Balik HTML

Ini adalah salah satu cara pengunjung situs berinteraksi dengan manajer atau pemilik sumber daya.

Dengan formulir ini, Anda dapat mengumpulkan informasi awal tentang keinginan pengunjung untuk memesan layanan atau produk tertentu. Dapat digunakan untuk mengumpulkan testimoni, ide, berbagai saran, dan informasi lainnya.

Algoritma langkah-langkah membuat formulir umpan balik untuk situs: 

  1. Kode HTML - kerangka formulir;
  2. PHP handler - menerima dan memproses data di sisi server;
  3. Gaya CSS - untuk mendesain tampilan;
  4. Fungsi AJAX - Mengirim data ke handler tanpa memuat ulang halaman.

Struktur HTML

<div class="main-content">
	<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
		< div class = "form-zvonok" > 
			<div>
				<label>Nama<span>*</span></label>
				< input type = 'text' name = 'username' required >< /div >
			<div>
				<label>Nomor telepon(dengan kode)<span>*</span></label>
				<input type='text' name='usernumber' required></div>
			<div>
				<label>Pesan</label>
				<input type='text' name='question'>
			</div>
			< input class = "bot-send-mail" type = 'submit' value = 'Kirim permintaan'>
		</div>

Struktur HTML merupakan kerangka formulir umpan balik yang berisi field input, menunjukkan mana yang wajib diisi, dan labelnya. 
CSS bertanggung jawab untuk tampilan formulir dan penyajian data.

Formulir itu sendiri berada di antara tag <form></form>. 
Class diberikan ke tag untuk kemudahan pemanggilan saat mengimplementasikan tampilan melalui CSS.
Tag <form> memiliki dua atribut wajib: 

  • action - tautan ke script, biasanya PHP, yang akan memproses data yang dimasukkan ke formulir.
  • method - metode pengiriman data ke server (GET atau POST).

Atribut autocomplete="off" - mengontrol pengisian otomatis formulir, yang saat masuk kembali ke halaman akan menyimpan/mengosongkan semua data yang dimasukkan.

PHP Handler

Contoh script sederhana

$to="email@tut.by"; $subject="Judul pesan"; $message = "Nama Anda: ".$_POST['name']." < br > "; $message .= "Nomor telepon: ".$_POST['phone']."<br>"; $message .= "Pesan: ".$_POST['message']."<br>"; $headers="Content-type: text/plain; charset=utf-8 \r\n"; mail($to,$subject,$message,$headers); ?>

$to email@tut.by - menentukan kotak email tujuan pengiriman pesan.
$subject - judul pesan, ditampilkan oleh layanan email saat melihat daftar pesan. 
$message - mengumpulkan data yang dimasukkan dan menuliskannya ke variabel. 
$headers - header email, menentukan jenis email, pengkodean, pengirim, dan email balasan.

Desain Menggunakan CSS

Gaya CSS untuk mendesain formulir umpan balik

.obratnuj-zvonok{
	width:100%;
	max-width:350px;
}
.form-zvonok{
	width:100%;
	display:flex;
	flex-direction:column;
	padding:0 20px;
	box-sizing:border-box;
}
.form-zvonok div{
	padding:15px 0;
}
.bot-send-mail{
	box-sizing:border-box;
	width:100%;
}
.form-zvonok label,.form-zvonok input{
display:block;
width:100%;
box-sizing:border-box;
}
.form-zvonok label{
	margin-bottom:5px;
	font-weight:bold;
}
.form-zvonok input{
	padding:10px 15px;
	margin-top:10px;
}
.form-zvonok label span{
	color:red;
}
.form-zvonok .bot-send-mail{
	padding:15px;
	margin-top:10px;
background:none;
border:none;
text-transform:uppercase;
color:#fff;
	font-weight:bold;
	background-color:#009b97;
	cursor:pointer;
	border:3px #009b97 solid;
	border-radius:5px;
}
.form-zvonok .bot-send-mail:hover{
	color:#009b97;
	background-color:#fff;
}

Tampilan formulir setelah menerapkan gaya

Elemen-elemen penting formulir umpan balik telah diberi class, yang digunakan CSS untuk menetapkan gaya. 

Ajax

Teknologi Ajax membantu meningkatkan kinerja situs Anda. Ini terjadi karena pengguna tidak memuat ulang seluruh halaman ketika hanya perlu memperbarui beberapa elemen/bagian situs Anda.

Kombinasi paling sederhana adalah PHP + Ajax. Untuk mengirim formulir tanpa memuat ulang, Anda juga memerlukan:
Permintaan Ajax - fungsi JavaScript yang digunakan untuk mengirim data secara asinkron ke handler
JQuery - library untuk bekerja dengan JavaScript.

Contoh formulir umpan balik siap pakai.

dari sederhana hingga menakjubkan

Formulir untuk mereka yang ingin menulis sendiri tetapi tidak tahu harus mulai dari mana, berikut contoh yang hampir siap tanpa hal yang tidak perlu.

HTML: 

 <form method="POST" id="feedback-form">
    <input type="text" name="nameFF" required placeholder="Nama" x-autocompletetype="name">
    <input type="email" name="contactFF" required placeholder="E-mail" x-autocompletetype="email">
    <textarea name="messageFF" required rows="5"></textarea>
    <input type="submit" value="kirim">
  </form>
CSS:

form {
	width:300px;
}
form input, form textarea {
	width:100%;
}

Formulir umpan balik dengan efek animasi field

Untuk tampilan teks yang benar, tempatkan kode berikut di antara tag <head>.

 <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700">
HTML:

<div id="w">
    <h1>Tulis surat !</h1>
    <form id="contactform" name="contact" method="post" action="#">
      <p class="note"><span class="req">*</span> Field bertanda bintang wajib diisi</p>
      <div class="row">
        <label for="name">Nama Anda <span class="req">*</span></label>
        <input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Steve Jobs" required>
      </div>
	  
      <div class="row">
        <label for="email">Alamat E-mail <span class="req">*</span></label>
        <input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@mail.ru" required>
      </div>
      
      <div class="row">
        <label for="subject">Subjek <span class="req">*</span></label>
        <input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Subjek surat" required>
      </div>
      
      <div class="row">
        <label for="message">Pesan <span class="req">*</span></label>
        <textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>
      </div>
      
      <div class="center">
        <input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Kirim Pesan">
      </div>
    </form>
  </div>
CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  outline:none;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
html{ height:101%; }
body{ 
  font-family:'Oxygen', Arial, Helvetica, sans-serif; 
  font-size:62.5%; 
  line-height:1; 
  padding-bottom:85px;
  background:#b1eeee;
}

::selection{ background:#d2bef5; }
::-moz-selection{ background:#d2bef5; }
::-webkit-selection{ background:#d2bef5; }

br{display:block; line-height:2.2em;} 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ol, ul{list-style:none;}

blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:“ ”; content:none;}
strong{font-weight:bold;} 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 {
  font-family: 'Skranji', 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 3.75em;
  line-height: 1.7em;
  margin-bottom: 7px;
  color: #5b5463;
  text-shadow: 0 2px white, 1px 3px #666; 
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #bbb;
} /* positioning */
#w { 
  display: block;
  width: 660px;
  margin: 0 auto;
  margin-top: 25px;
  padding: 35px 15px;
  background: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  -moz-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
}



/* form styles */
form .row { 
  display: block;
  padding: 7px 8px;
  margin-bottom: 7px;
}
form .row:hover {
  background: #f1f7fa;
}

form label {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  width: 120px;
  padding: 6px 0;
  color: #464646;
  vertical-align: top;
}
form .req { color: #ca5354; }

form .note { 
  font-size: 1.2em;
  line-height: 1.33em;
  font-weight: normal;
  padding: 2px 7px;
  margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles*/
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; }           /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; }          /* Mozilla Firefox 19+ */ 
:-ms-input-placeholder { color: #aaafbd; font-style: italic; }      /* Internet Explorer 10+ */

form .txt {
  display: inline-block;
  padding: 8px 9px;
  padding-right: 30px;
  width: 240px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txtarea {
  display: inline-block;
  padding: 8px 11px;
  padding-right: 30px;
  width: 320px;
  height: 120px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% 4%;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txt:focus, form .txtarea:focus {
  width: 300px;
  color: #545454;
  background-color: #fff;
  background-position: 110% center;
  background-repeat: no-repeat;
  border-color: #059;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
}
form .txtarea:focus { 
  width: 375px; 
  background-position: 110% 4%;
}

form .txt:valid {
  background-color: #deecda;
  background-position: 98% center;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txtarea:valid {
  background-color: #deecda;
  background-position: 98% 4%;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txt:focus:valid, form .txtarea:focus:valid {
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);  
}

form .center {
  margin-top: 25px;
  text-align: center;
}

#submitbtn{
height:70px;
width:275px;
padding:0;
cursor:pointer;
font-family:'Oxygen', Arial, sans-serif;
font-size:2.0em;
color:#0a528f;
text-shadow:1px 1px 0 rgba(255,255,255,0.65);
border-width:1px;
border-style:solid;
border-color:#317bd6 #3784e3 #2d74d5 #3774e3;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background-color:#4581e5;
background-image:-webkit-gradient(linear,left top,left bottom,from(#6faefd),to(#4581e5));
background-image:-webkit-linear-gradient(top,#6faefd,#4581e5);
background-image:-moz-linear-gradient(top,#6faefd,#4581e5);
background-image:-ms-linear-gradient(top,#6faefd,#4581e5);
background-image:-o-linear-gradient(top,#6faefd,#4581e5);
background-image:linear-gradient(top,#6faefd,#4581e5);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
transition:all 0.3s linear;
}
#submitbtn:hover, #submitbtn:focus{
 -webkit-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
}

#submitbtn:active {
  -webkit-box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
}

Menggunakan Kode HTML Formulir dari QForm

Layanan QForm menyediakan kemampuan untuk melihat kode HTML formulir umpan balik yang dibuat menggunakan konstruktor. Dengan menggunakannya, kita akan mendapatkan kerangka yang kurang menarik, tanpa gaya dan koneksi ke backend layanan. Konstruktor menghasilkan kode formulir terstruktur yang indah, yang dapat Anda hubungkan sendiri ke handler, desain tampilannya dengan CSS, dan mendapatkan formulir umpan balik yang berfungsi. 

Membuat Formulir dengan Pengiriman Data Asinkron (tanpa reload halaman) melalui AJax dan JQuery

Pertama-tama perlu membuat formulir

Beralih ke mode "Konstruktor" tambahkan field yang diperlukan.

Buka tab HTML, salin kode yang dihasilkan dan tempelkan di editor kode.

Setelah menempelkan kode, formulir yang dibuat akan terlihat seperti ini.

Pertama-tama hubungkan JQuery - tempelkan baris ini di akhir sebelum tag penutup </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Susun Java-Script. Dapat ditambahkan bersama kode HTML di atas atau dimuat sebagai file terpisah tanpa baris pertama atau baris terpisah.

Sekarang hubungkan script PHP khusus yang akan bertanggung jawab untuk memproses data yang dimasukkan pengguna. Ini akan menentukan apa, ke mana dan dalam bentuk apa mengirim, setelah tombol pengiriman pesan ditekan. Buat file terpisah feedback_form.php.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //pengecekan asinkron
{
    if (isset($_POST["name_2"]) && isset($_POST["email"]) ) 
    { 
    if ($_POST['name_2'] == '') 
    {
        echo 'Field Nama tidak diisi';
        return; //memeriksa field wajib
    }
    if ($_POST['email'] == '') 
    {
        echo 'Field E-mail tidak diisi';
        return;
    } 
    $name = $_POST['name_2'];
    $email = $_POST['email'];
 mail ("your@email", "Permintaan dari situs", "Nama:" .$name. "E-mail:" .$email, "From: your@email \r\n");  // mengumpulkan informasi dan mengirim ke alamat email yang ditentukan. jangan lupa ganti kedua alamat
        echo 'Permintaan terkirim!';
        return; //kembalikan pesan ke pengguna
    }
    }
?>

Hasilnya akan berupa formulir JQuery tanpa reload halaman. Setelah mengisi semua field dan mengirim, permintaan akan dikirim ke email yang ditentukan. Tinggal mendesainnya dengan CSS.

Konfigurasi dan Instalasi Formulir Umpan Balik

Kami akan menjelaskan instalasi dan konfigurasi salah satu formulir di atas (kode HTML dan CSS sudah diberikan di atas, jadi tidak akan dijelaskan lagi).

Pasang formulir di lokasi yang diinginkan di situs.
Dalam struktur HTML, elemen diberi class dan ID untuk dioperasikan.
Tag <label> memiliki tag <span class="req">*</span> - ini berarti field wajib diisi (jika perlu, Anda dapat menghapus kriteria ini).

Hubungkan JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Dalam tag <form> tambahkan atribut:
autocomplete="off" - menonaktifkan autocomplete dan saat masuk kembali ke halaman semua field input akan dikosongkan
onsubmit="call()" - memanggil event JavaScript
Susun Javascript

<script type="text/javascript">
    function call() {
      var msg   = $('#contactform').serialize();
       $.ajax({
         type: 'POST',
         url: 'feedback_form.php', //akses handler
         data: msg,
        success: function(data) {  //jika berhasil, tampilkan hasil di div "results"
            $('#contactform').remove(); //sembunyikan formulir setelah pengiriman 
            $('#results').html(data); //tampilkan pesan sukses sebagai gantinya 
         },
         error:  function(xhr, str){ //error menampilkan pesan yang sesuai 
        alert('Terjadi kesalahan: ' + xhr.responseCode);
         }
       });
   }
</script>

Selanjutnya buat file terpisah bernama "feedback_form" - akan bertanggung jawab untuk mengirim dan memproses email.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //pengecekan asinkron
{
    if (isset($_POST["name"]) && isset($_POST["email"]) ) 
    { 
    if ($_POST['name'] == '') 
    {
        echo 'Field Nama tidak diisi';
        return; //memeriksa field wajib
    }
    if ($_POST['email'] == '') 
    {
        echo 'Field E-mail tidak diisi';
        return;
    }
    $name = $_POST['name'];
    $email = $_POST['email'];
mail("redline2307@yandex.ru", "Permintaan dari situs", "Nama: ".$name. "\nE-mail: ".$email ,"From: redline2307@yandex.ru \r\n"); //di sini kita mengirim permintaan ke email. Jangan lupa ganti kedua alamat
        echo 'Permintaan terkirim!';
        return; //kembalikan pesan ke pengguna
    }
    }
?>

Setelah mengirim pesan, permintaan akan masuk ke email sesuai dengan persyaratan yang ditetapkan.

Tautan ke artikel detail tentang pembuatan formulir manual

Menggunakan metode penulisan kode manual hanya untuk membuat formulir umpan balik tidak sepenuhnya tepat. Membuat kerangka, mendesainnya dan menghubungkan handler bukanlah semua yang perlu dilakukan. Jika Anda menginginkan formulir yang keren dan indah, Anda juga akan membutuhkan:

  • Pengiriman asinkron (pengiriman tanpa reload halaman), untuk mengurangi beban server dan tidak membingungkan pengguna dengan reload halaman atau redirect yang tidak perlu;
  • Konfigurasi penyembunyian formulir yang dikirim;
  • Menampilkan pesan sukses/gagal;
  • Pemeriksaan validasi field, mask field;
  • Integrasi dengan CRM;
  • Pengiriman pencapaian tujuan ke metrik dan konfigurasi CAPTCHA.

Tetapi semua ini dapat dilakukan di konstruktor formulir kami hanya dengan beberapa klik. Dengan antarmuka yang intuitif, Anda dapat membuat hampir semua jenis formulir. 

Menggunakan layanan akan memberi Anda berbagai kemungkinan. Yaitu:

  • Konstruktor field dengan fungsi drag-n-drop;
  • Pengaturan desain;
  • Pembuatan grup dan distribusi hak akses;
  • Widget video;
  • CSS kustom;
  • Notifikasi ke email dan messenger;
  • CRM internal;
  • Integrasi eksternal;
  • Penggunaan CAPTCHA.

Kami akan menjelaskan proses pembuatan formulir umpan balik di QForm dan pemasangannya di situs.

Pemasangan Formulir QForm ke Situs

Tambahkan situs
Buat formulir
Tambahkan field dengan drag-and-drop atau klik ikon "+"
Pilih jenis tata letak dan pengaturan tampilan
Salin DIV untuk pemasangan formulir dan script untuk memanggilnya
Tempelkan kode DIV di lokasi situs tempat formulir harus dibuat
Tempelkan script di bagian <head>
Apakah Anda menyukai artikelnya? Bagikan!!