Halo semua! Pada artikel ini, Anda akan belajar cara membuat formulir popup. masukan untuk situs html dan wordpress. Pertama-tama, formulir seperti itu akan diperlukan untuk toko online, halaman arahan, dan situs kartu nama sederhana, karena sangat nyaman bagi pengguna.

Misalnya, seorang pengunjung datang ke situs Anda, melihat-lihat informasi yang dia butuhkan, tampaknya siap untuk memesan produk atau layanan Anda, tetapi 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 kontak html

Jadi, katakanlah Anda sudah memiliki situs web, dan Anda ingin membuat formulir, saat mengisinya, pengguna akan bisa mendapatkan umpan balik dari Anda. Untuk melakukan ini, pertama-tama, bingkai itu sendiri dibuat.

Tempel kode berikut di tempat yang tepat di situs:

Aplikasi online

Secara opsional, Anda dapat menambahkan bidang tambahan untuk memasukkan informasi, atau menghapus yang sudah ada. Saya sangat menyarankan agar Anda tidak menggunakan captcha atau perlindungan lain terhadap bot dalam formulir tersebut, yang akan mempersulit pengguna untuk mengisi formulir.

Kode dimasukkan, apa yang kita lihat?

Formulir telah muncul, tetapi perlu untuk melihatnya. Untuk melakukannya, tambahkan gaya berikut:

