Skrip untuk formulir umpan balik di jendela modal. Formulir Kontak Ajax Sederhana

Halo semuanya. Mereka dibombardir dengan pertanyaan tentang bagaimana mengimplementasikan formulir yang muncul di jendela modal setelah mengklik tombol, dan setelah mengirimkan, pesan sukses atau gagal akan ditampilkan.

Saya pikir sudah ada banyak ini di Internet, tetapi karena orang bertanya, saya memutuskan untuk melakukannya. Selain itu, fungsi tersebut harus ada di hampir setiap halaman arahan untuk menerapkan tombol panggilan balik. Memang, sekarang semakin banyak AB - hasil pengujian muncul, yang mengatakan bahwa formulir terbuka bekerja lebih buruk daripada yang disembunyikan di jendela modal dan terbuka setelah mengklik tombol.

Beberapa berpendapat bahwa ini disebabkan oleh fakta bahwa orang secara perlahan "mengembangkan kekebalan" dan bentuk terbuka adalah penjualan yang agresif. Seharusnya sekarang saatnya telah tiba ketika pengguna, ketika dia melihat formulir terbuka, berpikir bahwa mereka mencoba untuk "menjual" sesuatu kepadanya. Saya tidak begitu setuju dengan teori ini, tetapi ada secuil kebenaran. Mungkin dalam beberapa jenis bisnis hal ini benar adanya. Untuk saat ini, mari masuk ke implementasi formulir.

Catatan! Saya tidak akan menjelaskan setiap tindakan secara rinci, tetapi menawarkan kepada Anda versi yang sudah jadi di sumbernya. Jika Anda memiliki pertanyaan, tulis di komentar. Kami akan mencari tahu :)

Hari ini kita tidak akan mulai dengan jQuery, tetapi dengan tata letak tombol dan formulir. Semua skrip disertakan di akhir halaman.

Tombol dengan mengklik di mana jendela modal akan terbuka:

Kirim aplikasi 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 formulir dan blok tempat formulir akan ditempatkan:

Setelah menambahkan gaya, tampilannya seperti ini:


Untuk membuat jendela modal, perpustakaan Remodal digunakan. Ini adalah kumpulan file css dan js, hanya untuk membuat animasi modal windows. Anda dapat mengunduhnya dari tautan atau sudah dengan suntingan saya di akhir artikel.

Sertakan gaya di antara tag kepala:

Dan sebelum tag body penutup - tambahkan skrip:

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

