Formulir kontak sederhana menggunakan Ajax. Formulir umpan balik Ajax di jendela modal Jendela modal dengan nama formulir berlangganan email

Saya mengabdikan diri pada bagaimana Anda dapat membuat jendela pop-up yang ditampilkan di situs sekali dan setelah jangka waktu tertentu. Jadi, sebagai opsi, Anda bisa menyisipkan formulir ke jendela ini. Bisa berupa formulir berlangganan atau formulir kontak, secara umum, apa saja. Lebih baik menampilkan formulir Ajax di jendela pop-up sehingga data terkirim tanpa memuat ulang halaman.

Struktur artikel

Jika Anda membuat website dengan mesin, misalnya Joomla atau WordPress, tentu saja Anda dapat menggunakan berbagai solusi formulir yang sudah jadi, termasuk desainer. Namun bagaimana jika Anda hanya mendesain dalam HTML murni dan pelanggan meminta untuk “menghidupkan kembali” formulir agar dapat berfungsi. Di sinilah formulir ini berguna.

UPD. 08/02/2018
Artikel tersebut telah ditulis ulang dengan mempertimbangkan bahwa formulir tersebut telah diposting di GitHub

Jadi, mari kita mulai. Pertama-tama, unduh sumber formulir dari repositori GitHub saya.

Saya merakit rakitan ini menggunakan task manager Gulp. Saya menulis tentang cara bekerja dengannya, pastikan untuk membaca.

Menghubungkan formulir ke situs

Buka paket arsip dengan formulir. Selanjutnya, salin semua konten dari folder dist ke folder formulir (misalnya, ajax-form) di templat situs Anda. Selanjutnya, kami menghubungkan sumber daya - gaya dan skrip. Ada dua versi di folder css dan js - terkompresi dan reguler. Jika Anda berencana membuat perubahan pada kode di masa mendatang, lebih baik sambungkan versi yang tidak terkompresi.

Jika situs Anda sudah mengaktifkan perpustakaan jQuery, Anda tidak perlu menghubungkannya. Perhatikan.

Inisialisasi formulir

Izinkan saya segera mencatat bahwa validasi lapangan diatur menggunakan HTML5.

Formulir dipanggil dengan metode .simpleSendForm(), misalnya:

$("#idForm").simpleSendForm();

Daripada #idForm kami menentukan pengidentifikasi formulir. Secara umum, Anda dapat menemukan kode inisialisasi form di file scripts.js. Kode pemanggil plugin dapat dipotong dari sana dan ditulis tepat sebelum . Jangan lupa tentang jQuery.(document).ready() .

Formulir dapat menerima beberapa opsi.

Pilihan

• suksesTitle (string) — Judul pesan terima kasih saat formulir dikirimkan. Standarnya adalah “Terima kasih telah memilih kami!”
• suksesTeks (string) - Teks di bawah judul pesan terima kasih. Standarnya adalah “Kami akan segera menghubungi Anda.”
• errorTitle (string) — judul pesan kesalahan pengiriman formulir. Standarnya adalah “Pesan tidak terkirim!”.
• errorSubmit (string) — teks pesan kesalahan pengiriman formulir. Standarnya adalah “Kesalahan saat mengirimkan formulir!”.
• errorNocaptcha (string) — teks kesalahan jika captcha tidak diisi.
• errorCaptcha (string) — teks kesalahan jika pemeriksaan gagal.
• mailUrl (string) — jalur ke file handler. Standarnya adalah "../form-submit/submit.php". Anda harus mengubah dan menentukan jalur lengkap jika folder "pengiriman formulir" Anda tidak ada di root situs.
• autoClose (boolean) - Secara otomatis menutup jendela setelah pengiriman formulir berhasil (untuk formulir di jendela modal). Jendela formulir ditutup, menampilkan pesan terima kasih setelah 5 detik. Kali ini dapat ditimpa.
• autoCloseDelay (angka) - durasi (dalam milidetik) menampilkan pesan terima kasih setelah itu akan ditutup. Standarnya adalah 5000 (5 detik).
• debug (boolean) - salah secara default. Aktifkan debugging jika ada masalah pada formulir. Lihat pesan kesalahan di konsol.
• captcha (boolean) - salah secara default. Mengaktifkan atau menonaktifkan Recaptcha 2.0.
• captchaPublicKey (string) — kunci publik recaptcha.

Bentuk di jendela modal

Formulir kami juga dapat ditampilkan di jendela modal. Modal akan ditampilkan oleh perpustakaan.

kode HTML

Kode tombol

Minta panggilan

Kode formulir