/* Formulir kontak */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767 ; lebar:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; ukuran font:15px!important; line-height:1.4em; ) .txtarea ( display:inline-block; color: # 676767; lebar:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; ) .txt:focus, . txtarea:focus ( border-style:solid; border-color:#bababa; color:#444; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color :#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px ; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; ) #send:hover ( background:#9797 97; ) /* Formulir umpan balik */

Sudah jauh lebih baik. Bagaimanapun, Anda perlu menyesuaikan formulir agar sesuai desain keseluruhan situs, sehingga Anda akan berakhir berbeda dari saya.

Ini terlihat seperti ini:

Apa yang terjadi? Pengunjung mengklik bidang, dan skrip mengganti topeng yang sudah jadi untuknya, dengan kode negara. Cukup nyaman.

Untuk melakukan ini, Anda perlu menghubungkan skrip topeng. Anda dapat mengunduhnya di bagian paling akhir artikel bersama dengan kode sumbernya.

Kami menghubungkan skrip sebelum tag penutup. Jangan lupa untuk mengubah jalur file menjadi milik Anda. Oke, formulir umpan balik telah dibuat, gaya sudah diatur, sekarang Anda perlu meletakkan handler di atasnya agar notifikasi masuk ke email Anda.

Untuk melakukannya, masukkan skrip berikut sebelum tag penutup:

Bagaimana cara kerja skrip ini?

1. Melakukan validasi email yang dimasukkan.
2. Menentukan bidang untuk bekerja dengan.
3. Memvalidasi bidang ini untuk diselesaikan. Jika bidang yang diperlukan tidak ditentukan, ini akan menampilkan pesan yang menyatakan bahwa bidang tersebut harus diisi.
4. Memproses informasi yang dimasukkan dan memulai pengiriman pemberitahuan ke surat.
5. Memberikan pesan kepada pengguna bahwa permintaan mereka telah diterima menggunakan Ajax.

Hal terakhir yang harus dilakukan adalah membuat file sendmessage.php dan menempelkan yang berikut ke dalamnya kode php dan unggah ke root situs Anda.

Pesan baru\r\n"; $msg .= "

Nama:".$nama pengguna."

\r\n"; $pesan .= "

Nomor telepon:".$ponsel pengguna."

\r\n"; $pesan .= "

Surat:".$mail pengguna."

\r\n"; $pesan .= "

Pesan:".$konten."

\r\n"; $msg .= " "; // kirim 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 saja email di file sendmessage.php menjadi milik Anda.

Menambahkan formulir umpan balik pop-up ke situs

Ada kalanya Anda membutuhkan formulir pop-up yang terbuka saat Anda mengklik tombol. Sangat mudah untuk membuatnya. Sebagai contoh, mari kita ambil formulir yang kita buat sebelumnya dan bekerja dengannya.

Pertama-tama kita perlu menghubungkan fancybox jqury, yang dapat Anda unduh di akhir artikel.

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

Dan kami memberikannya gaya.

Modalbox ( color:#FFFFFF; tampilan: blok; kursor: penunjuk; padding:10px 11px; ukuran font:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; lebar:210px; teks -decoration:none; text-align:center; margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Harap dicatat bahwa tombol, ketika diklik, akan menyebabkan jendela pop-up, harus ditetapkan kelas modalbox dan jalur href="#inline". Tanpa ini, formulir popup tidak akan terbuka di situs.

Kemudian kami menyembunyikan formulir yang kami buat sebelumnya sehingga terbuka di jendela pop-up. Untuk melakukan ini, Anda perlu mengganti gaya #inline dari yang lama ke yang baru.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

Akibatnya, kami mendapatkan tombol seperti itu.

Mengkliknya akan membuka jendela pop-up dengan umpan balik.

Sekali lagi, gaya, pengaturan bidang, dan elemen dapat diubah sesuai kebutuhan. Misalnya, untuk panggilan balik dari situs, cukup dengan hanya menyisakan 2 bidang - 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 sendmessage.php.

Formulir umpan balik untuk wordpress

Jika situs Anda didukung oleh wordpress, Anda dapat menggunakan plugin khusus untuk menambahkan formulir kontak. Satu dari plugin terbaik formulir kontak 7. Anda dapat mengunduhnya dari situs resmi, atau melalui panel admin di bagian Plugin.

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

Masukkan nama bentuk baru, pilih bidang yang harus ada di formulir. Biasanya, yang standar, yang ditambahkan secara otomatis, sudah cukup. Tetap bugar.

Setelah menyimpan, kode pendek akan muncul di layar, yang perlu dimasukkan pada halaman di mana formulir kontak akan ditampilkan, misalnya, pada 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 ditampilkan di halaman dan berfungsi dengan benar. Untuk melakukan ini, cukup pergi ke halaman tempat kode dimasukkan. Anda harus memiliki formulir seperti ini:

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

Membuat formulir umpan balik popup untuk wordpress

Saya sendiri tidak suka menambahkan plugin tambahan ke mesin ini, karena mereka memuat situs, memperlambatnya. Oleh karena itu, untuk formulir pop-up, saya biasanya menggunakan 2 opsi.

1. Kami cukup mengencangkan formulir pop-up yang dijelaskan di atas dalam artikel bukan ke situs html, tetapi ke mesin.
2. Formulir yang dibuat dengan plugin popup Formulir Kontak 7 dengan beberapa modifikasi kecil.

Metode pertama telah dijelaskan di atas, jadi mari kita beralih ke yang kedua.

Pertama, tempel kode berikut tepat setelah tag badan pembuka.

X

Mari kita lihat apa itu:

• Tautan dengan id="callme-open" ketika diklik, formulir kami akan terbuka. Harap dicatat bahwa tautan ini tidak boleh dimasukkan setelah tag terbuka, tetapi di tempat yang Anda inginkan untuk menempatkan tombol ini. Biasanya ditambahkan ke sudut kanan header, di sebelah nomor telepon perusahaan Anda.
• Blok bg-b akan membuat latar belakang situs yang redup saat formulir popup dibuka.
• Blok callme akan berisi formulir umpan balik itu sendiri.
• X - ini akan menjadi salib kami di sudut formulir, ketika diklik di mana formulir akan ditutup.
• Nah, kode php tempat shortcode plugin Contact Form 7 akan diluncurkan.

Harap dicatat bahwa id dan nama formulir Anda mungkin berbeda dari milik saya. Kode baru menambahkan, sekarang kami memberikannya gaya.

Bg-b ( posisi:absolut; lebar:100%; tinggi:100%; kiri:0; atas:0; latar belakang:rgba(51,51,51,0.55); indeks-z:1000; ) badan (posisi: relatif; ) .callme ( position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border- radius:4px; ) .callme small ( position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; )

Simpan kode dan periksa. Formulir sekarang harus diposisikan di tengah layar Anda, dengan latar belakang gelap transparan di belakangnya. Semuanya baik-baik saja, tetapi tetap menambahkan hal terakhir - skrip yang akan dibuka dan disembunyikan formulir ini dengan mengklik tombol yang diinginkan.

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

Sentuhan terakhir dibiarkan dan formulir pop-up di wordpress akan siap. Berikan kelas .callme dan .bg-b tampilan: tidak ada gaya. Ini diperlukan agar formulir tidak muncul di layar saat situs dimulai.

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

PEMBARUAN 06/06/2018

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

Cukup sering ada masalah di mana formulir melalui di situs berhenti mengirim ke halaman internal. Untuk mencegah hal ini terjadi, tentukan path lengkap ke file sendmessage.php di handler. Misalnya, seperti ini:

Url: "http://site.ru/sendmessage.php"

Dan Anda dapat mengunduh kode sumber dari dua formulir pertama dengan

PEMBARUAN 07/04/2018

Dengan permintaan populer, formulir umpan balik telah dimodernisasi. Sekarang memperhitungkan kotak centang untuk persetujuan untuk mengirim data sesuai dengan undang-undang Federasi Rusia No. 152-ФЗ "Pada Data Pribadi", kemampuan beradaptasi dengan resolusi layar apa pun telah ditingkatkan, file js dan css telah dikompresi.

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

Tahukah Anda bahwa hingga 80% pengguna meninggalkan situs Anda tanpa mengisi aplikasi karena formulir umpan balik di situs Anda jauh dari ideal? Atau apakah Anda yakin formulir aplikasi Anda sudah sempurna dan konversinya maksimal?

Semakin banyak klien baru kami yang menghubungi studio kami, ketika mendiskusikan pembuatan dan promosi situs, bertanya-tanya tentang konversi. Ini benar-benar pertanyaan yang tepat ketika kita sedang berbicara tentang pemasaran Internet, karena jika situs tersebut tidak mendatangkan pelanggan, maka tidak ada gunanya menginvestasikan waktu dan uang di dalamnya. Dalam blog hari ini, kita akan membicarakan salah satu faktor yang sangat mempengaruhi jumlah pelanggan dari website perusahaan. Faktor ini adalah bentuk umpan balik, atau disebut juga “bentuk tangkapan”. Apa bentuk umpan balik yang ideal.

Kami segera mencatat bahwa tergantung pada segmen bisnis, formulir ini mungkin berbeda, karena setiap bisnis memiliki tugasnya sendiri, formatnya sendiri untuk berinteraksi dengan pelanggan. Ini adalah formulir yang "berkomunikasi" dengan klien saat manajer Anda memanggil kontak lain dan menunggu aplikasi baru.

Formulir umpan balik di situs itu penting. Anda mengarahkan pembeli untuk melakukan pembelian atau memesan layanan secara diam-diam dan diam-diam. Gunakan semua yang Anda bisa, dari antarmuka yang ramah pengguna hingga kondisi penjualan yang sangat baik. Tetapi ketika klien sampai ke formulir pemesanan, dia pergi. Semua pekerjaan sia-sia. Kecil kemungkinan dia akan kembali padamu lagi. Ini dapat dihindari hanya dengan mengubah formulir umpan balik.

Untuk apa formulir umpan balik?

Tidak hanya untuk melakukan pemesanan/pembelian. Dengan menggunakan formulir umpan balik, Anda mengetahui dari pengguna apa yang mereka suka/tidak suka, apa "jambs" dalam pekerjaan perusahaan, dan bahkan mendapatkan saran siap pakai tentang cara memperbaikinya. Percakapan dengan pengguna adalah:

a) meningkatkan loyalitas kepada perusahaan Anda;

b) kemampuan untuk dengan cepat menanggapi permintaan, mengurangi yang negatif dan mempertahankan klien;

