Karena banyaknya permintaan dari pengguna, kami menemukan solusi pribadi untuk implementasi yang muncul saat Anda mengklik tombol (misalnya, “Pesan panggilan”).

Untuk menambahkan formulir pop-up ke halaman arahan Anda:

1. Masuk ke editor halaman tempat formulir harus disematkan.

2. Untuk menyelesaikan konflik perpustakaan jQuery, salin kode yang diposting oleh , dan tempelkan melalui alat Scripts, atur posisinya menjadi "Setelah tag:

3. Menggunakan alat Tombol, buat tombol:

Tombol ini akan muncul halaman arahan, jadi teks di atasnya harus cocok tindakan sasaran, yang akan mengikuti kliknya (misalnya, “Pesan panggilan!”). Di baris URL, Anda dapat menentukan tautan apa pun (misalnya, ke situs utama), karena hanya diperlukan untuk membuat tombol.

4. Menggunakan alat Bentuk, buat bentuk:

Formulir akan muncul setelah mengklik tombol; nama label harus sesuai dengan tindakan yang ditargetkan (misalnya, “Nama” dan “Telepon” untuk tombol “Pesan panggilan!”).

7. Temukan baris dalam kode:

Dalam hal ini, Anda perlu mengubah nilai ID untuk setiap elemen.

8.1 Pada ID nomor 1 di screenshot Anda harus memasukkan ID formulir. Untuk melakukan ini, klik sekali pada kolom formulir, buka tab "Lanjutan" pada menu "Properti" di sebelah kanan dan salin "ID Jangkar":

8.2 Pada baris 2 pada tangkapan layar Anda harus memasukkan ID tombol yang terkait dengan formulir.
8.3 Pada baris 3 pada tangkapan layar - ID tombol yang akan ditampilkan pada halaman.

Itu saja. Formulir pop-up sudah siap.

Jika mau, Anda dapat mengubah tampilannya

Salam kepada para pembaca saya, saya telah memperoleh pengalaman dan akan memberi tahu Anda tentang prinsip-prinsip pengoperasian formulir umpan balik koneksi 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 setidaknya memiliki sedikit pemahaman tentang HTML/CSS karena... Anda harus menyeret kode ke halaman Anda dengan analogi. bahasa PHP Kami tidak akan membahasnya, saya akan menunjukkan kepada Anda semua pengeditan 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)

PEMBARUAN2: Versi 3.0 Pendaratan Adaptif+ formulir ajax dengan transmisi tag UTM, baca dan lihat. Anda akan menyukainya

Saya teringat diri saya sendiri ketika pertama kali mencoba membuat cetakan sendiri masukan di php, dan sejujurnya itu memakan banyak tenaga, karena... Saya tidak mengerti apa dan bagaimana yang terjadi. Kesabaran dan ketekunan, teman-teman, dan Anda akan berhasil.

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 misalnya menyediakan popup jendela modal di halaman dan lain-lain efek visual
• index.html - file indeks halaman satu halaman kami
• index1.php - file handler tempat nilai-nilai dari formulir ditransfer, kemudian sebuah surat dibuat dari variabel yang diterima dan dikirim ke yang ditentukan alamat email. 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)

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

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

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)*/

Panggil jendela dan masukkan data untuk pemeriksaan tes formulir kami

Izinkan saya mengingatkan Anda sekali lagi, hosting Anda harus mendukung pemrosesan php file, 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

Itu saja bagi saya, saya mencoba menyampaikan makna dan pengoperasian naskah dengan cara terbaik. Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya di komentar atau di VK (lihat detail kontak). Saya berharap Anda mudah dan pekerjaan produktif Untukmu.

Halo pembaca yang budiman, dalam artikel ini saya akan menunjukkan cara membuat formulir kontak popup di situs WordPress Anda. Seringkali, ketika mengembangkan situs web atau blog Anda sendiri, penting untuk membangun kemampuan berkomunikasi dengan cepat dengan pengunjung sumber daya Internet. Dalam hal ini, formulir umpan balik pop-up untuk WordPress akan berguna, yang akan membantu membangunnya kontak cepat dengan pengguna.

Mari kita lihat mengapa formulir ini diperlukan

Bonus tambahan: formulir mudah dimodifikasi dan disesuaikan dengan kebutuhan situs Anda. Formulir umpan balik pop-up untuk WordPress dapat disajikan dalam bentuk jendela pembuka untuk memesan panggilan, layanan atau produk, atau membuat langganan. Jika diinginkan, Anda dapat menambahkan efek visual, berbagai gambar, dll.

Mari kita lihat alat yang diperlukan untuk mengembangkan popup di wordpress - aplikasi khusus untuk pengembangan dan pembuatan situs web.

