Formulir kontak teladan untuk mengajukan pertanyaan. Formulir umpan balik dalam PHP dengan pengiriman melalui email. Plugin untuk membuat formulir online “jFormer”

Mari kita lihat contoh form feedback yang mudah dan cepat untuk website yang ditulis dalam html dan php.

Mengapa formulirnya dalam html dan php?

Untuk CRM seperti Wordpress, Joomla, dan lainnya, Anda dapat menemukan berbagai plugin untuk memasang formulir umpan balik untuk situs tersebut. Namun, yang tidak saya sukai dari plugin tersebut adalah kinerjanya yang buruk dan memperlambat situs. Karena plugin ini masih menghasilkan kode html yang sama, saya sarankan menggunakan formulir yang sederhana namun berfungsi penuh, yang juga dapat dimodifikasi untuk mengakomodasi panggilan balik dari situs.

Formulir kontak dalam html cukup dimasukkan ke panel admin Joomla, OpenCart, dan jika situs Anda ditulis sendiri atau Anda menggunakan kerangka apa pun, maka menggunakan kode yang disajikan tidak akan sulit dan, yang paling penting, situs akan dimuat sebagai secepat sebelum memasukkan kode.

Struktur cara umpan balik diatur untuk situs

Agar semuanya berfungsi, saya akan memberi Anda strukturnya, apa yang diperlukan agar formulir kontak atau panggilan berfungsi?

Kode HTML dimasukkan ke dalam halaman + gaya css.
File php, yang mengirimkan surat.

Kode html berisi informasi tentang kolom input mana yang perlu ditampilkan dan keterangannya. Gaya CSS bertanggung jawab atas desain visual formulir itu sendiri dan tampilan data. Ketika Anda mengklik tombol kirim, file php dipanggil, yang mengirimkan surat ke email yang ditentukan. Mari kita lihat kode sumber formulir lebih detail nanti.

Kode formulir umpan balik HTML

Pertama, kami akan memberikan kode lengkap formulir umpan balik situs dalam HTML.

Bentuknya sendiri terletak di antara tag html

. Tag formulir itu sendiri

diberi kelas css class="form-zvonok" yang digunakan untuk mengatur tampilan formulir melalui gaya css.

Atribut formulir pelengkapan otomatis = "mati" - pelengkapan otomatis formulir dinonaktifkan. Atribut formulir adalah action="http://site.com/email.php" , yang menentukan alamat file yang dipanggil dan ke mana data formulir ditransfer setelah tombol "kirim" diklik.

Atribut method="post", dalam hal ini data yang dikirim disembunyikan dan tidak ditampilkan di bilah alamat, metode Get lainnya mengirimkan data formulir melalui bilah alamat. Mengingat perlunya optimasi SEO suatu situs, dalam hal formulir umpan balik untuk suatu situs, lebih baik mengirim data menggunakan metode Post, karena dalam kasus metode Get, situs tersebut pada dasarnya akan memiliki banyak halaman serupa yang tersedia. , yang hanya berbeda dalam beberapa parameter kecil.

Di dalam div ini terdapat div yang berisi tag Dan , dan di bagian paling akhir - tombol kirim, ketika Anda mengkliknya, data formulir dikirim.

Mengirim surat dengan script php

Berikut ini skrip sederhana untuk mengirim surat

Untuk mengirim surat ke email yang diperlukan, ganti nilai variabel $to [dilindungi email] ke alamat yang diperlukan. Variabel $subjek adalah subjek pesan, yang ditampilkan oleh program email saat melihat daftar surat. $message adalah isi surat itu sendiri, ini adalah pesan itu sendiri. $headers - header surat, ini menunjukkan jenis surat, misalnya html, juga pengkodean surat, dari siapa surat itu dikirim dan ke email mana tanggapannya akan dikirim.

Merancang formulir panggilan balik untuk situs web css

Berikut adalah kode desain CSS untuk formulir masukan situs.