c) kesempatan untuk meningkatkan produk atau jasa;

d) cara untuk meningkatkan penjualan.

Kesalahan utama yang dilakukan oleh pemilik situs yang tidak berpengalaman adalah formulir umpan balik yang berlebihan. Pengguna ditunda oleh sekumpulan besar bidang yang harus diisi untuk mengajukan permintaan ke perusahaan Anda. Mereka tidak ingin memberikan informasi yang tidak perlu tentang diri mereka sendiri, bahkan jika Anda menjanjikan mereka kerahasiaan. Kami telah mengumpulkan untuk Anda beberapa aturan untuk desain bentuk yang ideal.

Aturan nomor 1. Buat formulir Anda sesederhana mungkin

Manakah dari formulir ini yang ingin Anda isi?

Atau seperti itu

Tinggalkan hanya bidang yang paling penting. Pengunjung sebagian besar situs tidak suka mengisi sejumlah besar bidang

Jika aturan penyederhanaan formulir diikuti, maka kita harus mengharapkan peningkatan konversi sebesar 30-60%.

Nasihat. Hapus semua yang tidak perlu, biarkan 2-3 bidang atau bahkan 1. Biasanya ini adalah "Nama", "nomor telepon atau email". Jika Anda memiliki toko online dan Anda membuat formulir pemesanan, maka akan ada lebih sedikit bidang: "Nama", "Nomor telepon atau Email", "Opsi pengiriman", "Jumlah barang", "Alamat" . Lihat untuk tujuan apa Anda membuat formulir umpan balik, dan sesederhana mungkin.