Inisialisasi jendela modal dan formulir. Mari kita tutup jendela secara otomatis setelah 3 detik. setelah penyerahan formulir berhasil. Anda juga dapat menemukan kode panggilan Magnific Popup di file scripts.js.

Memanggil formulir dengan jendela modal // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( ketik: "inline", fixedContentPos: false, fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: "mfp-top-up" )); // ===== Init modal form ==== $("#idForm").simpleSendForm (( SuccessTitle: "Permohonan Anda telah diterima!", SuccessText: "Karyawan kami akan menghubungi Anda sesegera mungkin." , tutup otomatis : benar, autoCloseDelay: 3000 )); Bagaimana cara mengaktifkan Recaptcha?

Jika Anda ingin mengaktifkan recaptcha dalam suatu formulir, maka Anda perlu menambahkan blok kosong dengan kelas recaptcha dalam kode html formulir di tempat Anda ingin menampilkannya. Selanjutnya, pada kode untuk memanggil plugin form, kami meneruskan opsi captcha dengan nilai true, dan kami meneruskan kunci publik recaptcha Anda ke opsi captchaPublicKey. Anda bisa mendapatkan kunci publik dan pribadi.

// ===== Init captcha dalam bentuk ==== $("#idForm").simpleSendForm(( SuccessTitle: "Permohonan Anda telah diterima!", SuccessText: "Karyawan kami akan menghubungi Anda sesegera mungkin ." , autoClose: benar, autoCloseDelay: 3000, captcha: benar, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Selanjutnya, buka file form handler submit.php dari direktori form-submit. Kami mencari variabel recaptchaOn (sekitar baris ke-7) dan menyetelnya ke true . Selanjutnya, cari variabel $secret (kira-kira baris 89) dan ubah kunci privat menjadi milik Anda.

Pada dasarnya segalanya. Setelah manipulasi ini, Anda akan melihat captcha.

Harap dicatat bahwa di situs demo, captcha berfungsi dalam mode uji, seperti yang ditunjukkan kunci uji dari Google.

Sekarang mari kita lihat file form handler (submit.php) dan telusuri potongan kode utama. Pengendalinya bekerja di PHP, jadi jika Anda ingin menguji formulir, Anda perlu menggunakan .

Kemungkinan kesalahan Pesan dari formulir tidak terkirim, preloader hanya berjalan dan hanya itu. Apa masalahnya?

Lihat apakah jalur ke file handler ditentukan dengan benar dalam inisialisasi formulir:

mailUrl: — jalur ke file pengendali

Periksa juga apakah recaptcha diaktifkan dengan benar. Artinya, jika dinonaktifkan, maka opsi recaptcha di kode inisialisasi dan $recptchaOn di file handler harus disetel ke false atau true jika recaptcha diaktifkan.

Tidak ditampilkan Google Recaptcha dalam bentuk

Periksa apakah nilai recaptcha (panggilan recaptcha) dan $recaptchaOn (file handler) telah dikirimkan - BENAR. Periksa juga apakah Anda menentukan kunci dengan benar - publik dan pribadi.

Saya melakukan semuanya sesuai instruksi, tetapi formulir tidak berfungsi, di mana saya dapat mencari kesalahannya?

Pertama-tama, saya menyarankan Anda untuk melihat ke konsol browser dan memeriksa kesalahan. Periksa juga apakah Anda mengaktifkan perpustakaan jQuery. Periksa apakah file scripts.js disertakan dengan benar. Jika semuanya baik-baik saja, coba aktifkan debugging dengan opsi debug: true. Setelah dinyalakan, lihat konsol untuk mencari kesalahan.

Ini adalah bentuknya. Gunakan di website Anda, semoga bermanfaat bagi Anda. Apa lagi yang harus kukatakan? Mari kita bicara sekarang - di komentar. Tanyakan apakah ada yang tidak jelas. Juga, jika Anda menemukan kesalahan, harap segera beri tahu saya dan kami akan memperbaikinya...

Itu saja. Terima kasih atas perhatian Anda. Sampai jumpa di postingan berikutnya!

Salam kepada para pembaca saya, saya telah memperoleh pengalaman dan akan memberi tahu Anda tentang prinsip-prinsip pengoperasian formulir masukan php. Akan kutunjukkan padamu contoh yang jelas, sehingga Anda memahami cara kerja semuanya dan bagaimana interaksi terjadi antara formulir masukan itu sendiri (kolom masukannya) dan file pengendali yang ditulis dalam PHP. Selain itu, Anda dapat mengunduh sumbernya secara gratis beserta .