Obratnuj-zvonok( lebar: 100%; lebar maksimal: 350px; ) .form-zvonok( lebar: 100%; tampilan: flex; arah fleksibel: kolom; padding: 0 20px; ukuran kotak: border-box; ) .form-zvonok div( padding: 15px 0; ) .bot-send-mail( ukuran kotak: kotak perbatasan; lebar: 100%; ) .form-zvonok label,.form-zvonok input( tampilan: blok; lebar : 100%; ukuran kotak: kotak perbatasan; ) .form-zvonok label( margin-bawah: 5px; font-weight: bold; ) .form-zvonok input( padding: 10px 15px; margin-top: 10px; ) Rentang label .form-zvonok( warna: merah; ) .form-zvonok .bot-send-mail( padding: 15px; margin-top: 10px; latar belakang: tidak ada; batas: tidak ada; transformasi teks: huruf besar; warna: # fff; berat font: tebal; warna latar: #009b97; batas warna: #fff )

Buat lebar div sama dengan lebar blok induk dan batasi lebar maksimal menjadi 350px, jika lebih lebar maka form html terlihat melebar:

Obratnuj-zvonok( lebar: 100%; lebar maksimal: 350px; )

Untuk mengatur bidang dan tombol kirim, kami membungkusnya dalam div, mengatur tampilan menjadi fleksibel dan mengatur arah tampilan ke kolom. Untuk kecantikan, tambahkan padding 20px di bagian atas dan bawah:

Bentuk-zvonok( lebar: 100%; tampilan: fleksibel; arah fleksibel: kolom; padding: 0 20px; ukuran kotak: kotak perbatasan; )

Bidang keterangan dan masukan dibungkus dalam div:

Nama *

Untuk div ini kami akan menetapkan padding:

Div bentuk-zvonok (padding: 15px 0; )

Atur lebar tombol kirim sama dengan lebar blok induk dan tetapkan ukuran kotak ke kotak perbatasan sehingga tidak melampaui blok induk:

Bot-kirim-mail( ukuran kotak: kotak perbatasan; lebar: 100%; )

Begitu juga untuk label dan kolom input:

Label form-zvonok,.form-zvonok input( tampilan: blok; lebar: 100%; ukuran kotak: kotak perbatasan; )

Kami menyesuaikan tampilan indah tanda tangan dan kolom masukan:

Label bentuk-zvonok( margin-bawah: 5px; font-weight: tebal; ) .form-zvonok input( padding: 10px 15px; margin-top: 10px; )

Membuat bintang menjadi merah:

Rentang label bentuk-zvonok (warna: merah; )

Kami membuat tombol kirim:

Formulir-zvonok .bot-send-mail( padding: 15px; margin-top: 10px; latar belakang: tidak ada; batas: tidak ada; transformasi teks: huruf besar; warna: #fff; berat font: tebal; warna latar: # 009b97; kursor: batas: 3 piksel #009b97 padat;

Saat Anda mengarahkan kursor ke tombol, atur perubahan warnanya:

Formulir-zvonok .bot-send-mail:hover( warna: #009b97; warna latar: #fff; )

Buat formulir umpan balik

Membuat formulir umpan balik di situs web

Dalam proses promosi website, selain mempelajari statistik pengunjung, informasi tentang website dari pengunjung itu sendiri sangatlah penting. Salah satu cara termudah untuk mendapatkan informasi tersebut adalah dengan menempatkan halaman di situs web dengan formulir umpan balik. Pengunjung meninggalkan pesan, dan pesan itu akan dikirim ke alamat email Anda atau alamat lain yang Anda tentukan. Dalam hal ini pengunjung tidak perlu menggunakan program email sendiri, bahkan tidak perlu memiliki email sendiri.

Contoh paling sederhana dari formulir ini ditunjukkan pada Gambar 1. (Ini adalah contoh yang benar-benar berfungsi, dan Anda dapat menggunakannya untuk mengirimi saya ucapan terima kasih.)

Gambar.1. Formulir umpan balik sederhana

Untuk menempatkan formulir umpan balik di situs web, Anda hanya memerlukan informasi dasar tentang HTML dan kemampuan untuk mengoperasikan dua perintah - Menyalin Dan Menyisipkan. Mari kita pertimbangkan urutan tindakan untuk membuat formulir umpan balik (Gbr. 1) pada halaman HTML situs.

1. Periksa apakah paket hosting Anda (kantor tempat situs Anda dihosting) mendukung PHP. Jika tidak, kemungkinan besar Anda harus membayar ekstra untuk beralih ke tarif lain yang mendukung PHP yang sama. Anda tidak perlu mencari arti dari singkatan ini, karena Anda tidak memerlukan pengetahuan tentang PHP.

2. Mari pilih halaman di mana kita ingin menempatkan formulir umpan balik dan tempelkan kode berikut ke tempat yang tepat:
Nama Anda:

Email Anda (untuk balasan):

Pesan Anda:

Seperti yang Anda lihat, seluruh formulir dibuat oleh tag

dengan atribut tindakan=mail.php(indikasi ke halaman situs tempat skrip untuk memproses data yang dimasukkan berada) dan metode=posting(metode pengiriman data ke server). Baris individual dibuat dengan tag dengan atribut yang sepenuhnya dapat dimengerti. Lokasi elemen formulir individual, teks, font, dll. Anda dapat mengubahnya sesuai dengan desain situs Anda. Di dalam tag dimensi area untuk memasukkan teks pesan diatur: jumlah baris dan kolom (rows="3" cols="25"). 3. Mari buat halaman baru mail.php, mirip dengan HTML biasa, tetapi dengan ekstensi .php. Kode halaman lengkap ditunjukkan pada Gambar 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Masukan</title> </head> <body> <?php if (isset($_POST["nama"])) ($nama = $_POST["nama"];) if (isset($_POST["email"])) ($email = $_POST["email"];) if (isset($_POST["kekacauan"])) ($kekacauan = $_POST["kekacauan"];)$ke = "pupkin@rambler.ru"; /*Masukkan alamat email Anda*/ $headers = "Jenis konten: teks/polos; charset=utf-8"; $subject = "Pesan dari situs Anda"; $message = "Nama pengirim: $nama \nAlamat email: $email \nPesan: $mess"; $kirim = surat($ke, $subjek, $pesan, $header); if ($kirim == "benar") { gema " Terima kasih telah mengirimkan pesan Anda! "; gema " <a href=index.html>Klik</a> untuk kembali ke halaman utama"; } kalau tidak { gema " Kesalahan. Pesan tidak terkirim!"; } ?> </body> </html> <h5>Gambar.2. Kode halaman pemrosesan formulir umpan balik</h5> Alamat link yang perlu Anda perhatikan disorot dengan warna merah: <ul><li>pupkin@rambler.ru - ganti alamat Pupkin dengan alamat email Anda, tempat pesan akan diterima dari pengunjung situs, serta dari spammer yang tak kenal lelah. Ngomong-ngomong, untuk melindunginya, apa yang disebut captcha sering kali dimasukkan ke dalam formulir. CAPTCHA- Tes Turing Publik yang Sepenuhnya Otomatis untuk membedakan Komputer dan Manusia - tes Turing publik yang sepenuhnya otomatis untuk membedakan antara komputer dan manusia). Biasanya ini adalah angka dan huruf yang sangat terdistorsi yang diminta Anda masukkan sebelum mengirim pesan. Kami akan berbicara tentang captcha di salah satu artikel berikut. Jika Anda ingin mengirim surat ke beberapa alamat, cukup cantumkan dengan dipisahkan koma.</li> <li>a href=index.html - alamat halaman utama (beranda) situs.</li> </ul>Halaman yang dibuat mail.php harus ditempatkan di direktori situs yang sama (direktori, folder) dimana halaman dengan formulir umpan balik berada. Periksa fungsionalitas formulir umpan balik. Jika semuanya dilakukan dengan hati-hati, maka setelah mengisi formulir dan menekan Kirim pesan Teks berikut akan muncul: " Terima kasih telah mengirimkan pesan Anda. untuk kembali ke halaman utama". Setelah ini, Anda akan menemukan di kotak surat Anda (atau kotak lain yang Anda tentukan saat membuat formulir umpan balik) pesan Anda sendiri untuk orang yang Anda cintai. <blockquote> Komentar: di beberapa situs hosting, formulir umpan balik yang baru (baru dipasang di situs) tidak langsung berfungsi, dan surat pertama tidak sampai sama sekali atau tiba dengan penundaan 1-2 hari. Mungkin, ada "penggilingan roda gigi" dan kemudian semuanya berfungsi dengan baik. Selain itu, surat dari beberapa situs hosting tidak sampai ke alamat tertentu, misalnya saya mengalami masalah dengan kotak surat saya di Rambler dan Mail.ru. Untuk mengatasi masalah ini, hubungi hoster Anda - mereka biasanya membantu. </blockquote> Terkadang saat menggunakan formulir umpan balik yang dijelaskan, masalah dengan pengkodean muncul. Jika dalam surat masuk, alih-alih alfabet Sirilik asli, teksnya terdiri dari "krakozyablov" atau kotak kosong, maka Anda harus memilih pengkodean secara manual, yang tentu saja merepotkan. Untuk mencegah hal ini terjadi, periksa apakah halaman Anda dengan formulir umpan balik telah dikodekan rangkaian karakter=utf-8. Jika Anda menggunakan program ini Adobe Dreamweaver, lalu untuk melakukan ini Anda perlu memilih bagian menu Sunting - Properti Halaman - Pengkodean. Masalah penyandian file situs dibahas lebih rinci di artikel Masalah penyandian dalam formulir umpan balik. Pada contoh yang dijelaskan, untuk mempermudah, pesan tentang pengiriman surat ditampilkan pada halaman kosong. Tentu saja, Anda dapat menempatkannya di halaman mana pun di situs Anda sehingga pengunjung dapat menggunakan navigasi (menu) untuk memilih apa yang harus dilakukan selanjutnya. Untuk melakukan ini, tempatkan kode PHP (yang letaknya<?php ke ?> ) ke lokasi yang diinginkan pada halaman menu dan ubah namanya menjadi mail.php. Selain memposting formulir umpan balik itu sendiri, disarankan untuk memeriksa apakah pengunjung telah mengisi kolomnya dengan benar. Hal ini harus dilakukan agar Anda tidak menerima surat kosong dan kotak surat Anda tidak tersumbat oleh sampah yang dikirim oleh orang iseng yang suka memencet tombol. Kirim pesan. Metode untuk memeriksa pengisian formulir umpan balik dan melindungi dari spam dijelaskan dalam artikel " Pada pelajaran ini kita akan belajar tentang fungsinya surat(), menggunakan contoh pembuatan Formulir umpan balik dalam PHP dilanjutkan dengan mengirimkan data yang diterima melalui email. Untuk melakukan ini, kita akan membuat dua file - format.php Dan mail.php. File pertama hanya akan berisi formulir dengan kolom untuk input pengguna. Di dalam tag membentuk- tombol "Mengirim" dan atribut tindakan yang mengacu pada pawang - mail.php, data dari formulir inilah yang diakses ketika tombol ditekan "Mengirim". Dalam contoh kita, data formulir dikirim ke halaman web bernama "/mail.php". Halaman ini berisi skrip untuk PHP yang memproses data formulir: <form action="./mail.php" method="post"> Data formulir dikirim menggunakan POS(diproses sebagai $_POST). $_POST adalah array variabel yang diteruskan ke skrip saat ini melalui metode POS. Di bawah ini Anda dapat melihat isi file format.php, bidang yang diisi oleh pengguna sendiri di beberapa situs web. Semua kolom entri data harus memiliki atribut nama, kami menentukan nilai-nilai itu sendiri, berdasarkan logika. <!DOCTYPE html> <html> <head> <title>Formulir umpan balik dalam PHP dikirim melalui email</title> </head> <body> <h2>Formulir umpan balik dalam PHP</h2>  <form action="./mail.php" method="post">  <fieldset>  <legend>Tinggalkan pesan:</legend> Nama Anda:  <input type="text" name="name">  E-mail: <input type="text" name="email"> Nomor telepon: <input type="text" name="phone"> Pesan:  Area teks dapat berisi karakter dalam jumlah tidak terbatas--> <textarea rows="10" cols="45" name="message">

Ini adalah tampilan visual formulir di browser.

Selanjutnya kita menulis kode untuk file tersebut mail.php. Kami membuat nama kami sendiri untuk variabel tersebut. DI DALAM PHP variabel dimulai dengan tanda $ diikuti dengan nama variabel. Nilai teks variabel diapit tanda kutip. Dengan menggunakan variabel, isi formulir dikirim ke email administrator hanya dengan menempatkan nama elemen formulir dalam tanda kurung siku - nilainya nama.
$ke = " [dilindungi email]"; // email penerima data dari form
$tema = "Formulir masukan dalam PHP"; // subjek email yang diterima
$message = "Nama Anda: ".$_POST["nama"]."
";//menetapkan variabel nilai yang diperoleh dari formulir nama=nama
$pesan .= "Email: ".$_POST["email"]."
"; //diperoleh dari form nama=email
$message .= "Nomor telepon: ".$_POST["telepon"]."
"; //diperoleh dari form nama=telepon
$pesan .= "Pesan: ".$_POST["pesan"]."
"; //diperoleh dari form nama=pesan
$headers = "Versi MIME: 1.0" . "\r\n"; // header cocok dengan format ditambah karakter baris baru
$headers .= "Jenis konten: teks/html; charset=utf-8" . "\r\n"; // menunjukkan jenis konten yang dikirim
surat($ke, $tema, $pesan, $header); //mengirimkan nilai variabel ke penerima melalui email
?>
Demikian data dari array $_POST akan diteruskan ke variabel yang sesuai dan dikirim melalui email menggunakan fungsi tersebut surat. Mari isi formulir kita dan klik tombol kirim. Jangan lupa sertakan email Anda. Surat itu tiba seketika.

Halo semuanya! Pada artikel ini Anda akan mempelajari cara membuat formulir umpan balik pop-up untuk situs html dan wordpress. Pertama-tama, formulir seperti itu akan diperlukan untuk toko online, halaman arahan, dan bahkan situs kartu nama sederhana, karena sangat nyaman bagi pengguna.

Misalnya, pengunjung datang ke situs web Anda, melihat informasi yang dia butuhkan, sepertinya siap memesan produk atau layanan Anda, namun dia tidak ingin menelepon kota lain dan menghabiskan banyak uang. Pada saat-saat seperti itulah formulir umpan balik pop-up datang untuk menyelamatkan.

Buat formulir umpan balik dalam html

Jadi, katakanlah Anda sudah memiliki situs web, dan Anda ingin membuat formulir yang, ketika diisi, akan memungkinkan pengguna menerima umpan balik dari Anda. Untuk melakukan ini, pertama-tama, bingkai itu sendiri dibuat.

Rekatkan kode berikut ke lokasi yang diinginkan di situs:

Aplikasi daring

Jika mau, Anda dapat menambahkan kolom tambahan untuk memasukkan informasi, atau menghapus kolom yang sudah ada. Saya sangat tidak menyarankan Anda menggunakan captcha atau perlindungan bot lainnya dalam formulir seperti itu, yang akan menyulitkan pengguna untuk mengisi formulir.

Kode dimasukkan, apa yang kita lihat?

Bentuknya sudah muncul, tapi perlu diberi bentuk. Untuk melakukannya, tambahkan gaya berikut:
/* Formulir masukan */ #inline ( margin-kiri:30px; lebar:80%; margin:0 otomatis; latar belakang:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767 ; lebar:190px; margin-bawah:10px; padding:5px 9px; tinggi garis:1.4em; lebar:617px batas:1px padat #ccc; :fokus ( gaya batas:solid; warna batas:#bababa; warna:#444; ) input.error, area teks.error ( warna batas:#973d3d; gaya batas:solid; latar belakang:#f0bebe; warna: #a35959; ) input.error:fokus, textarea.error:fokus ( warna batas:#973d3d; warna:#a35959; ) #kirim ( warna:#FFFFFF; tampilan:blok; kursor:penunjuk; padding:5px 11px; ukuran font:1.2em; batas:solid 1px; radius batas:2px lebar:210px; ) /* Formulir masukan */

Ini jauh lebih baik. Bagaimanapun, Anda perlu menyesuaikan formulir dengan keseluruhan desain situs, sehingga pada akhirnya milik Anda akan berbeda dari milik saya.

Ini terlihat seperti ini:

Apa yang terjadi? Pengunjung mengklik bidang tersebut, dan skrip memberinya masker siap pakai dengan kode negara. Cukup nyaman.

Untuk melakukan ini, Anda perlu menghubungkan skrip topeng. Anda dapat mendownloadnya di akhir artikel beserta kode sumbernya.

Kita sertakan scriptnya sebelum tag penutup. Jangan lupa untuk mengubah jalur ke file tersebut sesuai keinginan Anda. Oke, form feedback sudah dibuat, style sudah dikonfigurasi, sekarang Anda perlu melampirkan handler ke dalamnya agar notifikasi terkirim ke email Anda.

Untuk melakukannya, masukkan skrip berikut sebelum tag penutup:

Bagaimana cara kerja skrip ini?

Memeriksa email yang dimasukkan.

Menentukan bidang yang akan dikerjakan.

Periksa apakah bidang ini sudah selesai. Jika bidang wajib tidak ditentukan, sebuah pesan akan muncul yang menunjukkan bahwa bidang tersebut harus diisi.

Memproses informasi yang dimasukkan dan memulai pengiriman pemberitahuan melalui email.

Menampilkan pesan kepada pengguna bahwa permintaan mereka telah diterima menggunakan Ajax.

Hal terakhir yang harus dilakukan adalah membuat file sendmessage.php, masukkan kode php berikut ke dalamnya dan unggah ke root situs Anda.
Pesan baru\r\n"; $pesan .= "
Nama:".$nama pengguna."
\r\n"; $pesan .= "
Nomor telepon:".$telepon pengguna."
\r\n"; $pesan .= "
Surat:".$email pengguna."
\r\n"; $pesan .= "
Pesan:".$konten."
\r\n"; $pesan .= " "; // mengirim pesan if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>
Itu saja, formulir umpan balik sederhana untuk situs html sudah siap. Jangan lupa ubah email yang ada di file sendmessage.php menjadi milik Anda sendiri.

Menambahkan formulir umpan balik pop-up ke situs

Ada kalanya Anda memerlukan formulir pop-up yang terbuka saat Anda mengklik tombol. Ini sangat mudah dilakukan. Sebagai contoh, mari kita ambil formulir yang kita buat sebelumnya dan kerjakan dengannya.

Pertama, kita perlu menghubungkan jQury fancybox, yang dapat Anda unduh di akhir artikel.

Tambahkan baris ini sebelum tag body penutup, cukup ubah jalur ke file menjadi milik Anda.

Dan kami memberikannya gaya.
Modalbox ( warna:#FFFFFF; tampilan:blok; kursor:pointer; padding:10px 11px; ukuran font:1.2em; batas:solid 1px #F9F9F9; radius batas:2px; latar belakang:#70C6B9; lebar:210px; teks -dekorasi:tidak ada; perataan teks:tengah; margin:0 otomatis 20 piksel; .modalbox:hover ( latar belakang:#979797; )
Harap dicatat bahwa tombol tersebut, ketika diklik, akan menyebabkan jendela pop-up, harus diberi kelas modalbox dan jalur href=”#inline”. Tanpa ini, formulir pop-up tidak akan terbuka di situs.

Kemudian kita sembunyikan form yang kita buat tadi agar terbuka di jendela pop-up. Untuk melakukan ini, Anda perlu mengganti gaya #inline dari yang lama ke yang baru.
#inline ( tampilan:tidak ada; margin-kiri:30px; lebar:80%; margin:0 otomatis; latar belakang:#fff; padding:10px 20px; )
Hasilnya, kami mendapatkan tombol seperti ini.

Saat diklik, jendela pop-up dengan umpan balik akan terbuka.

Sekali lagi, gaya, tata letak bidang, dan elemen dapat diubah sesuai kebutuhan. Misalnya, untuk menelepon kembali dari situs, cukup menyisakan 2 bidang saja - nama dan nomor telepon, dan hapus bidang lainnya.

Jangan lupa bahwa agar formulir berfungsi, di akhir situs Anda perlu menambahkan handler yang dipublikasikan di atas dan mengunggah file ke root situs kirim pesan.php.

Formulir umpan balik untuk WordPress

Jika situs Anda berjalan di mesin WordPress, Anda dapat menggunakan plugin khusus untuk menambahkan formulir kontak. Salah satu plugin Contact Form 7 terbaik. Anda dapat mendownloadnya dari situs resminya, atau melalui panel admin di bagian Plugins.

Setelah mengaktifkan plugin, tab baru akan muncul di menu sebelah kiri. Buka dan klik Tambah Baru.

Masukkan nama formulir baru, pilih kolom yang seharusnya ada di formulir. Biasanya yang standar yang ditambahkan otomatis sudah cukup. Tetap bugar.

Setelah disimpan, kode pendek akan muncul di layar, yang perlu dimasukkan ke halaman tempat formulir kontak harus ditampilkan, misalnya di halaman Kontak.

Salin kode ini, buka halaman yang diinginkan, pilih format “Teks” di editor visual, tempel kode pendek ini dan simpan halaman.

Kemudian kami memeriksa apakah formulir tersebut ditampilkan di halaman dan apakah berfungsi dengan benar. Untuk melakukan ini, Anda hanya perlu membuka halaman tempat Anda memasukkan kode. Anda akan melihat formulir seperti ini:

Sekarang pengunjung situs Anda dapat menghubungi Anda melalui formulir kontak yang dibuat di mesin WordPress.

Membuat formulir umpan balik pop-up untuk WordPress

Saya sendiri tidak suka menambahkan plugin yang tidak perlu ke mesin ini, karena plugin tersebut memuat situs, sehingga memperlambat kerjanya. Oleh karena itu, untuk pop-up form saya biasanya menggunakan 2 pilihan.

Kami cukup melampirkan formulir pop-up yang dijelaskan di atas dalam artikel bukan ke situs html, tetapi ke mesin.

Formulir yang dibuat menggunakan plugin formulir pop-up Formulir Kontak 7 dengan sedikit modifikasi.

Cara pertama sudah dijelaskan di atas, jadi mari kita lanjutkan ke cara kedua.

Untuk memulai, tempelkan kode berikut tepat setelah tag body pembuka.

X

Mari kita cari tahu apa itu:

Tautan dengan id=”callme-open”, ketika diklik, formulir kita akan terbuka. Harap dicatat bahwa tautan ini tidak boleh disisipkan setelah tag terbuka, tetapi di tempat yang Anda inginkan untuk menempatkan tombol ini. Biasanya ditambahkan di pojok kanan header, di samping nomor telepon perusahaan Anda.

Blok bg-b akan membuat latar belakang situs menjadi gelap ketika formulir popup dibuka.

Blok callme akan berisi formulir umpan balik itu sendiri.

X – ini akan menjadi tanda silang kita di pojok formulir, ketika Anda mengkliknya formulir akan ditutup.

Nah, kode php yang akan digunakan untuk meluncurkan shortcode plugin Contact Form 7.

Harap dicatat bahwa id dan nama formulir Anda mungkin berbeda dari saya. Kode baru telah ditambahkan, sekarang kami memberikan gaya.
Bg-b ( posisi:mutlak; lebar:100%; tinggi:100%; kiri:0; atas:0; latar belakang:rgba(51,51,51,0.55); indeks-z:1000; ) badan ( posisi: relatif; .callme ( posisi:tetap; atas:30%; kiri:50%; lebar:300px; margin-kiri:-150px; z-index:1100; latar belakang:#fff; padding:20px 20px 10px; batas- radius :4px; ) .callme kecil ( posisi:mutlak; kanan:10px; atas:10px; ukuran font:15px; kursor:penunjuk; )
Simpan kode dan periksa. Formulir sekarang harus diposisikan di tengah layar Anda, dengan latar belakang gelap transparan di belakangnya. Semuanya baik-baik saja, tetapi hal terakhir yang perlu ditambahkan adalah skrip yang akan membuka dan menyembunyikan formulir ini ketika Anda mengklik tombol yang diperlukan.

Script ini harus disisipkan pada file footer, sebelum tag body penutup.

Sentuhan terakhir masih ada dan formulir pop-up di WordPress akan siap. Tambahkan gaya display:none ke kelas .callme dan .bg-b. Hal ini diperlukan agar form tidak muncul di layar saat situs diluncurkan.

Kami telah berdiskusi dengan Anda beberapa opsi untuk membuat formulir panggilan balik. Saya harap Anda tidak mengalami masalah dalam menerapkan formulir di situs Anda. Jika Anda memiliki masalah atau pertanyaan, Anda selalu bisa mendapatkan saran di komentar.

PEMBARUAN 06/06/2018

Di WordPress versi terbaru skrip jQuery tidak berfungsi dengan simbol $ jadi ini harus diperhitungkan dan ganti $ dengan jQuery

Seringkali ada masalah di mana formulir end-to-end di situs web berhenti terkirim di halaman internal. Untuk mencegah hal ini terjadi, tentukan let lengkap di file sendmessage.php di handler. Misalnya seperti ini:
Url: "http://site.ru/sendmessage.php"
Dan Anda dapat mengunduh sumber dari dua formulir pertama

PEMBARUAN 07/04/2018

Karena banyaknya permintaan, formulir umpan balik telah dimodernisasi. Sekarang ini memperhitungkan kotak centang persetujuan untuk mengirim data sesuai dengan undang-undang Federasi Rusia No. 152-FZ “Tentang Data Pribadi”, kemampuan beradaptasi terhadap resolusi layar apa pun telah ditingkatkan, file js dan css telah dikompresi.

Anda sekarang dapat melihat contohnya, serta mengunduh sumber formulir umpan balik yang diperbarui dan formulir pop-up secara online, menggunakan tautan.

Tahukah Anda bahwa hingga 80% pengguna meninggalkan situs web Anda tanpa mengisi aplikasi karena formulir umpan balik di situs web Anda jauh dari ideal? Atau apakah Anda yakin formulir aplikasi Anda sudah sempurna dan memiliki konversi maksimal?
Semakin banyak klien baru kami yang datang ke studio kami, ketika mendiskusikan pembuatan dan promosi situs web, bertanya-tanya tentang konversi. Ini adalah pertanyaan yang benar-benar tepat jika menyangkut pemasaran Internet, karena jika situs tersebut tidak mendatangkan klien, maka tidak ada gunanya menginvestasikan waktu dan uang di dalamnya. Pada blog hari ini kita akan membahas tentang salah satu faktor yang sangat mempengaruhi jumlah pelanggan dari website suatu perusahaan. Faktor ini adalah bentuk umpan balik, atau disebut juga dengan “bentuk tangkapan”. Apa bentuk umpan balik yang ideal?
Mari kita segera perhatikan bahwa tergantung pada segmen bisnisnya, bentuk ini mungkin berbeda, karena setiap bisnis memiliki tugas dan format interaksinya sendiri dengan klien. Ini adalah formulir yang “berkomunikasi” dengan klien sementara manajer Anda menelepon kontak lain dan menunggu lamaran baru.
Formulir umpan balik di situs web itu penting. Anda mengarahkan pembeli untuk melakukan pembelian atau memesan layanan secara diam-diam dan hati-hati. Anda menggunakan semua yang Anda bisa, mulai dari antarmuka yang ramah pengguna hingga kondisi penjualan yang sangat baik. Tapi ketika klien sampai ke formulir pemesanan, dia pergi. Semua pekerjaan sia-sia. Kecil kemungkinannya dia akan kembali padamu lagi. Hal ini dapat dihindari hanya dengan mengubah formulir umpan balik.
Mengapa Anda memerlukan formulir umpan balik?
Tidak hanya untuk melakukan pemesanan/pembelian. Dengan menggunakan formulir umpan balik, Anda mengetahui dari pengguna apa yang mereka suka/tidak suka, masalah apa yang ada dalam pekerjaan perusahaan, dan bahkan mendapatkan tip siap pakai untuk memperbaikinya. Percakapan dengan pengguna adalah:
a) meningkatkan loyalitas terhadap perusahaan Anda;
b) kemampuan untuk merespons permintaan dengan cepat, mengurangi hal-hal negatif dan mempertahankan klien;
c) peluang untuk meningkatkan suatu produk atau layanan;
d) cara untuk meningkatkan penjualan.
Kesalahan utama yang dilakukan pemilik situs web yang tidak berpengalaman adalah formulir umpan balik yang kelebihan beban. Pengguna terintimidasi oleh banyaknya kolom yang harus diisi untuk mengajukan permintaan ke perusahaan Anda. Mereka tidak ingin memberikan informasi yang tidak perlu tentang diri mereka, meskipun Anda menjanjikan kerahasiaannya. Kami telah mengumpulkan untuk Anda beberapa aturan untuk menciptakan bentuk yang sempurna.
Aturan #1. Sederhanakan formulir sebanyak mungkin
Manakah dari formulir berikut yang kemungkinan besar akan Anda isi?
Atau seperti ini
Tinggalkan hanya bidang yang paling penting. Pengunjung sebagian besar situs tidak suka mengisi banyak kolom
Jika aturan penyederhanaan formulir diikuti, Anda dapat mengharapkan peningkatan konversi sebesar 30–60%.
Nasihat. Hapus semua yang tidak perlu, sisakan 2-3 kolom atau bahkan 1. Biasanya ini adalah “Nama”, “nomor telepon atau email”. Jika Anda memiliki toko online dan Anda membuat formulir pemesanan, maka akan ada beberapa kolom lagi: “Nama”, “Nomor telepon atau E-mail”, “Opsi pengiriman”, “Jumlah barang”, “Alamat” . Lihatlah tujuan Anda membuat formulir umpan balik, dan sederhanakan sebisa mungkin.
Aturan #2. Bentuknya harus terlihat
Umpan balik atau formulir aplikasi dari situs harus terlihat, jika tidak, pengunjung mungkin tidak menyadarinya dan tidak mengisinya. Anda bahkan dapat menambahkan beberapa jenis elemen animasi untuk menambah penekanan.
Aturan #3. Minimum “bidang yang wajib diisi”
Satu bidang wajib diisi - telepon
Seringkali di situs web perusahaan Anda tidak hanya dapat melihat formulir yang dipenuhi dengan bidang yang tidak perlu, tetapi juga persyaratan wajib untuk mengisi bidang ini. Kata-kata “bidang wajib” ada di 99% situs. Ingin meningkatkan konversi Anda? Hapus penyelesaian wajib semua bidang kecuali nomor telepon. Jika seseorang mau, dia sendiri yang akan mengisi kolom-kolom yang dianggap perlu, tetapi kolom utamanya adalah nomor telepon, yang memungkinkan dia menelepon kembali klien dan mengklarifikasi semua informasi lainnya. Hal utama yang perlu diingat adalah membuat skrip yang tepat untuk manajer.
Dalam kasus apa konversi dari formulir turun:
Tingkat konversi turun sebesar 3% jika Anda meminta untuk mengisi kolom usia

Tingkat konversi turun 10% jika Anda perlu memasukkan nama lengkap Anda

Tingkat konversi turun 2%, jika Anda tertarik dengan lokasi tinggal pengunjung

Tingkat konversi turun 4% jika Anda perlu mengisi alamat tempat tinggal Anda

Jika kolom tentang pengiriman, alamat dan nama lengkap ada di toko online, maka pengguna tentu saja mengisinya dan ini tidak mempengaruhi konversi. Namun jika Anda ingin dia mengisi data untuk mengirimkan lamaran kepada Anda, maka konversinya pasti akan turun.
Aturan #4. Tautan dalam formulir (ketentuan aplikasi)
Jika Anda perlu mengirim pengunjung untuk membaca ketentuan kontak, pemrosesan aplikasi, pesanan, dll., maka buatlah tautan ini langsung di blok formulir. Saat Anda mengklik tautan tersebut, lebih baik menampilkan jendela pop-up dengan informasi yang dapat dengan mudah ditutup dan melanjutkan mengisi formulir.
Contoh formulir ini:
Cobalah untuk meminimalkan jumlah teks dan kondisi dalam formulir, karena pengguna akan terlalu malas untuk membaca ulang semuanya dan dia akan menutup formulir tanpa mengirimkan datanya kepada Anda. Ada juga kesalahan dalam formulir ini - terlalu banyak bidang yang wajib diisi.
Aturan #5. Persetujuan untuk pemrosesan data
Meskipun data pada formulir mungkin tidak diisi dengan benar dan mungkin bukan bersifat data pribadi, namun kotak centang ini harus dicentang. Telah terdapat gugatan hukum dimana terdakwa harus membayar denda karena tidak mematuhi persyaratan Undang-undang ini.
Aturan #6. Seharusnya tidak ada daftar drop-down
Jika formulir Anda adalah kalkulator, maka daftar drop-down dapat diterima. Namun jika Anda memaksa seseorang untuk memilih departemen mana di perusahaan Anda yang ingin dia hubungi, hal ini akan mengurangi konversi, karena pengguna ingin segera mengisi formulir tanpa memikirkan informasi yang tidak perlu.
Aturan #7. Hapus captcha dari formulir
Memasukkan captcha dapat mengurangi konversi hingga 40%. Hal ini disebabkan seringkali captcha tidak terbaca sama sekali, atau saat memasukkan data dilaporkan bahwa karakter yang dimasukkan salah. Jika sebelumnya captcha dibenarkan karena tanpanya banyak spam yang bisa datang, namun kini ada teknologi yang melindungi form dari entri data oleh robot spam meski tanpa memasukkan captcha.
Di studio artcell kami menggunakan teknologi ini. Seperti yang Anda lihat, tidak ada captcha di formulir kami dan kami tidak menerima SPAM.
Aturan #8. Pemberitahuan otomatis bahwa formulir telah dikirimkan
Setelah formulir diisi dan dikirim, akan muncul pesan yang menyatakan bahwa data telah terkirim dan pengelola akan segera menghubungi Anda kembali. Jika tidak ada pemberitahuan seperti itu, maka pengguna tidak mengerti apakah data sudah terkirim atau belum, apakah ia harus mengharapkan panggilan dari perusahaan atau tidak. Pemberitahuan ini akan menyelamatkan Anda dari duplikasi aplikasi dari pengguna yang sama.
Aturan #9. Pemberitahuan melalui SMS
Kirim pemberitahuan otomatis ke nomor pengunjung jika formulir Anda memiliki kolom telepon. Ini akan memungkinkan Anda mempersonalisasi pesan Anda, dan pengguna akan sekali lagi diingatkan tentang nama perusahaan Anda.
Jadi apa bentuk umpan balik yang ideal?
Itu disorot dalam bingkai atau warna, yang membuatnya lebih terlihat dengan latar belakang informasi lain di situs
Bidang minimum yang harus diisi
Satu atau dua bidang wajib diisi
Tidak ada bidang dengan daftar dropdown
Ketersediaan kotak centang untuk persetujuan pemrosesan data yang diterima
Ketersediaan link dan ketentuan tambahan segera dalam bentuk tanpa transisi yang tidak perlu ke halaman lain situs
Tidak ada captcha
Apakah Anda memiliki formulir lamaran yang sempurna, tetapi masih memiliki sedikit klien? Baca blog ini di majalah kami dan Anda akan menemukan jawaban atas pertanyaan Anda. Jika situs Anda kurang dipromosikan di mesin pencari, informasi ini akan berguna bagi Anda.
Jika Anda tidak dapat menyempurnakan formulir kontak dan ingin meminta bantuan profesional, isi aplikasi di bawah ini dan manajer kami akan menghubungi Anda kembali sesegera mungkin.