Aturan nomor 2. Formulir harus terlihat

Umpan balik atau formulir aplikasi dari situs harus terlihat, jika tidak pengunjung mungkin tidak menyadarinya dan tidak mengisinya. Anda bahkan dapat menempatkan beberapa jenis elemen animasi yang memungkinkan Anda untuk lebih fokus.

Aturan nomor 3. Minimal "bidang wajib"

Satu bidang wajib diisi - telepon

Seringkali di situs web perusahaan, seseorang dapat mengamati tidak hanya formulir yang diisi dengan bidang tambahan, tetapi juga kewajiban untuk mengisi bidang ini. Kata-kata "bidang wajib" hadir di 99% situs. Apakah Anda ingin meningkatkan konversi? Hapus pengisian wajib semua bidang, kecuali nomor telepon. Jika seseorang mau, dia sendiri akan mengisi kolom yang dia anggap perlu, tetapi kolom utama adalah nomor telepon, yang akan memungkinkan Anda untuk menelepon klien kembali dan mengklarifikasi semua informasi lainnya. Hal utama adalah jangan lupa untuk menulis skrip yang tepat untuk manajer.

Dalam kasus apa konversi dari formulir jatuh:

• 3% penurunan konversi jika Anda meminta bidang usia
• Jatuh dalam konversi 10% jika Anda perlu memasukkan nama lengkap Anda
• Jatuh dalam konversi 2% jika Anda tertarik dengan lokasi tempat tinggal pengunjung
• Jatuh dalam konversi 4% jika Anda perlu mengisi alamat tempat tinggal

Jika kolom tentang pengiriman, alamat, dan nama lengkap ada di toko online, maka pengguna, tentu saja, mengisinya dan ini tidak mempengaruhi konversi. Tetapi jika Anda ingin dia mengisi data untuk mengirimi Anda aplikasi, maka konversi pasti akan turun.

Aturan nomor 4. Tautan dalam formulir (kondisi kontak)

Jika Anda perlu mengirim pengunjung untuk membaca persyaratan kontak, memproses aplikasi, pesanan, dll., maka buat tautan ini langsung di blok formulir. Saat mengklik tautan seperti itu, lebih baik menampilkan jendela sembul dengan informasi yang mudah ditutup dan melanjutkan untuk mengisi formulir.

Contoh bentuk seperti itu:

Cobalah untuk meminimalkan jumlah teks dan ketentuan dalam formulir, karena pengguna akan terlalu malas untuk membaca ulang semuanya dan dia hanya akan menutup formulir tanpa mengirimkan datanya kepada Anda. Juga kesalahan dalam formulir ini - terlalu banyak bidang wajib diisi.

Aturan nomor 5. Persetujuan untuk pemrosesan data

Meskipun data dalam formulir mungkin salah diisi dan bukan merupakan data pribadi, namun kotak centang ini harus dicentang. Sudah ada pemohon pengadilan yang terdakwa harus membayar denda karena kegagalan untuk mematuhi persyaratan ini Perundang-undangan.

Aturan nomor 6. Daftar dropdown tidak boleh

Jika formulir Anda adalah kalkulator, maka daftar drop-down dapat diterima. Tetapi jika Anda memaksa seseorang untuk memilih departemen mana dari perusahaan Anda yang ingin mereka lamar, maka ini akan mengurangi konversi, karena pengguna ingin mengisi formulir dengan cepat tanpa memikirkan informasi yang tidak perlu.

Aturan nomor 7. Hapus captcha dari formulir

Memasukkan captcha dapat mengurangi konversi hingga 40%. Ini karena captcha sering tidak terbaca sama sekali, atau ketika memasukkan data, ia melaporkan input karakter yang salah. Jika sebelumnya captcha dibenarkan oleh fakta bahwa tanpa itu banyak spam bisa datang, sekarang ada teknologi yang melindungi formulir dari entri data oleh robot spam tanpa memasukkan captcha.

Di studio artcell, kami menggunakan teknologi seperti itu. Seperti yang Anda lihat, tidak ada captcha dalam formulir kami dan kami tidak menerima SPAM.

Aturan nomor 8. Pemberitahuan otomatis bahwa formulir telah dikirimkan

Setelah formulir diisi dan dikirim, akan muncul pesan yang menyatakan bahwa data telah terkirim dan pengelola akan menghubungi Anda kembali secepatnya. Jika tidak ada notifikasi seperti itu, maka pengguna tidak mengerti apakah data tersebut terkirim atau tidak, apakah mengharapkan panggilan dari perusahaan atau tidak. Notifikasi ini akan menyelamatkan Anda dari duplikasi aplikasi dari pengguna yang sama.

Aturan nomor 9. pemberitahuan SMS

Kirim pemberitahuan otomatis ke nomor pengunjung jika formulir Anda memiliki bidang untuk memasukkan nomor telepon. Ini akan memungkinkan Anda untuk mempersonalisasi pesan Anda, dan pengguna sekali lagi akan diingatkan tentang nama perusahaan Anda.

Jadi apa bentuk umpan balik yang ideal?

Disorot dalam bingkai atau warna, yang memungkinkannya lebih terlihat dengan latar belakang informasi lainnya di situs

Bidang minimum yang harus diisi

Satu atau dua bidang wajib diisi

Bidang tarik-turun tidak ada

Kehadiran kotak centang untuk persetujuan pemrosesan data yang diterima

Kehadiran tautan dan kondisi tambahan segera dalam bentuk tanpa transisi yang tidak perlu ke halaman lain situs

Tidak ada captcha

Apakah Anda memiliki formulir aplikasi yang ideal, tetapi masih sedikit pelanggan? Baca blog ini di majalah kami dan Anda akan menemukan jawaban atas pertanyaan Anda. Jika situs Anda tidak berkinerja baik di mesin pencari maka informasi ini akan berguna bagi Anda.

Jika Anda tidak dapat membuat formulir kontak yang ideal dan Anda ingin meminta bantuan profesional, maka isi aplikasi di bawah ini dan manajer kami akan menghubungi Anda kembali sesegera mungkin.

2019.08.10 Viktar Haurylavets

Untuk memberikan umpan balik kepada pengunjung situs, berbagai jenis formulir digunakan untuk mengirim informasi kontak ke administrasi situs. Ini bisa berupa nomor telepon, alamat email, atau hanya pesan.

Prinsip dasar mengatur umpan balik