Tentu saja akan sangat bagus jika Anda memiliki setidaknya sedikit pemahaman tentang HTML/CSS karena... Anda harus menyeret kode ke halaman Anda dengan analogi. Kami tidak akan menyentuh bahasa PHP; saya akan menunjukkan kepada Anda semua perubahan penting yang perlu Anda lakukan sendiri.

UPDATE: Berdasarkan tanggapan pembaca, saya menyadari bahwa saya membutuhkan sesuatu yang lebih indah dan fungsional, silakan temui saya, lihat dan lihat. Pilih mana yang paling Anda sukai)

UPDATE2: Versi 3.0 Adaptive Landing + formulir ajax dengan transmisi tag UTM, baca dan lihat. Kamu akan menyukainya

Saya ingat diri saya sendiri ketika pertama kali mencoba membuat formulir umpan balik di PHP sendiri, dan sejujurnya, itu memakan banyak tenaga, karena... Saya tidak mengerti apa dan bagaimana yang terjadi. Kesabaran dan ketekunan, teman-teman, dan Anda akan berhasil.

Formulir umpan balik PHP - struktur

Kita akan mempelajari analisis formulir umpan balik itu sendiri dengan menggunakan sebuah contoh halaman arahan (Halaman arahan), omong-omong, ada artikel terpisah tentang. Anda dapat melihat cara kerjanya menggunakan tombol di bawah ini, saya melampirkan sumber halaman satu halaman ini dan file handler php utama (file ini akan memproses dan mengirim email)

Setelah mengunduh sumber dan membongkar arsip, Anda akan melihat struktur file berikut:

• gambar - semua gambar yang digunakan untuk Halaman Arahan itu sendiri, tombol, dll.
• js - skrip javascript yang menyediakan, misalnya, jendela modal pop-up pada halaman dan efek visual lainnya
• index.html - file indeks halaman satu halaman kami
• index1.php adalah file handler di mana nilai-nilai dari formulir ditransfer, kemudian surat dibuat dari variabel yang diterima dan dikirim ke alamat email yang ditentukan. Index1.php juga akan bertindak sebagai halaman pemberitahuan perantara tentang keberhasilan pengiriman data dengan pengalihan otomatis kembali ke index.html (yaitu halaman satu halaman kami)

Penting bahwa hosting Anda, tempat file situs berada, mendukung pemrosesan PHP, jika tidak, file index1.php tidak akan dijalankan dan tidak akan berfungsi. Untuk memperjelas nuansa ini, hubungi kampanye tempat hosting Anda terdaftar atau uji saja - berfungsi, artinya ada dukungan. Jika tidak, aktifkan opsi dukungan bahasa php

Lihatlah diagram bagaimana semua elemen berinteraksi (halaman, formulir, pengendali)

Kode sumber untuk memanggil formulir dan pengendali

Mari kita lihat cara kerja salah satu tombol, yang menampilkan jendela pop-up modal yang berisi formulir umpan balik. Ini diberikan sumber- tidak hanya satu, dua disisipkan pada halaman dan akan berfungsi, Anda harus menyesuaikannya sendiri agar sesuai dengan desain dan kebutuhan Anda.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Minta ditelepon balik Minta ditelepon balik

Minta ditelepon balik Minta ditelepon balik

Di bawah ini adalah kode sumber lengkap dari handler index1.php, untuk mengatur pengiriman ke kotak surat Anda, ubah “ [dilindungi email]"untuk milik Anda sendiri, selebihnya, pada prinsipnya, tidak boleh diubah

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Anda akan dihubungi

Anda akan dihubungi body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Ubah alamat halaman saat ini setelah 3 detik (3000 milidetik)*/

Memeriksa fungsionalitas formulir

Panggil jendela dan masukkan data untuk pemeriksaan tes formulir kami

Izinkan saya mengingatkan Anda sekali lagi, hosting Anda harus mendukung pemrosesan file php, jika tidak, handler kami tidak akan dieksekusi dan tidak ada surat yang akan dikirim ke alamat email yang ditentukan. Hasil formulir umpan balik yang berhasil diisi

Sekian bagi saya, saya berusaha menyampaikan makna dan pengoperasian naskah sebaik mungkin. Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya di komentar atau di VK (lihat detail kontak). Saya berharap Anda bekerja dengan mudah dan produktif.

Halo semua. Kami dibombardir dengan pertanyaan tentang bagaimana mengimplementasikan formulir yang muncul di jendela modal setelah mengklik tombol, dan setelah mengirimkan, pesan tentang keberhasilan atau kegagalan akan ditampilkan.