Plugin ini digunakan langsung untuk mendesain form. Untuk menginstalnya, ikuti langkah-langkah berikut:

Plugin ini cocok untuk mengembangkan efek jendela pop-up. Urutan instalasi Easy FancyBox mirip dengan instalasi plugin sebelumnya.

Anda dapat mengonfigurasi pengaturan add-on Easy FancyBox melalui file media. Gunakan opsi menu "Pengaturan" -> "File media".

Di blok yang terbuka tepat di bawah pengaturan standar Parameter plugin itu sendiri akan ditempatkan. Biasanya ada tanda centang di sebelah item “Gambar”, yang menunjukkan bahwa jendela pop-up akan diaktifkan ketika Anda mengklik gambar. Dianjurkan untuk menghapusnya, karena jika ada yang lain alat tambahan Saat membuat animasi pop-up, gambar akan terbuka dua kali.

Tapi bukan itu saja. Centang kotak di samping “Konten sebaris”

Siapa pun dapat mempelajari lebih jauh pengaturan plugin dan mengaturnya sesuai kebijaksanaan mereka sendiri.

Tip: jika Anda ingin formulir selalu terbuka, hapus centang pada opsi “Tutup FancyBox saat overlay diklik” di pengaturan Easy FancyBox, yang akan menutup jendela saat Anda mengklik di luarnya.

Nah, dengan “membosankan” persiapan awal Itu saja, sekarang mari kita beralih ke bagian "enak" - bagaimana sebenarnya formulir umpan balik pop-up WordPress dikembangkan.

Di mana kita mulai? Tentu saja dengan telah ditentukan sebelumnya formulir itu sendiri. Pilih “Formulir Kontak 7” di menu sebelah kanan, lalu opsi “Tambahkan baru”.

Buatlah nama baru untuk formulir tersebut, misalnya, "Eksperimen", masukkan nama tersebut ke dalam kolom input di jendela yang terbuka, di mana teks "Judul" berada, dan klik tombol "Simpan". Anda bisa mengubah parameter lainnya, termasuk Templat formulir itu sendiri, tapi kami tidak akan menyentuhnya. Sekarang milik kita tujuan utama– pelajari saja cara membuat formulir pop-up.

Lihatlah hasilnya. Seperti yang Anda lihat, plugin menghasilkan kode pendek khusus yang digunakan untuk menampilkan formulir selanjutnya. Anda perlu menyalinnya.

Sekarang mari kita mulai pemrograman. Baru kode program dapat disisipkan di mana saja di situs, misalnya di “Kontak”, dan lain-lain. Dalam contoh kita bentuk baru akan ditampilkan di widget. Pilih dari menu secara berurutan " Penampilan", lalu klik "Widget", lalu di jendela yang terbuka, klik opsi "Teks".

Sekarang klik tombol “Tambahkan Widget”.

Rekatkan kode berikut ke dalam kolom input Konten:

Tulis surat Teks awal Teks akhir

Hasil yang akan dihasilkan akan seperti ini:

Harap dicatat bahwa alih-alih kode pendek yang ditentukan dalam contoh, Anda harus menentukan kode pendek yang Anda buat sebagai hasil pembuatan formulir baru.

Selain itu, formulir dapat diedit: menambah atau menghapus kolom masukan, memasukkan teks awal dan/atau akhir sebelum dan sesudah formulir, mengubah teks menjadi judul atau menampilkannya sebagai blok terpisah, menggunakan gaya berbeda, placeholder, dll. Andai saja ada waktu dan keinginan!

Mari kita lihat juga dua cara mengubah tautan menjadi tombol untuk meningkatkan tampilan visualnya.

Metode 1: Menggunakan gaya tema tambahan.

Kode berikut dapat dimasukkan sebagai berikut:

Kode programnya sendiri terlihat seperti ini:

/***Menampilkan tautan dalam bentuk tombol****/ .contact-us a( margin:auto; /*menjajarkan blok di tengah*/ display:block; width:199px; /*ukuran tombol*/ padding:11px 22px ; /*padding dalam*/ batas:1px hitam pekat; /*warna batas*/ latar belakang:#3399ff; /*pola latar belakang*/ dekorasi teks:tidak ada; memusatkan teks*/ color:#ffffff; /*warna teks*/ -moz-transition: semua kemudahan 0,6 detik; -webkit-transition: semua transisi 0,6 detik: semua kemudahan 0,6 detik) /**Ubah tautan berwarna saat mengarahkan kursor**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transisi: semua kemudahan 0,6 detik; -transisi webkit: semua kemudahan 0,6 detik;

Hasilnya adalah tombol seperti ini:

Kode sudah menyebutkan parameter mana yang bertanggung jawab atas apa. Sekarang setiap orang dapat mengedit kode sesuai kebijaksanaan mereka sendiri, bereksperimen gaya yang berbeda dan warna serta membuat tautan yang paling sesuai untuk popup.

Metode 2 – gunakan gambar sebagai tombol. Pertama, unggah gambar yang diperlukan ke situs (gambar apa pun yang Anda suka, tidak harus dalam bentuk tombol - tidak masalah). Untuk melakukan ini, klik “Media” -> “Tambah Baru” dan pilih gambar yang diinginkan. Di sebelah kanan gambar akan muncul tautan permanen per file (dalam dalam contoh ini http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), salin dan tambahkan ke kode (jangan hapus tanda kutip):

Tambahkan kode yang dihasilkan ke kode keluaran utama formulir alih-alih teks “Tulis surat”.

1

Situs web saya menampilkan tombol yang ditunjukkan pada gambar di bawah:

Seperti inilah tampilan tombolnya jika dibiarkan gaya tambahan dijelaskan dalam metode pertama:

Agar formulir umpan balik pop-up untuk WordPress dipanggil langsung dari menu, Anda perlu menggunakan dengan kode berikut

Pertama, Anda perlu mencari tahu di mana tepatnya Anda perlu memasukkan kode ini. Buka "Editor" melalui "Penampilan" dan di antara templat pilih "Header (header.php)"

Sekarang cari tempat dimana kode menu berada. Menemukan informasi berikut:

Di bawah, tempelkan kode Anda tepat sebelum tag penutup.

Secara umum, tidak ada yang sulit dalam menambahkan formulir kontak ke situs Anda, yang utama adalah memiliki waktu luang dan keinginan untuk mempelajari semua aspek secara menyeluruh. Sekarang Anda tahu apa itu formulir kontak, mengapa diperlukan, cara menggunakannya di situs, dan cara memproses tautan untuk memanggil jendela dengan efek pop-up. Semoga sukses dan sukses dalam bisnis pembuatan situs web yang sulit namun mengasyikkan ini.

Halo semuanya. 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 sudah banyak hal seperti ini di Internet, tetapi karena orang bertanya, saya memutuskan untuk melakukannya. Selain itu, fungsi tersebut harus ada di hampir setiap halaman arahan untuk mengimplementasikan sebuah tombol menelepon 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, tapi saya menyarankan Anda pilihan yang sudah jadi di sumbernya. 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:

Tinggalkan permintaan

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) ( // Teks keluaran hasil pengiriman $(formNm).html(data); function (jqXHR, teks, error) ( // Menampilkan teks kesalahan pengiriman $(formNm).html(error); ) ) );

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 e-mail 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 beruntung semuanya!

Teman-teman, saya mendorong Anda untuk menguji formulir tersebut secara nyata atau server maya(menjadi tuan rumah). Harap pastikan server Anda mendukung PHP, Anda memiliki paket berbayar dan tidak periode ujian. DI DALAM jika tidak, dalam 90% kasus, formulir 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 yang diperbarui artikel berada

Pada artikel ini saya akan mengajari Anda cara melakukannya bentuk wordpress tiga jenis umpan balik. Saya sudah lama tidak menulis topik teknis, saya hanya merasa ingin melakukannya. Mari kita lihat metode apa saja yang ada dan bagaimana menerapkannya.

Ini sangat alat yang bagus bagi seorang blogger, menambah fungsi WordPress tidak hanya berkomentar, tetapi juga memberikan feedback melalui email. Formulir umpan balik saya berada. Saya akan menjelaskan cara melakukannya dalam tiga cara:

• Kode, untuk tingkat lanjut.
• Pengaya.
• Menggunakan layanan.
• Masukan munculan
Formulir umpan balik WordPress menggunakan kode tanpa plugin

Formulir umpan balik WordPress akan dikembangkan di templat halaman. File page.php di folder tema bertanggung jawab atas hasilnya.

Saya segera memperingatkan Anda, templat setiap orang berbeda, sehingga halaman dapat dihasilkan menggunakan file yang berbeda.

Itu terletak di folder dengan tema aktif Anda, Anda perlu membukanya di editor apa pun, saya akan menunjukkannya dengan jelas di sini. Pertama, saya akan menunjukkan kepada Anda isi halaman.php saya.

Halaman: ()

Di bagian paling atas kode ini kami menempatkan serangkaian perintah berikut.

Sekarang lebih sulit, Anda perlu menemukan tempat di contoh pertama di mana konten dikeluarkan; sebuah garis biasanya bertanggung jawab untuk fungsi ini.

Sebagai gantinya kami memasukkan perintah ini.

Terima kasih, pesan Anda telah terkirim.