Umpan balik dapat diimplementasikan menggunakan berbagai teknologi, tetapi prinsip dasarnya tetap sama. pada diagram blok terlihat seperti ini.

Skema pengorganisasian umpan balik di situs.

Kami hanya akan membahas poin teoretis, Anda dapat menemukan implementasinya di artikel lain di situs web kami, tautannya ada di atas.

Formulir

Bentuknya sendiri adalah bagian dokumen HTML, jadi untuk pengguna Anda hanya perlu menunjukkan formulir yang sesuai dan lebih mudah melakukannya di tag

, yang berisi tombol Kirim atau Buat permintaan, setelah mengklik formulir yang akan diproses lebih lanjut.

Sangat penting untuk menunjukkan dengan benar dan jelas bidang yang diperlukan, yang sering ditandai dengan simbol * . Pada prinsipnya, dimungkinkan untuk menulis formulir itu sendiri dalam tag

, tetapi ada perbedaan. Jika sebuah

menghasilkan permintaan POST yang ditentukan dalam atribut tindakan, yang nyaman digunakan untuk pemrosesan lebih lanjut di server dengan menggunakan PHP, Python, Java, dan sebagainya, maka dalam kasus div, Anda perlu menggunakan JavaScript. Juga, menggunakan JavaScript, Anda dapat mengirim data melalui permintaan Ajax, dalam hal ini halaman tidak akan diperbarui di baris browser.

Namun, prinsipnya sama - kami mengirim beberapa data ke server.

Data apa yang harus dibutuhkan?

Ini adalah nomor telepon untuk panggilan balik, atau Surel untuk umpan balik. Terkadang kolom nama dibuat wajib, tetapi apakah tujuannya untuk mendapatkan informasi kontak untuk komunikasi?

Memproses permintaan di server

Implementasi akhir tergantung pada teknologi dan bahasa pemrograman yang digunakan. Anda dapat mengirim surat bahwa aplikasi baru telah muncul dari formulir umpan balik, atau memimpin di CRM (sistem manajemen hubungan pelanggan, di mana semua pelanggan perusahaan dicatat). Namun, Anda perlu memastikan bahwa surat-surat tersebut dikirim dari server dan dikirimkan segera.

Tanggapan dari server

Setelah diproses di server, kami mengirim tanggapan, apakah mungkin mengirim surat atau permintaan terdaftar, sehingga pengguna tahu untuk menunggu tanggapan atau tidak. Sebagai aturan, ini diterapkan baik melalui jendela pop-up dengan pesan, atau ada pengalihan ke halaman terpisah dengan pesan tentang keberhasilan pengiriman permintaan.

Untuk analisis langsung kode ke dalam HTML dan PHP, lihat.

1. Plugin untuk membuat formulir online "jFormer"

Pembuatan formulir kontak: umpan balik, komentar, formulir masuk, formulir pendaftaran dengan memeriksa kebenaran informasi yang dimasukkan.

2. Formulir pendaftaran langkah demi langkah menggunakan jQuery

Bentuk rapi dengan isian selangkah demi selangkah. Di bawah ini adalah indikator pengisian formulir.

3. Bentuk langkah demi langkah

Mengisi formulir dalam beberapa langkah dengan memeriksa kebenaran pengisian.

4. Formulir kontak untuk situs

Pengecekan kebenaran informasi input dilakukan "on the fly" sebelum mengirim pesan menggunakan javascript.

5. Perpindahan animasi antar formulir di jQuery

Peralihan animasi menggunakan jQuery antara formulir login situs, formulir pendaftaran, dan bidang pemulihan kata sandi. Di halaman demo, klik tautan kuning untuk melihat efeknya.

6. Formulir Kontak PHP Pop-up

Solusi semacam itu dapat digunakan untuk memberi pengunjung kemampuan untuk dengan cepat menghubungi pemilik situs dari halaman mana pun. Pada halaman demo, klik panah di bawah untuk membuka formulir.

7. Formulir Pendaftaran PHP Menggunakan jQuery dan CSS3