$ (dokumen) .ready (fungsi () ($ ("form").submit (fungsi () (// Dapatkan ID formulir var formID = $ (ini) .attr ("id"); // Tambahkan hash dengan nama ID var formNm = $("#" + formID); $ .ajax ((type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) ( // Output teks hasil kirim $ (formNm) .html (data);), error: function (jqXHR, teks, error) (// Output teks error kirim $ (formNm) .html (error);) )); kembali salah;) );));

Saya tidak akan memberikan yang asli kode css dan js dari file yang bertanggung jawab untuk jendela modal dan formulir, karena ukurannya cukup besar. Jika ada, lihat sumbernya. Tetapi penangan php sebagian besar standar (jika saya boleh mengatakannya):

Nama pengirim:$ nama Telepon:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send =" true ") (echo"

Terima kasih telah mengirimkan pesan Anda!
";) lain (gema"
Kesalahan. Pesan tidak terkirim!
";)) else (http_response_code (403); echo" Coba lagi ";)?>

Tolong, jangan lupa ganti alamat Surel mereka sendiri.

Berikut adalah bentuk ajax. Maaf karena tidak mencoba menjelaskan secara detail bagaimana setiap elemen dibuat. Saya hanya ingin memberikan hasil akhir, tetapi tidak ada gunanya menggambarkan semua animasi, penampilan. Unduh sumbernya dan sematkan di situs Anda. Dan itu saja untuk hari ini. Semoga sukses untuk semua!

Teman-teman, saya sangat meminta Anda untuk menguji formulir secara nyata atau server virtual(hosting). Pastikan server Anda mendukung php, Anda memiliki paket berbayar dan bukan masa percobaan. Jika tidak, dalam 90% kasus, formulir tidak akan berfungsi.

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

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

Versi terbaru artikel adalah

Halo pembaca yang budiman! Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana kita bisa membuat formulir pendaftaran email HTML5 memvalidasi URL yang dimasukkan dengan JQuery. Untuk verifikasi, kami akan menggunakan ekspresi reguler, dan kami akan menyimpan alamat yang dimasukkan dalam database MySql. Jadi, saat menyimpan, itu akan menggunakan AJAX(yaitu memanggil skrip PHP tanpa memuat ulang halaman). Hasilnya dapat dilihat di halaman demo, serta mengunduh sumbernya. Mari kita mulai!

Markup dasar

Mari kita mulai dengan membuat file index.html baru. Dan mari kita buat struktur dokumen sederhana yang menempel pada HTML5. Kami juga akan segera menyertakan gaya CSS dan perpustakaan, kami akan membutuhkannya saat memeriksa email yang dimasukkan:

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


<html lang = "ru">
<kepala>
<meta charset = "utf-8">
<judul> Formulir pendaftaran email dengan validator jQuery</ judul>

<link rel = "stylesheet" type = "text / css" href = "style.css">

<jenis skrip = "teks / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ kepala>

<tubuh>

</ tubuh>
</ html>

Anda sekarang siap untuk membuat formulir Anda!

Formulir email berlangganan

Tujuan formulir kami adalah untuk memverifikasi alamat email pengunjung yang dimasukkan dan entah bagaimana menyimpannya ke daftar pelanggan. Untuk ini kita lakukan bentuk biasa dengan tombol, dengan mengklik alamat yang diproses dan disimpan dalam database atau dalam file yang nyaman bagi siapa saja. Dalam pelajaran ini, kami akan mempertimbangkan untuk menyimpan data di buz. Ini akan membuatnya lebih jelas, kami akan fokus untuk memeriksa kebenaran alamat yang dimasukkan. Ini adalah bagaimana formulir berlangganan terlihat seperti:

1
2
3
4
5
6
7
8
9



"Masukkan email Anda" pelengkapan otomatis = "mati" koreksi otomatis = "mati" autocapitalize = "mati">

Mari kita bungkus formulir di blok div #completeform, sehingga setelah menyimpan alamat, formulir dapat diciutkan.

Kami juga menggunakan beberapa atribut baru di bidang input. Jenis bidang diatur ke "email" sehingga browser seluler dapat menampilkan keyboard yang sesuai. Chrome dan beberapa browser WebKit akan menggunakan ini untuk memeriksa apakah pengguna telah memasukkan alamat. Atribut koreksi otomatis dan kapitalisasi otomatis dirancang khusus untuk browser seluler.

Rentang dengan id kesalahan awalnya disembunyikan, di mana properti tampilan bertanggung jawab dengan nilai none, ini ditulis dalam file dengan gaya, tentang itu nanti. Tetapi segera setelah pengguna memasukkan alamat email yang tidak valid dalam rentang tersebut, pesan peringatan akan ditampilkan.

Validator JQuery dan permintaan AJAX

Mari kita mulai dengan fungsi verifikasi email sederhana. Kami menggunakan string regex untuk menguji apakah string teks cocok dengan sintaks email standar kemudian mengembalikan boolean true jika tidak salah.

Mari kita lihat fungsi completeInviteForm(). Untuk menghindari kebingungan formulir input alamat, kami akan menciutkan efek fadeOut selama 400 milidetik. Dan sebagai callback, kita akan beralih ke fungsi $ .ajax(), dengan bantuannya kita akan memanggil file save.php dan menyimpan alamat yang dimasukkan ke database. Saya akan mengutip kode sumber dari file save.php di bawah ini, tetapi untuk sekarang mari kita cari tahu dengan fungsi $ .ajax().

$ .ajax- memuat halaman jarak jauh menggunakan permintaan HTTP... Sebagai argumen untuk fungsi $ .ajax(), sebuah objek dilewatkan, terdiri dari pasangan kunci/nilai yang digunakan untuk menginisialisasi dan memanipulasi permintaan. Dalam kasus kami, kami akan menggunakan objek berikut:

  • ketik: 'POST' - pilih jenis permintaan ke file, secara default DAPATKAN, perbedaan antara POST dan GET tidak terlalu besar, hanya dengan permintaan GET, data ditransmisikan di header dan dengan POST di badan permintaan, oleh karena itu, menggunakan POST, Anda dapat mentransfer lebih banyak informasi;
  • url: 'save.php' - jalur ke file yang dapat dieksekusi;
  • data: 'email =' + $("# email").val()- data yang dikirim ke server. DENGAN menggunakan CSS pemilih #email merujuk ke elemen dengan id = "email" dan dapatkan konten dari atribut value, yaitu email yang dimasukkan oleh pengguna. Dan tetapkan konten ini ke variabel surel yang akan kita gunakan dalam file save.php;
  • sukses: fungsi () ($ ('# bentuk lengkap'). sebelum (' Semua sudah siap! Anda telah ditambahkan ke milis.‘);} - fungsi sukses disebut sukses permintaan ajax... Fungsi melakukan tindakan berikut. Di depan div #completeform, kami menyisipkan konten yang memberi tahu pengguna bahwa emailnya telah ditambahkan ke milis.

1
2
3
4
5
6
7
8
9
10
11
12

fungsi completeInviteForm() (
setTimeout (fungsi () ($ ("# bentuk lengkap") .fadeOut (400, fungsi () (
$ .ajax ((
ketik: "POST",
url: "simpan.php",
data: "email =" + $ ("# email") .val(),
sukses: fungsi () (
$("# formulir lengkap") .before ( "Semua sudah siap! Anda telah ditambahkan ke milis." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Dan dengan metode setTimeout, formulir disembunyikan dan permintaan ajax dijalankan secara asinkron dengan penundaan 1100 milidetik.

Pemrosesan formulir

Untuk kenyamanan merujuk ke elemen halaman, mari buat beberapa variabel dengan pemilih #error dan #btnwrap.

var erdiv = $("# kesalahan");
var btnwrap = $("# btnwrap");

Menggunakan pengendali acara hidup lacak klik pada tombol "Berlangganan", id nya = "sendbtn". E.preventDefault () metode; membatalkan perilaku standar browser untuk suatu tindakan (mengklik tombol), yaitu, kami membatalkan penyegaran halaman dan perubahan URL. Kami menetapkan email yang dimasukkan ke variabel emailval, dan kami dapat mulai memproses variabel ini.

Pertama jika jika (! isEmail (emailval)) memeriksa apakah fungsi isEmail mengembalikan false, ini berarti bahwa alamat email yang dimasukkan oleh pengguna tidak cocok dengan ekspresi reguler, yaitu tidak benar, kami akan memberi tahu pengguna tentang ini di blok kesalahan, tampilkan pesan (Anda salah memasukkan alamat email).

Sekarang yang kedua jika dijalankan hanya jika pengguna memasukkan alamat email yang valid. Kemudian kita bisa memulai proses penyimpanan alamat.

Untuk memperjelas proses, masukkan teks yang sesuai ke dalam blok kesalahan, dan tempatkan gambar GIF di blok tempat tombol "Berlangganan". Dan kami memanggil fungsi completeInviteForm (), yang telah kami diskusikan di atas.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail (emailval)) (
erdiv.html ( "Anda tidak memasukkan alamat email yang benar") ;
erdiv.css("tampilan", "blok");
}
if (isEmail (emailval)) (
erdiv.css("warna", "#719dc8");
erdiv.html ("memproses ...");
(lengkapInviteForm (), 900);
}
} ) ;
} ) ;

Basis data

Karena saya telah memilih metode menyimpan alamat yang dimasukkan ke database, saya akan berbicara secara singkat tentang membuat database dan tabel itu sendiri, serta kode file save.php yang dijanjikan, yang berfungsi dengan database MySql.

Untuk ini kita perlu server lokal, saya menggunakan Denwer. Pasti banyak orang yang menggunakannya, jadi saya tidak akan membahasnya secara detail. Kami lulus phpMyAdmin, dan buat database surel:

Untuk menyimpan alamat pelanggan, kita membutuhkan satu tabel dengan dua bidang, sebut saja alamat:

Bidang akan menjadi sebagai berikut:

  • Indo- pengenal alamat email(alias kunci utama);
  • alamat- langsung alamat email itu sendiri.

Simpan.php file

Sekarang saatnya berbicara tentang elemen terakhir dari langganan yang dibuat, tentang file save.php. Ini berisi skrip PHP untuk menyimpan alamat email ke database.

1
2
3
4
5
6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];)
$db = mysql_connect("localhost", "root", "");
mysql_select_db("email", $db);
permintaan_mysql ( "INSERT INTO address (alamat) VALUES (" $ email ")", $db);
?>

Pertama, kami memeriksa apakah variabel email ada di array POST global, jika demikian, maka tetapkan nilainya ke variabel lokal $ email. Selanjutnya kita buat koneksi ke server mysql_connect(), user root, tidak ada password. Memilih database surel dan jalankan query ke database, masukkan record baru ke dalam tabel alamat, dimana nilai variabel $ email akan disisipkan ke dalam field alamat. Itu saja!

Ini menyimpulkan pelajaran. Saya ingin mengingatkan Anda bahwa langganan ini hanya berfungsi di server (karena kami menggunakan basis dan).

Halo. Dalam tutorial ini kita akan membuat bentuk yang lengkap. masukan, dan itu akan muncul di jendela modal dengan mengklik tombol di halaman. Saya melakukan pelajaran ini sendiri, dari awal, hanya menggunakan kerangka kerja jQuery dan satu JavaScript kecil "th. Pelajarannya sangat menarik, jadi tolong jangan lewat! Di bawah ini Anda dapat melihat demo dari formulir yang dihasilkan, serta mengunduh file yang diperlukan untuk bekerja:

Langkah 1. gambaran umum dan cara kerja formulir umpan balik:

Pertama, saya akan memberi tahu Anda file apa yang kami butuhkan dan, pada kenyataannya, mengapa mereka dibutuhkan:

  • gambar-gambar- folder tempat semua gambar formulir kami disimpan;
  • index.html- file "indeks" utama di mana tombol untuk memanggil formulir umpan balik akan ditempatkan;
  • kontak.html- file yang berisi formulir itu sendiri. File inilah yang akan dihubungkan ke jendela modal;
  • kirim.php- file-handler, yang bertanggung jawab untuk mengirim surat;
  • jquery.js- kerangka kerja jQuery utama;
  • style.css- file dengan lembar gaya berjenjang untuk formulir kami.

Jadi, mari kita melangkah lebih jauh dan berurutan ... Pekerjaan formulir adalah sebagai berikut: Pengguna memasuki halaman di mana tombol untuk memanggil jendela modal berada, mengkliknya, kemudian formulir muncul, di dalamnya pengunjung memasukkan semua data dan teks pesan dan mengirim, kemudian ditransfer ke halaman dengan pesan tentang pengiriman surat yang berhasil atau tidak berhasil. Itu saja, dan sekarang mari kita mulai mengeset formulir kita ...

Langkah 2. Tombol untuk memanggil formulir.

Agar jendela modal kita dengan formulir muncul, Anda perlu memaksanya untuk melakukannya. Untuk melakukan ini, kita hanya perlu menempatkan tombol biasa di halaman. Kode untuk tombol seperti itu ditunjukkan di bawah ini, bersama dengan gaya yang diterapkan padanya:

Langkah 3. Formulir itu sendiri + pengaturan untuk itu

Sekarang mari kita cari tahu di mana formulir umpan balik kami akan ditempatkan. Dan itu akan ada di file kontak.html, yang sudah ada di kode sumber pelajaran. Formulir ini cukup kecil, jadi saya akan menempatkan kodenya di bawah ini:

Mengirim Pesan ke Administrasi:



*Nama:
* Surel:
Tema:
*Pesan:

Seperti yang Anda lihat, menelusuri kode, bahkan dengan mata telanjang, Anda dapat melihat bahwa untuk tampilan formulir yang lebih baik, saya menggunakan tata letak tabel. Ini sangat berguna bagi saya untuk menyamakan semua bidang formulir.

Langkah 4. Handler yang bertanggung jawab untuk mengirim email

Di sini, saya akan segera memperkenalkan Anda ke master mail handler. Saya tidak akan memberikan kodenya di sini, karena ada dalam kode sumber. Unduh dan lihat isinya. Jika Anda tahu php di suatu tempat di tingkat menengah, seperti saya, maka Anda dapat dengan mudah mengurai semua kode handler ini sendiri. Jika semuanya sudah siap, maka lanjutkan ...

Langkah 5. Memutar kerangka kerja jQuery utama

Sekarang, seperti halnya tutorial jQuery, kita perlu "memasak" kerangka kerja jQuery utama. Untuk melakukan ini, mari kita kembali sedikit, ke tempat tombol kita berada, dan di antara tag dan masukkan kode berikut:

Langkah 6. Menata bentuk

Seperti yang Anda lihat, gaya untuk formulir kami dirender secara terpisah, dalam file style.css karena gaya ini memakan terlalu banyak ruang. Kami hanya perlu mengikat kode di bawah ini ke file indeks kami:

Langkah 7. tweak jQuery

Sekarang untuk pekerjaan penuh dari jendela formulir modal, kita harus memasukkan kode jQuery berikut:

Kesimpulan.

Jadi formulir umpan balik kami yang menarik sudah siap. Jalannya panjang dan sulit, jadi jika ada yang tidak mengerti sesuatu, saya akan mendengarkan pertanyaan Anda di komentar untuk pelajaran ini. Dan itu saja untuk saya, sampai kita bertemu lagi, teman-teman!

Hormat kami jQuery - panduan - M.K.

Kita semua terbiasa melihat kontak di halaman terpisah yang dibuat khusus untuk umpan balik pengguna. Sebagai aturan, di halaman seperti itu, selain formulir kontak, mereka memposting banyak informasi lain untuk interaksi dan komunikasi. Mekanisme ini di-debug, terbukti selama bertahun-tahun dan bekerja dengan sempurna. Tetapi dalam beberapa kasus menjadi perlu untuk menampilkan yang terpisah formulir kontak sebagai jendela pop-up tanpa mengarahkan pengguna ke halaman lain.
Pada suatu waktu, kami mempertimbangkan untuk bekerja dengan jQuery. Hari ini, saya ingin memperkenalkan Anda dengan solusi menarik untuk membuat formulir kontak pop-up terpisah yang dirancang asli untuk situs.

Menurut pendapat saya, contoh yang bagus dari sarana interaksi dengan pengguna.

Kami melihat sebuah contoh. Sekarang, mari kita urai bentuk ini menjadi komponen-komponennya, dari penciptaan struktur keseluruhan di HTML, sebelum membentuk tampilan layout menggunakan CSS.

Kode HTML formulir

Tidak ada yang supernatural, kerangka paling sederhana dari formulir kontak biasa, ditempatkan di elemen blok div dengan pengidentifikasi dan kelas tertentu, untuk lebih membentuk tampilan formulir di css dan berinteraksi dengan javascript kecil yang kita butuhkan untuk mengaktifkan dan menutup formulir popup.

Menutup

Kirimi kami pesan

Menutup

Kirimi kami pesan

Juga, kita perlu membuat lapisan bayangan untuk latar belakang umum, saat mengaktifkan bentuk pop-up. Anda dapat menyelesaikan tugas ini dengan cara yang berbeda, tetapi kami tidak akan terlalu pintar dan menambahkan satu lagi div dengan menetapkan pengenal: id = "fade" dan kelas: class = "black-overlay". Anda dapat menempatkannya di sebelah formulir agar tidak mencari waktu yang lama jika perlu.

Masukan

Anda mungkin memperhatikan bahwa tombol tutup tertulis di blok formulir kontak, tepat sebelum judul, dan ini logis, tetapi di mana lagi seharusnya, tombol itu akan muncul dan menghilang bersama dengan formulir. Penampilan dan posisi tombol close, selanjutnya akan kita bentuk di CSS

Itu saja, sekarang mari kita lihat kode-html lengkap halaman yang berisi formulir umpan balik pop-up:

Formulir kontak pop-up Masukan
Menutup

Kirimi kami pesan

Formulir kontak pop-up Masukan

Menutup

Kirimi kami pesan

Sebelum kita sampai ke bagian yang menyenangkan, menata formulir kontak kita dengan CSS, saya akan mundur sedikit. Yang paling penuh perhatian, mungkin memperhatikan bahwa tombol untuk membuka dan menutup formulir diimplementasikan sebagai tautan dengan "jammer" href = "javascript: void (0)". Baik atau buruk, saya belum menemukan jawaban yang tepat untuk diri saya sendiri, saya menggunakan metode ini karena kebiasaan. Meskipun untuk elemen di mana acara onclick diproses oleh skrip, saya pikir itu lebih logis dan benar untuk digunakan