Saya rasa ada banyak hal serupa di Internet, tetapi karena orang-orang bertanya, saya memutuskan untuk melakukannya. Selain itu, fungsi tersebut harus ada di hampir setiap halaman arahan untuk menerapkan tombol panggilan kembali. Dan memang, kini semakin banyak hasil pengujian AB yang menunjukkan bahwa formulir terbuka bekerja lebih buruk daripada formulir yang disembunyikan di jendela modal dan dibuka setelah mengklik tombol.

Beberapa orang berpendapat bahwa hal ini disebabkan oleh fakta bahwa masyarakat secara perlahan “mengembangkan kekebalan” dan bentuk terbukanya adalah penjualan yang agresif. Diduga, sekaranglah saatnya pengguna, ketika melihat formulir terbuka, percaya bahwa mereka mencoba untuk "menjual" sesuatu kepadanya. Saya tidak sepenuhnya setuju dengan teori ini, tetapi ada sedikit kebenarannya. Hal ini mungkin berlaku pada beberapa jenis bisnis. Nah, sekarang mari kita mulai mengimplementasikan formulir tersebut.

Catatan! Saya tidak akan menjelaskan setiap tindakan secara detail, tetapi menawarkan Anda versi siap pakai dalam kode sumber. Jika Anda memiliki pertanyaan, tulis di komentar. Kami akan mencari tahu :)

Hari ini kita tidak akan memulai dengan jQuery, tetapi dengan tata letak tombol dan formulir. Kami akan menyertakan semua skrip di akhir halaman.

Sebuah tombol yang bila diklik akan membuka jendela modal:

Kirimkan lamaran Anda

Anda dapat mengatur kelas apa pun, tetapi di href tulis #modal - ini akan menjadi id wadah dengan bayangan dan formulir kontak.

Sekarang saya akan memberikan kode untuk formulir dan blok tempat formulir itu berada:

Tinggalkan detail kontak Anda dan konsultan kami akan menghubungi Anda. Saya ingin formulir ini untuk situs web saya

Setelah menambahkan gaya, tampilannya seperti ini:

Untuk membuat jendela modal, perpustakaan Remodal digunakan. Ini adalah kumpulan file css dan js, hanya untuk membuat jendela modal animasi. Anda dapat mendownloadnya dari link atau dengan editan saya di akhir artikel.

Kami menambahkan gaya di antara tag head:

Dan sebelum tag body penutup, tambahkan skrip:

Script.js adalah skrip untuk memproses formulir. Ajax yang sama yang memungkinkan kita menjalankan seluruh prosedur tanpa memuat ulang halaman:

$(document).ready(function () ( $("form").submit(function () ( // Dapatkan ID formulir var formID = $(this).attr("id"); // Tambahkan hash dengan nama ID var formNm = $("#" + formID); $.ajax(( ketik: "POST", url: "mail.php", data: formNm.serialize(), sukses: function (data) ( // Keluaran teks hasil pengiriman $(formNm).html(data); ), error: function (jqXHR, teks, error) ( // Keluaran teks kesalahan pengiriman $(formNm).html(error); ) )); mengembalikan salah; ) ); ));

Saya tidak akan memberikan yang asli kode css dan js dari file yang bertanggung jawab atas jendela modal dan formulir, karena ukurannya cukup besar. Jika iya, lihatlah sumbernya. Tetapi pengendali PHP sebagian besar standar (jika boleh saya katakan demikian):

Tolong jangan lupa untuk mengubah alamat Anda Surel Anda sendiri.

Ini adalah formulir ajax yang kami dapatkan. Maaf karena tidak mencoba menjelaskan secara detail bagaimana setiap elemen dibuat. Saya hanya ingin memberikan hasil akhir, tetapi tidak ada gunanya menjelaskan semua animasi dan tampilannya. Unduh sumbernya dan terapkan di situs web Anda. Dan itu saja untuk hari ini. Semoga sukses untuk semuanya!

Teman-teman, saya mendorong Anda untuk menguji formulir tersebut secara nyata atau server virtual(menjadi tuan rumah). Harap pastikan server Anda mendukung PHP, Anda memiliki paket berbayar dan bukan masa percobaan. Jika tidak, dalam 90% kasus, formulir tersebut tidak akan berfungsi.

Jangan menunggu surat di tempat Anda kotak surat, jika Anda cukup membuka file indeks di browser dan mengklik tombol "Kirim". Php adalah bahasa sisi server!

Jika Anda terlalu malas untuk mencari tahu dan membuat formulir sendiri, maka saya sarankan untuk memperhatikannya.

Versi artikel yang diperbarui berada