Formulir dengan validasi informasi yang dimasukkan.

8. Formulir Pendaftaran PHP Gaya Facebook

Formulir pendaftaran yang bagus diimplementasikan dengan CSS, PHP dan jQuery.

9. Formulir Kontak jQuery "SheepIt"

Menerapkan kemampuan untuk menambahkan bidang baru sebelum mengirim pesan.

10. Formulir Kontak AJAX Mewah

lucu rapi bentuk PHP umpan balik dengan memeriksa kebenaran informasi yang dimasukkan. Teknologi: CSS, PHP, jQuery.

11. Sistem otorisasi / registrasi di situs

12. Formulir Pengajuan

Dengan verifikasi kebenaran pengisian.

13. Plugin jQuery "Dapat Dihubungi"

Untuk menerapkan formulir umpan balik keluar untuk mengirim pesan dengan cepat.

Setiap situs harus memiliki formulir umpan balik, jadi cepat atau lambat, kita masing-masing memikirkan perkembangannya. Ada banyak opsi di jaringan, seseorang menggunakan plugin populer, seseorang memiliki pengalaman pribadinya sendiri, tetapi sebagian besar mencari solusi yang sudah jadi. Bagaimanapun, kami formulir umpan balik situs web akan bekerja dan fungsional, dan semua ini dalam rangka.

HTML

Jadi, mari kita mulai, seperti biasa, dengan blank - html biasa. Pertama kita membutuhkan formulir dengan beberapa bidang. Kami akan mengambil 3 bidang untuk kejelasan dan standar semua bentuk. Itu. itu akan Nama, Email dan Telepon.

Setiap masukan yang kami miliki memiliki nama nama uniknya sendiri, kami akan membutuhkannya nanti untuk mengirim pesan. Anda juga dapat dengan bebas menambahkan bidang Anda sendiri dan tidak hanya memasukkan, tetapi juga memilih, textarea. Hanya saja, jangan lupa untuk memberi masing-masing nama mereka sendiri, yang akan kami gunakan saat mengirim informasi melalui surat. Untuk kenyamanan, saya menambahkan ke setiap bidang atribut yang diperlukan, berkat itu browser tidak akan mengizinkan pengguna untuk mengirimkan nilai kosong dan memberi tahu mereka tentang perlunya mengisinya.

css

Saat formulir sudah siap, Anda dapat mengubahnya sedikit. Itu semua juga tergantung pada kebutuhan dan fantasi Anda. Untuk kejelasan, saya membuat sketsa beberapa gaya untuk setiap elemen sehingga semuanya tidak terlihat begitu datar. Tetapi jika Anda terlalu malas atau tidak tahu cara melakukannya, Anda dapat menggunakan versi saya:

Bentuk (max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0,11); padding: 10px 20px; lebar: 100%; margin: 10px 0; garis besar: tidak ada; ) masukan (latar belakang: merah; batas: tidak ada; kotak-bayangan: 0px 2px 0 1px #C50909; perbatasan- radius: 5px; warna: putih; transformasi teks: huruf besar; berat font: 600; lebar: 200px; kursor: penunjuk; transisi: 0.3s; ) input:hover( background: black; box-shadow: 0px 2px 0 1px hitam;)

Sisi klien

Di sini sudah layak dipahami secara lebih rinci, lebih akurat untuk memilih opsi yang sesuai untuk Anda sendiri. Untuk mengirim pesan ke email, kita perlu menggunakan bahasa php, yaitu. membuat file terpisah, yang akan kami transfer semua data ini. Tapi kita metode ini kami tidak akan mempertimbangkannya di sini, karena jauh lebih indah ketika semuanya terjadi tanpa memuat ulang halaman. Oleh karena itu, kami akan mempertimbangkan untuk mengirim data melalui ajax .

Jika Anda ingin melakukan hal-hal dengan cara kuno, maka Anda perlu sedikit mengubah html teratas dan mengatur nilai atribut metode formulir (posting atau dapatkan). Itu semua tergantung pada bagaimana Anda ingin mengirimkan data dari formulir. Dan juga jangan lupa untuk menulis action , yang akan menunjukkan path ke file php.

Dan kami akan menggunakan metode yang lebih maju dan mengirim data tanpa memuat ulang halaman, dan menerima respons dari server, kami akan memberi pengguna pesan tentang operasi yang berhasil atau kesalahan. Namun, kami juga membutuhkan 2 file, katakanlah kontak.php dan custom.js.

Pertama-tama, jangan lupa sertakan perpustakaan Jquery, dengan bantuannya kami akan mengurangi kode beberapa kali dan akan dapat dengan mudah melakukan tindakan apa pun menggunakan solusi yang sudah jadi.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( ketik: "POST", url: "contact.php", data: str, sukses : function(msg) ( if(msg == "ok") ( alert("Email terkirim"); ) else ( alert("Error! Anda mungkin salah mengisi kolom."); ) ) )); return salah; ));

Sekarang mari kita lihat skema tindakan dan mengapa kita membutuhkan semua pustaka dan file ini. Ketika pengguna mengklik tombol kirim, kami memiliki acara kirim, yang akan kami tulis di custom.js dan, berdasarkan itu, kami akan menerima semua data dari formulir dan meneruskannya ke file contact.php. Di sini kami sekali lagi memeriksa apakah bidangnya kosong (untuk menghindari kemungkinan spam lainnya), mengirim pesan ke email dan memberi tahu pengguna tentang hasilnya, yang diteruskan sebagai respons ke custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // dari siapa $fromMail = " [dilindungi email]"; // Masukkan email Anda di sini $emailTo = " [dilindungi email]"; $subjek = "Umpan Balik"; $subjek = "=?utf-8?b?". base64_encode($subjek) ."?="; $headers = "Dari: Contoh formulir<$fromMail>\n"; $headers .= "Jenis konten: teks/polos; charset="utf-8"\r\n"; $headers .= "Versi MIME: 1.0\r\n"; $headers .= "Tanggal: ". date("D, d M Y h:i:s O") ."\r\n"; // isi pesan $body = "Email diterima dari situs ".$site." \n\nNama: ".$txtname."\nTelepon: ".$txtphone."\ne-mail: ".$txtemail."\nPesan: ".$txtmessage; mail($emailTo, $subject, $body, $header); echo "oke"; )

Ini adalah contoh paling dasar tentang cara kerja formulir kontak. Ada banyak opsi untuk cara memodifikasi file cek php, membuat kelas Anda sendiri, dll. Tetapi tugas kami adalah membuat contoh sederhana dan berfungsi yang dapat Anda gunakan di situs Anda.

demo

file

Plugin siap

Sejak kamu aktif blog WordPress, maka Anda mungkin sudah siap dan ingin menggunakan semua jenis plugin, terutama jika Anda adalah seorang yang ahli dalam pemrograman dan tata letak. Dan saya tidak menyalahkan Anda untuk ini, dan saya bahkan dapat membawa salah satu dari mereka ke perhatian Anda untuk kejelasan. Maksud paragraf ini bukan rekomendasi, tapi hanya contoh, karena saya menggunakan plugin Formulir Kontak 7 di beberapa proyek.

Sangat mudah untuk mengatur dan hampir selalu bekerja dengan sempurna. Jika Anda perlu membuat desain unik Anda sendiri, Anda bisa melakukannya. Cukup menambahkan bidang yang diperlukan di konstruktor, menerjemahkan dan mengubah pemberitahuan tentang kesalahan dan pengiriman yang berhasil dengan cara Anda sendiri, dan Anda selesai. Kemudian salin kode pendek dan tempel di tempat yang tepat dari keluaran formulir.

Saya tidak pernah memiliki masalah dengan plugin dan jika Anda membutuhkan solusi cepat dan siap, maka ini dia. Jika Anda memiliki persyaratan sendiri untuk formulir dalam hal fungsionalitas dan desain, maka lebih baik menggunakan opsi pertama, yang membutuhkan pengetahuan di industri ini.