Hello. Dalam tutorial ini kami akan membuat borang penuh maklum balas, dan ia akan muncul dalam tetingkap modal apabila anda mengklik pada butang pada halaman. Saya melakukan pelajaran ini sendiri, dari awal, hanya menggunakan rangka kerja jQuery dan satu JavaScript kecil. Pelajaran ini sangat menarik, jadi tolong jangan lepaskannya! Di bawah anda boleh melihat demonstrasi borang yang saya buat, dan juga memuat turun fail yang diperlukan untuk kerja:

Langkah 1. Deskripsi umum dan cara borang maklum balas berfungsi:

Pertama, saya akan memberitahu anda apakah fail yang kami perlukan dan, sebenarnya, mengapa ia diperlukan:

• imej - folder di mana semua imej borang kami disimpan;
• index.html - fail "indeks" utama di mana butang untuk memanggil borang maklum balas akan ditempatkan;
• contact.html ialah fail yang mengandungi borang itu sendiri. Fail inilah yang akan disertakan dalam tetingkap modal;
• send.php - fail pengendali yang bertanggungjawab untuk menghantar surat;
• jquery.js - rangka kerja jQuery utama;
• style.css ialah fail dengan helaian gaya berlatarkan untuk borang kami.

Jadi, mari kita teruskan dan mengikut urutan... Borang akan berfungsi seperti berikut: Pengguna pergi ke halaman yang terdapat butang untuk memanggil tetingkap modal, menekannya, kemudian borang muncul, di mana pelawat memasukkan semua data dan teks mesej dan dihantar, kemudian ia dialihkan ke halaman dengan mesej tentang penghantaran surat yang berjaya atau tidak berjaya. Itu sahaja, sekarang mari kita mula meletakkan borang kita...

Langkah 2. Butang untuk memanggil borang.

Supaya, kami tetingkap modal muncul dengan borang, anda perlu memaksanya untuk melakukannya. Untuk melakukan ini, kita hanya perlu meletakkan butang biasa pada halaman. Kod untuk butang sedemikian ditunjukkan di bawah, bersama-sama dengan gaya yang digunakan padanya:

Tulis mesej kepada pentadbir

Langkah 3. Borang itu sendiri + tetapan untuknya

Sekarang mari kita fikirkan di mana borang maklum balas kami akan ditempatkan. Dan ia akan terletak dalam fail contact.html, yang telah pun terdapat dalam kod sumber pelajaran. Borang ini Ia agak kecil, jadi saya akan meletakkan kodnya di bawah:

Menghantar Mesej kepada Pentadbiran:

*Nama: *E-mel: Subjek: *Mesej:

Seperti yang anda lihat, melalui kod, walaupun dengan mata kasar anda dapat melihat bahawa untuk memaparkan borang dengan lebih baik, saya menggunakan susun atur jadual. Ini sangat berguna untuk saya menyamakan semua medan borang.

Langkah 4. Pemproses bertanggungjawab untuk menghantar surat

Di sini saya akan memberitahu anda dengan cepat tentang pemproses utama untuk menghantar surat. Saya tidak akan memberikan kodnya di sini, kerana ia ada dalam kod sumber. Muat turun dan lihat kandungannya. Jika anda tahu PHP di suatu tempat pada tahap pertengahan, seperti saya, maka anda boleh menghuraikan sendiri keseluruhan kod pengendali ini dengan mudah. Jika semuanya sudah siap, teruskan...

Langkah 5. "Memasukkan" rangka kerja jQuery utama

Sekarang, seperti dalam mana-mana pelajaran jQuery, kita mesti "menarik" rangka kerja jQuery utama. Untuk melakukan ini, mari kita kembali sedikit, ke tempat butang kita terletak, dan antara tag dan masukkan kod berikut:

Langkah 6: Menggayakan Borang

Seperti yang anda lihat, gaya untuk borang kami diletakkan secara berasingan dalam fail style.css, kerana gaya ini mengambil terlalu banyak ruang. Kami hanya perlu memautkan kod di bawah ke fail indeks kami:

Langkah 7. penambahbaikan jQuery

Sekarang untuk kerja penuh Dalam tetingkap modal borang, kita mesti memasukkan kod jQuery berikut:

$(function() ($("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":kosong")) ( wrap.load(this.getTrigger().attr("href")); ) )); ));

Kesimpulan.

Borang maklum balas menarik kami sudah sedia. Jalannya panjang dan sukar, jadi jika ada yang tidak memahami apa-apa, saya akan mendengar soalan anda dalam ulasan pelajaran ini. Dan itu sahaja untuk saya, jumpa lagi, kawan-kawan!

Dengan hormat yang tulus, panduan jQuery anda - M.K.

Terdapat banyak pemalam WordPress untuk membuat borang hubungan di blog atau tapak web anda. yang paling ketara daripada mereka, ia membolehkan anda membenamkan Borang hubungan terus ke dalam rakaman dan halaman WordPress(sementara banyak pemalam memaksa anda untuk menggunakan templat tersuai ke halaman, dengan itu mengehadkan penyuntingannya).

Membenamkan borang pada halaman biasanya mencukupi, tetapi bagaimana jika anda mahu borang itu muncul dalam pop timbul apabila pengguna mengklik pautan Hubungi Kami? Untuk merealisasikan keinginan sedemikian, anda perlu menggunakan dua Pemalam WordPress pada masa yang sama: Easy FancyBox

1. Pertama sekali, pasang pemalam dan Easy FancyBox.

2. Untuk kesederhanaan kita akan gunakan Borang hubungan Borang 7, sudah dibuat oleh pemalam itu sendiri semasa pemasangan untuk contoh. Pada halaman tetapan Borang Kenalan, ambil kod borang, yang perlu anda salin dan tampal editor WordPress untuk membuat borang.

3. Cipta halaman baharu dalam WordPress. Untuk menambah borang hubungan, anda perlu menampal kod dalam kurungan segi empat sama dari halaman tetapan Borang Kenalan 7 ke halaman anda. Pastikan untuk menampal kod dengan betul, sama seperti pemalam memaparkannya.

4. WordPress anda kini mempunyai borang hubungan. Kami memutuskan untuk membuatnya muncul dalam tetingkap modal selepas pengguna mengklik pada pautan. Pemalam Easy FancyBox mula dimainkan. Dengan bantuannya, anda boleh membuat sebarang elemen halaman muncul dalam pop timbul. Buka suntingan halaman, klik pada tab TEKS dan tambah kod HTML berikut:

Hubungi Kami

5. Itu sahaja, kini kami mempunyai pautan yang "melancarkan" borang hubungan dalam tetingkap pop timbul. tahniah! Anda mungkin perlu mengubah suai CSS borang e-mel anda untuk mendapatkan lebar, ketinggian dan mesej e-mel untuk dipaparkan dengan betul. kemungkinan kesilapan apabila mengisi. Ini sepatutnya cukup untuk anda mulakan.

Baru-baru ini, untuk satu tapak, saya telah diminta untuk membuat borang maklum balas untuk WordPress dalam tetingkap modal. Iaitu, apabila mengklik pada pautan "tulis kepada kami", bukannya pergi ke halaman yang sepadan, pengguna harus membuka tetingkap pop timbul baharu, di mana fungsi menghantar mesej akan ditempatkan. Ini adalah penyelesaian yang lebih interaktif, walaupun tidak semua orang menyukainya. Saya secara peribadi lebih suka pelaksanaan klasik dengan halaman kenalan, tetapi borang di tapak adalah berbeza - jadi adalah berguna untuk mempertimbangkan penyelesaian kepada masalah ini. Dalam kerja saya, saya menggunakan 2 pemalam: Borang Perhubungan 7 yang terkenal dan modul Modal Mudah untuk mencipta tetingkap modal dalam WordPress.

Kemas kini 05/18/2017: Berdasarkan ulasan terkini dalam repositori, dalam beberapa kes mungkin terdapat masalah dengan operasinya. Jika anda juga dipengaruhi oleh perkara ini, cuba penyelesaian baharu daripada pembangun yang dipanggil Popup Maker. Alternatif lain boleh dipertimbangkan.

Saya tidak akan menerangkan secara terperinci tentang memasang dan mengkonfigurasi Borang Hubungan 7; semua maklumat mengenainya ada di sini. Blog itu juga mempunyai artikel tentang perkara yang mungkin berguna.

Mari beralih terus ke modul Easy Modal. Awak akan jumpa dia. Pemaju mendakwa bahawa ini Keputusan terbaik mencipta tetingkap modal di tapak dengan pelbagai pilihan menarik untuk menyampaikan kandungan.

Lebih 10 ribu muat turun, rating 4.6. Versi 3.4 yang sah ialah 4.0.8, walaupun saya berjaya menjalankannya pada WP 4.3.1. Walaupun fakta bahawa pemalam itu kini telah diubah menjadi penyelesaian Popup Maker baharu, di tapak web wordpress.org dan apabila mencari pemalam di dalam panel pentadbir, anda masih boleh menemui Easy Modal versi 2.0.17 yang biasa. Menggunakan contoh beliau, saya akan memberitahu anda tentang membuat tetingkap maklum balas modal dalam WordPress.

Selepas pemasangan, bahagian dengan nama yang sama akan muncul, di mana terdapat beberapa item. Kami akan memerlukan yang pertama daripada mereka - Modal. Klik pada butang Tambah Baru di sana.

Tindakan ini akan mencipta tetingkap modal baharu untuk tapak WordPress anda. Tetapan elemen akan mempunyai 4 tab:

• Am—parameter am.
• Pilihan Paparan - pilihan paparan.
• Tutup Pilihan - tetapan untuk menutup tetingkap (menggunakan klik atau butang Esc).
• Contoh - contoh kod untuk digunakan.

Tetapan umum mengandungi nama tetingkap (tidak dipaparkan di tapak), tajuk, kandungan dan jenis muat turunnya. Dalam blok kandungan, beralih kepada mod HTML, tambahkan kod pendek borang maklum balas anda dalam tetingkap modal.

taip Muatkan Jenis mempunyai 2 pilihan:

• Muatkan Seluruh Tapak (untuk keseluruhan tapak).
• Setiap Halaman/Siaran (untuk siaran dan halaman tertentu).

Pilihan yang sangat menarik. Jika anda memerlukan tetingkap pop timbul yang akan dipaparkan pada semua halaman tapak (contohnya pautan terletak di bar sisi), kemudian pilih pilihan pertama. Dalam kes kedua, blok tetapan yang sepadan akan muncul pada halaman/siaran tapak semasa mengedit:

Anda boleh mengaktifkan dan memilih tetingkap pop timbul anda sendiri untuk halaman tertentu. Jika anda tidak menandai kotak, elemen tidak akan dimuatkan di tapak.

Tab kedua parameter modul ialah Pilihan Paparan.

Di sini anda menunjukkan:

• saiz tetingkap - automatik, sederhana, penyesuaian, kecil, besar, dll.;
• latar belakang - anda boleh menggunakan latar belakang untuk borang atau memaparkannya tanpa ia;
• animasi tetingkap pop timbul;
• kedudukan (lokasi) - tengah atas, kanan bawah, dll.; tetap atau tidak;
• lekukan di bahagian atas skrin.

Contoh memaparkan output tetingkap modal dalam WordPress menggunakan pemalam Easy Modal boleh didapati dalam tab terakhir.

Anda perlu memasukkan kod ini melalui widget di bar sisi atau dalam editor teks. Ia tidak berbeza daripada mana-mana kod HTML lain, satu-satunya perkara ialah kelas tetingkap modal tertentu (eModal-1) ditunjukkan di sini. Untuk elemen kedua yang anda buat, kelasnya ialah eModal-2, dsb. Untuk mengelakkan kesilapan semasa memasukkan kod, cara paling mudah ialah menyalinnya dari halaman ini.

Mengedit tema tetingkap modal

Dalam pemalam Easy Modal, sebagai tambahan kepada tetapan untuk unsur tertentu Anda boleh menentukan tema untuk tetingkap timbul (Tema). Dalam asas versi percuma Modul ini hanya mempunyai satu templat, tetapi ini lebih daripada mencukupi.

DALAM alat ini 6 penanda buku:

• Umum - nyatakan nama topik;
• Tindanan — latar belakang (di sini anda boleh memilih warna dan ketelusan latar belakang borang);
• bekas tetapan yang berbeza tetingkap modal itu sendiri (padding, bingkai, bayang);
• Tajuk—parameter tajuk tetingkap timbul (fon, bayang);
• Kandungan — fon dan warna teks dalam blok;
• Tutup - bentuk elemen penutup (teks dan reka bentuk).

Seperti yang anda lihat, penampilan boleh disesuaikan mengikut keperluan anda. Saya berakhir dengan borang WordPress mudah ini dalam tetingkap modal:

Selepas menetapkan semua tetapan, jangan lupa untuk menyimpannya (klik butang Simpan).

Video menambah Borang Perhubungan 7 dalam pop timbul Easy Modal

By the way, saya menjumpai video tentang bekerja dengan plugin Easy Modal, menunjukkan proses mencipta tetingkap maklum balas modal dalam WordPress. Di sana, antara muka modul agak ketinggalan zaman (sesetengah tetapan kelihatan berbeza), tetapi anda boleh mendapatkan intipati umum. Mungkin akan lebih mudah bagi seseorang untuk memahami tisu ini menggunakan video.

Jumlah tentang tingkap modal untuk WordPress

Seperti yang dinyatakan di atas, kini plugin Easy Modal (berdasarkan Halaman Rasmi) ditukar kepada Pembuat Popup. Saya berjaya mencari modul dengan nama yang sama dalam repositori, tetapi saya tidak mengujinya. Saya memberitahu anda tentang perkara ini supaya anda tahu apa yang perlu dicari jika Easy Modal dalam WordPress dalam versi berikutnya tiba-tiba berhenti berfungsi.

Kedua-dua penyelesaian adalah percuma, walaupun mereka mempunyai alat tambah berbayar. Ia membolehkan anda menyesuaikan penyasaran, menambah lebih banyak tema reka bentuk, mengandungi analitik dan beberapa ciri lain. Jika anda memerlukan mekanisme tetingkap modal yang lebih maju, anda boleh melihat lebih dekat pada sambungan ini.

Bagi tugas membuka borang maklum balas Borang Perhubungan 7 dalam tetingkap pop timbul, sudah cukup keupayaan asas Modal Mudah. Lebih-lebih lagi keputusan ini juga boleh digunakan untuk memaparkan tetingkap modal lain dalam WordPress - petua berguna, maklumat tambahan dan sebagainya. Memandangkan kehadiran seorang editor Sisipan HTML kod, anda boleh memaparkan video, borang, dsb. dalam tetingkap timbul. Secara keseluruhan, pemalam yang berguna. Jika anda mempunyai sebarang soalan mengenainya, tulis dalam komen.

Selamat petang kawan-kawan! Dalam tutorial ini saya akan mengajar anda cara membuat borang kenalan di WordPress menggunakan pemalam. Borang maklum balas di WordPress berfungsi penyelesaian yang ideal bagi mereka yang ingin mengekalkan hubungan dengan penonton mereka atau menerima permohonan untuk E-mel untuk memesan sebarang perkhidmatan. Kami akan belajar cara membuat borang pop timbul dalam tetingkap modal. Selepas membaca artikel ini, anda akan dapat membenamkan borang di tapak web anda sendiri. Jadi, mari pergi.

Mengapa anda memerlukan borang hubungan WordPress?

Anda mungkin tertanya-tanya mengapa saya memerlukan borang maklum balas untuk tapak WordPress? Mengapa tidak hanya menambah alamat e-mel pada tapak supaya orang ramai boleh menulis kepada saya?

Ini adalah soalan yang paling biasa daripada pemula yang takut untuk menambah kod borang ke tapak web tanpa pengetahuan pengaturcaraan. Malah, anda tidak memerlukan sebarang kod sama sekali semasa membuat borang hubungan dalam WordPress. Dalam tutorial ini, kami akan mencipta borang kenalan langkah demi langkah supaya pemula yang paling lengkap pun boleh melakukannya.

Di bawah ialah 3 sebab utama mengapa menggunakan borang adalah lebih baik daripada hanya menambah alamat e-mel ke tapak.

• – bot spam dengan keteraturan yang dicemburui menggunakan parser mereka untuk mengambil alamat e-mel yang terdapat sebutan domain mel dan tambahkannya ke pangkalan data mereka supaya mereka kemudiannya boleh menghantar surat-menyurat yang tidak diingini kepada anda. Sebaliknya, apabila menggunakan borang maklum balas untuk WordPress, anda menyingkirkan masalah e-mel SPAM yang mengatasi peti mel anda.
• Kelengkapan Maklumat – Apabila menghantar mel, orang tidak selalu menghantar semua maklumat yang anda perlukan. Dengan borang hubungan, anda memutuskan medan yang anda perlukan untuk memudahkan pengguna menghantar e-mel kepada anda (nama, e-mel, nombor telefon, ulasan dan banyak lagi).
• Jimat masa – Borang hubungan WordPress akan membantu anda menjimatkan masa. Sebagai tambahan kepada kelengkapan maklumat yang anda minta daripada pengguna dan yang dia akan hantar kepada anda, anda juga boleh menunjukkan perkara yang menanti dalam langkah seterusnya, sebagai contoh, "Permohonan anda akan disemak dalam masa 24 jam" atau Tonton video dan banyak lagi perkara yang bermanfaat.

Di bawah ialah contoh borang hubungan yang akan kami buat dalam tutorial ini.

Mari kita mulakan dengan, tuan-tuan.

Langkah 1: Memilih Pemalam Borang Hubungan Terbaik untuk WordPress

hidup langkah ini Kita perlu memutuskan pemalam borang yang sesuai. Terdapat pelbagai jenis, percuma dan berbayar. Dalam tutorial ini saya akan memberitahu anda tentang pemalam yang berbeza supaya anda mempunyai pilihan yang luas. Dalam kes pertama, pemalam WPForms akan digunakan.

Di bawah ialah sebab mengapa WPForms adalah pemalam terbaik maklum balas:

Pertama, ini adalah pemalam yang paling mesra pemula. Dengan hanya menyeret dan melepaskan blok yang diperlukan, anda boleh membuat borang hubungan dalam beberapa klik.

WPForms Lite adalah percuma sepenuhnya.

Apabila anda bersedia untuk fungsi yang lebih berkuasa dan jika ia benar-benar penting kepada anda, maka anda boleh menaik taraf kepada versi Pro.

Hebat, jika alasan ini ternyata mencukupi dan saya meyakinkan anda, maka kami bergerak ke hadapan.

Langkah 2: Pasang pemalam kenalan Borang WordPress

Untuk tutorial ini kami menggunakan versi Lite kerana ia percuma dan mudah digunakan. Anda boleh memasangnya dengan log masuk ke blog dan pergi ke Plugins - Add New.

Dalam bar carian, taip nama pemalam kami dan klik Pasang sekarang.

Selepas memasang pemalam, pastikan anda mengaktifkannya. Ini ditunjukkan di sini:

Langkah 3: Buat Borang Hubungan dalam WordPress

Jadi, selepas berjaya melengkapkan pengaktifan pemalam, tiba masanya untuk membuat borang maklum balas kami. Untuk melakukan ini, dalam panel pentadbir blog, klik pada tab Menu WPForms dan pergi ke Tambah Baru.

Ini akan membuka pereka Wpforms untuk anda, di mana seret dan lepas mudah Dengan blok yang diperlukan, anda boleh membuat borang hubungan maklum balas WordPress. Secara percuma Versi ringkas Dua templat pra-bina tersedia (kosong dan bentuk mudah). Anda boleh menggunakannya bersama-sama untuk mencipta yang anda perlukan dan sesuai untuk anda. Dalam contoh ini, kami telah memilih pilihan kedua untuk anda, iaitu borang hubungan mudah. Kami akan menambah nama, e-mel dan medan teks padanya.

Anda boleh klik pada setiap medan untuk mengeditnya. Anda juga boleh menyeret dan menyusun semula medan borang menggunakan tetikus anda.

Jika anda ingin menambah medan baharu, cuma pilih medan yang anda perlukan daripada senarai di sebelah kiri dan seretnya ke kawasan kerja.

Apabila semuanya selesai, hanya klik butang Simpan.

Langkah 4: Sediakan Pemberitahuan dan Pengesahan

Sebaik sahaja anda berjaya mencipta borang hubungan dalam WordPress, adalah sangat penting untuk mengkonfigurasi borang pemberitahuan dan pengesahan dengan betul.

Borang pengesahan ialah perkara yang pengguna anda lihat apabila mereka menyerahkan permintaan borang kepada anda. Ini mungkin mesej terima kasih atau anda boleh mengubah halanya ke halaman khas yang lain.

Borang pemberitahuan ialah mesej yang anda terima apabila anda menerima a permohonan baharu atau surat emel daripada tapak WordPress anda.

Anda boleh menyesuaikan kedua-dua medan ini dengan pergi ke Tetapan di dalam pemalam pembina forum WPForms.

Secara lalai, kami tidak menetapkannya untuk menyentuh dan meninggalkan medan Borang Pengesahan dengan mesej "Terima kasih atas permintaan anda" sebagaimana adanya. Walau bagaimanapun, anda mempunyai hak untuk menukarnya kepada teks lain atau mengubah hala pengguna ke halaman berasingan.

Perkara terbaik tentang pemalam ini ialah tetapan lalai sesuai untuk pemula. Mereka tidak perlu memikirkan apa yang perlu dilakukan atau apa yang perlu diubah. Semuanya sangat intuitif dan mudah. Apabila anda pergi ke tetapan pemberitahuan, semua medan akan dipraisi secara dinamik.

Pemberitahuan dihantar secara lalai ke e-mel yang anda tentukan dalam tetapan. Jika anda ingin menukar penerima untuk menghantar pemberitahuan, anda juga boleh menukarnya dengan mudah. Jika anda ingin menunjukkan beberapa alamat e-mel (dinyatakan dengan koma), sila, kad di tangan, seperti yang mereka katakan :)

Medan Subjek E-mel akan diisi secara automatik dengan nama borang anda. Medan nama akan diambil daripada nama pengguna (nama anda). Apabila anda membalas surat, ia akan pergi ke mel dengan nama pengguna yang mengisi borang hubungan.

Langkah 5: Menambah Borang Hubungan WordPress pada Halaman

Pada langkah ini, apabila anda telah membina dan mengkonfigurasikan borang maklum balas, anda perlu membuat halaman "Kenalan" yang berasingan untuknya, di mana anda boleh meletakkannya. Sama ada anda membuat yang baharu atau mengeditnya sudah halaman sedia ada, di mana anda boleh menambahnya.

Kami akan menggunakan kod pendek mudah untuk membenamkan borang pada halaman. Hanya klik pada butang "Tambah borang" dan pilih nama borang anda untuk memasukkannya ke halaman.

Hebat. Sekarang simpan halaman dan buka pratonton untuk melihat perubahan.

Beginilah rupa bentuk secara kasarnya: WordPress ringkas halaman:

Jika anda hanya ingin menambah borang pada halaman, maka tahniah. Semua langkah telah berjaya diselesaikan. Jika anda ingin menambahkannya sebagai widget pada bar sisi, kemudian teruskan di bawah.

Langkah 6: Menambah Borang Hubungan WordPress pada Bar Sisi

Pemalam WPForms disertakan dengan widget borang kenalan terbina dalam yang boleh anda tambahkan pada bar sisi anda atau mana-mana kawasan lain tapak anda (seperti pengaki).

Untuk melakukan ini kita perlu pergi ke bahagian " Penampilan» (Penampilan)-> Widget (Widget). Di sana anda akan melihat widget pemalam borang pra-pasang di sebelah kiri. Kami hanya mengambilnya dan menetapkan susunan paparan dalam seret dan lepas biasa kawasan yang dikehendaki dalam bar sisi.

Langkah seterusnya adalah untuk menentukan nama widget dan simpan. Pergi ke tapak dan lihat hasilnya.

Ini melengkapkan semakan pemalam borang maklum balas WPForms kami. Tetapi, khas untuk anda, saya telah menyediakan satu lagi ulasan pemalam percuma, yang dengannya kami boleh membuat borang maklum balas pop timbul dan semua ciri yang sama seperti dalam yang sebelumnya. Ia dipanggil Borang Perhubungan 7. Ia benar-benar sangat berkuasa dan kad trufnya ialah ianya PERCUMA!

Ia juga boleh dibuat adaptif, iaitu, borang maklum balas akan disesuaikan dengan saiz skrin peranti anda.

Jadi, untuk berjaga-jaga, supaya anda tahu bahawa mereka ada di sana.

Cara membuat borang maklum balas hubungan menggunakan Borang Perhubungan 7

Kami terus memahami isu mencipta borang untuk menerima permohonan daripada tapak web anda. Kami mempunyai satu lagi pemalam borang hubungan WordPress di hadapan yang dipanggil Borang Perhubungan 7. Mari pasangkannya di blog kami dan aktifkannya seperti yang kami tahu cara melakukannya.

Ia sudah dipasang di laman web saya, bukan di blog ini. Prosedurnya adalah standard. Sekarang kita perlu pergi ke panel admin blog dan buat uniform baru, yang akan mengumpulkan permohonan untuk kami dan lain-lain informasi berguna. Pergi ke bahagian "Hubungi Borang 7" -> Tambah baharu.

Hebat! Sekarang mari kita berikan nama yang sesuai, dalam kes saya terdapat banyak borang hubungan ini. Mari pilih satu, contohnya "Borang pesanan promosi tapak web"

Saya akan memberitahu anda secara ringkas apa yang kami perlukan di sini. Pertama sekali, kita perlu memutuskan berapa banyak medan bentuk yang ingin kita buat. Saya akan katakan dengan segera bahawa tidak perlu mencipta 100,500 medan dan tidak ada gunanya, atas sebab mudah bahawa orang akan menutup tapak anda dan tidak meninggalkan permintaan. Mereka perlu memudahkan langkah ini. Maksudnya, jika anda memikirkannya, apa yang kita perlukan daripada seseorang ialah:

Namanya untuk memanggilnya (alamat peribadi)

Alamat mel (maklum balas, tempat untuk menghantar tawaran kepadanya)

Nombor telefon untuk dihubungi segera (jika ini berlaku dengan cepat, maka dia akan menjadi pelanggan anda pula)

Butang "Serah" sebenar

Ini adalah data asas, anda sudah boleh mengetahui orang lain semasa surat-menyurat atau perbualan telefon. Logik? Saya rasa betul. Jom teruskan.

Mencipta medan borang hubungan dalam pemalam Borang Hubungan 7

Jadi, kami telah memutuskan bilangan medan, kini kami perlu mencipta medan ini. Tab berikut tersedia untuk kami:

• Teks (Mana-mana medan teks, seperti "Nama", "Tanya soalan", atau mana-mana tajuk lain yang anda akan kumpulkan melalui medan ini)
• E-mel (tujuan di sini adalah untuk pengguna memasukkan)
• URL (alamat tapak akan dimasukkan dalam medan ini, nilai lain tidak boleh diterima dan ralat akan dipaparkan)
• Tel (medan dengan nombor telefon untuk borang maklum balas WordPress kami, boleh diterima nilai angka, teks akan memberikan ralat)
• Nombor (Julat nilai berangka, boleh digunakan, sebagai contoh, pada harga: "berapa banyak yang anda sanggup bayar untuk tapak? Dari 23,000 hingga 120,000 rubel")
• Tarikh (Nyatakan tarikh, dari tarikh berapa hingga tarikh berapa. Contoh: “Tempahan kereta dari 13/04/2016 hingga 25/04/2016”)
• Kawasan Teks (Kawasan teks, di sini anda boleh memasukkan teks sebagai ulasan)
• Menu Jatuh Bawah. Dilaksanakan di blog saya, anda boleh melihatnya. Pada akhir setiap artikel, saya mencadangkan pengguna untuk membuat sama ada laman web mudah atau kedai dalam talian. Inilah fungsi yang disediakan pilihan ini.
• Kotak pilihan (berbilang pilihan, contohnya: Tapak web + Penciptaan logo + promosi + pengiklanan kontekstual)
• Butang radio (Memilih satu item, contohnya: “Anda memesan atau pengiklanan kontekstual atau disasarkan")
• Penerimaan (Anda menerima syarat perjanjian, iaitu maklumat pengguna, seperti tawaran awam)
• Kuiz (Kuiz ialah satu siri soalan pendek yang juga boleh dimasukkan ke dalam borang hubungan).
• reCaptcha (Pengesahan bahawa anda bukan robot dan tidak akan spam.) Perlindungan yang baik daripada SPAM. Nota: pilihan ini berfungsi jika anda telah menyambungkan pemalam Really Simple Captcha.
• Fail (Jika anda ingin membenarkan pengguna memuat naik fail kepada anda, contohnya: "Lampirkan syarat rujukan untuk pembangunan tapak web").
• Hantar (Hantar data melalui e-mel)

Jadi, kami telah memutuskan bidang, anda juga tahu maksud setiap. Mari mulakan membina borang hubungan kami di WordPress.

Dalam contoh di bawah saya menggunakan 2 medan: Nama, E-mel. Sehubungan itu, anda memerlukan tab ini:

Dengan mengklik pada tab teks (Teks) kita sampai ke kotak dialog:

Di sini kita perlu mengklik pada kotak semak Jenis Medan - Diperlukan. Ini dilakukan supaya jika pengguna tidak memasukkan nama di dalamnya, maka dia tidak akan dapat menghantar aplikasi kepada anda; akan ada ralat penghantaran, menunjukkan bahawa tidak semua medan diisi dengan betul.

Kemudian anda akan melihat kod pendek untuk memasukkan medan ini dan di sebelahnya butang biru"Sisipkan teg." Ini akan menambah satu medan borang hubungan baharu.

Supaya anda tidak keliru, saya menyerlahkannya dengan gaya. Kod di bawah:

Nama penuh

< div class = "col-md-4" > < label class = "sr-only" >Nama penuh< / label >[ text* text - 658 class : form - control placeholder "Nama anda" ] !}< / div >

Dan inilah skrinnya:

Kami melakukan operasi yang serupa untuk medan "E-mel". Kami mengklik pada tab yang sepadan dan masuk ke dalam kotak dialog ini.

Ia sama sekali tidak berbeza dengan yang sebelumnya, kami hanya mengulangi tindakan kami. Medan e-mel saya juga mempunyai gaya. Saya menyediakan kod di bawah:

E-mel Penuh

< div class = "col-md-4" > < label class = "sr-only" >E-mel Penuh< / label >[ e-mel* e-mel - 447 kelas : borang - kawalan pemegang tempat "E-mel Anda" ] !}< / div >

Dan inilah skrinnya:

Dan akhirnya, butang "Serah". Dia semua dalam gaya saya.

< div class = "col-md-4" >[ serahkan kelas : btn - kelas rata : kol - xs - 12 "Pesanan" ]< / div > < / div >

Nota Penting: Rakan-rakan yang dihormati, dalam contoh ini saya menggunakan gaya responsif untuk mencipta borang hubungan dalam WordPress, bermakna ia boleh mengambil bentuk mana-mana saiz skrin.

Anda akan melihat butang di sebelah kanan bucu atas. Anda pasti tidak akan terlepas. 🙂

Kami telah melakukan beberapa kerja, kini kami bergerak ke peringkat seterusnya.

tetapan alamat pos untuk menerima permohonan

Pada langkah ini, kami perlu membuat beberapa tetapan supaya surat dihantar kepada kami dalam peti mel kami. Saya akan memberitahu anda bagaimana untuk mencapai ini di bawah.

Kita perlu klik pada tab besar"Surat". Ia akan menjadi yang kedua selepas Templat Borang.

Perkara pertama yang anda akan lihat ialah tag anda yang anda tambah, kita perlu memasukkannya ke dalam badan surat, mereka akan menggantikan data yang pengguna masukkan dari borang. Saya rasa saya telah menjelaskannya dengan jelas.

Sekarang untuk bidang:

• Kepada (Di mana permohonan akan dihantar, dalam kes saya, ini adalah alamat e-mel saya, anda boleh menentukan beberapa alamat untuk menghantar permohonan)
• Dari (Field From, iaitu nilai akan digantikan bahawa aplikasi itu berasal dari tapak web studio saya)
• Subjek (Berfungsi untuk menentukan borang permohonan itu berasal, dalam kes kami ia adalah permohonan daripada borang promosi tapak).
• Pengepala Tambahan (Pengepala tambahan, kami tidak menyentuhnya, ia diperlukan untuk penyerahan borang yang betul)
• Badan Mesej (Badan mesej, di sini anda menunjukkan dari siapa surat itu datang dan dari alamat apa, contohnya: "Daripada: Ivan" "Alamat mel: vasya @ mail. ru")
• Lampiran Fail (Lampiran pada fail, jangan sentuh)

Sekarang kita perlu mengkonfigurasi pemberitahuan tentang penghantaran e-mel yang berjaya atau tidak berjaya daripada borang hubungan WordPress.

Ini akan menjadi mesej yang akan ditunjukkan kepada pengguna sebagai tindak balas kepada tindakannya dengan borang. Secara lalai mereka pergi ke Bahasa Inggeris. Saya telah menterjemah ke dalam bahasa Rusia perkara yang paling perlu untuk anda. Akan ada lebih daripada cukup daripada mereka, dan jika tidak, maka penterjemah Google akan membantu anda. Jadi mari kita mulakan.

• Apabila menghantar mesej berjaya: “Mesej anda berjaya dihantar. Terima kasih."
• Jika mesej dihantar secara salah daripada borang: “Ralat berlaku semasa menghantar mesej. Sila cuba lagi kemudian atau hubungi pentadbir tapak."
• Ralat pengisian: “Ralat pengisian. Sila semak semua medan dan serahkan semula."
• Data yang dihantar dikenal pasti sebagai spam: “Ralat menghantar mesej. Sila cuba lagi kemudian atau hubungi pentadbir tapak."
• Beberapa syarat mesti diterima: "Sila terima syarat untuk meneruskan."
• Sesetengah medan mesti diisi: "Sila isi medan yang diperlukan."
• Panjang aksara dalam medan telah melebihi: "Terlalu banyak data telah ditentukan."
• Panjang aksara dalam medan tidak mencukupi: "Terlalu sedikit data yang ditentukan."
• Format tarikh tidak sah: "Format tarikh tidak betul."
• Tarikh awal pada had minimum: "Tarikh yang dinyatakan terlalu awal."
• Tarikh lewat pada had maksimum: "Tarikh yang dinyatakan sudah terlambat."
• Muat turun fail gagal: "Fail tidak dapat dimuat turun."
• Jenis fail yang tidak dibenarkan: "Jenis fail ini tidak dibenarkan."
• Memuatkan juga fail besar: "Fail ini terlalu besar."
• Muat naik fail gagal kerana Ralat PHP: "Muat naik fail gagal. Ralat telah berlaku."
• Format nombor yang dimasukkan oleh pengirim tidak betul: "Format nombor tidak betul."
• Nombor kurang daripada had minimum: "Nombor ini terlalu kecil."
• Nombor lebih besar daripada had maksimum: "Nombor ini terlalu tinggi."
• Pengirim tidak memasukkan jawapan yang betul kepada soalan: "Anda memasukkan jawapan yang salah."
• Alamat e-mel yang dimasukkan oleh pengirim tidak betul: "E-mel tidak sah."
• URL yang dimasukkan oleh pengirim tidak betul: "URL tidak sah."
• Nombor telefon yang dimasukkan oleh pengirim tidak betul: "Nombor telefon tidak sah."

Sangat bagus. Kami telah selesai menyediakan borang, kini kami perlu memasukkannya ke dalam laman web. Untuk tujuan ini sudah teknologi yang diketahui, pergi ke halaman sedia ada atau buat halaman baharu. Dalam contoh saya, saya akan menunjukkan kepada anda satu contoh bentuk sedia ada pada halaman laman WordPress.

Memandangkan borang kami mengumpulkan permohonan untuk promosi tapak web, mari pergi ke halaman yang serupa.

Untuk memasukkan borang hubungan kami, kami perlu menyalin kod pendek yang diberikan kepadanya oleh pemalam. Ia tersedia di bawah nama borang anda.

Kami salin dan tampal ke dalam halaman kami, selepas pergi ke penyunting teks(bukan visual). Ditunjukkan dalam tangkapan skrin di bawah:

Mari simpan halaman kami dan lihat apa yang akan kami dapatkan dalam penyemak imbas:

Super! Sekarang mari cuba hantar borang tanpa mengisi apa-apa. Dan inilah yang akan kita lihat.

Ralat penyerahan borang berlaku kerana pengguna tidak memberikan data yang diperlukan dalam medan. Sekarang mari kita masukkan data yang betul dan lihat apa yang kita dapat dalam kes ini.

Klik serah dan inilah yang dinyatakan dalam borang kami:

Sekarang mari kita lihat rupa aplikasi kita. Mereka datang ke e-mel saya. Jom semak penghantaran:

Mari masuk ke dalam untuk memastikan pengekodan dan semua data adalah betul.

Semuanya baik-baik saja. Borang berfungsi dengan baik dan menyerahkan data. Kini kami boleh mengumpul aplikasi yang akan datang kepada anda apabila anda mula, jika kita bercakap tentang promosi serantau.

Jadi, kami memberitahu anda cara membuat borang hubungan di WordPress pada halaman tapak web. Sekarang saya akan memberitahu anda cara membuat pop timbul bentuk penyesuaian maklum balas menggunakan pemalam Borang Kenalan 7 kami.

Membuat borang maklum balas hubungan responsif pop timbul dalam WordPress

Untuk membolehkan borang kami menjadi adaptif, iaitu "cecair", kami perlu menyambungkan pemalam lain, atau lebih tepat penambahannya kepada Borang Perhubungan 7 - ia dipanggil Borang Perhubungan Bootstrap 7. Kami memasang dan hanya mengaktifkan dan itu sahaja - ia berfungsi. Anda tidak perlu membuat sebarang tetapan dengannya. Tetapkan dan lupakan.

Dalam langkah seterusnya, saya akan memberitahu anda perubahan yang perlu kami lakukan untuk menjadikan borang kami timbul dan responsif. Saya membuat pelaksanaan yang serupa pada laman utama laman web studio anda. Untuk melakukan ini, mari pergi ke templat index.php, yang terletak di bahagian "Penampilan - Editor". Kami hanya akan bekerja dengan kod, secara manual.

Borang pop timbul kami akan muncul dalam dialog modal seperti ini:

Untuk mencapai hasil ini, anda memerlukan kod berikut, saya akan membentangkannya sepenuhnya dalam coretan:

Pesanan ×Tutup Tinggalkan permintaan

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Pesanan< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >×< / span > < span class = "sr-only" >tutup< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Hantar permohonan anda< / h4 > < / div >

Hai semua. Kami dihujani dengan soalan tentang cara melaksanakan borang yang muncul dalam tetingkap modal selepas mengklik butang, dan selepas menyerahkan, mesej tentang kejayaan atau kegagalan akan dipaparkan.

Saya rasa terdapat banyak perkara yang serupa di Internet, tetapi kerana orang bertanya, saya memutuskan untuk melakukannya. Lebih-lebih lagi, fungsi sedemikian mesti ada pada hampir setiap halaman pendaratan untuk melaksanakan butang panggil balik. Dan sememangnya, kini terdapat lebih banyak keputusan ujian AB yang menunjukkan bahawa borang terbuka berfungsi lebih teruk daripada yang tersembunyi dalam tetingkap modal dan dibuka selepas mengklik butang.

Ada yang berpendapat bahawa ini disebabkan oleh fakta bahawa orang perlahan-lahan "mengembangkan imuniti" dan bentuk terbuka adalah penjualan yang agresif. Didakwa, kini adalah masa apabila pengguna, apabila melihat borang terbuka, percaya bahawa mereka cuba "menjual" sesuatu kepadanya. Saya tidak sepenuhnya bersetuju dengan teori ini, tetapi terdapat sebutir kebenaran. Ini mungkin benar dalam beberapa jenis perniagaan. Nah, sekarang mari kita mula melaksanakan borang.

Catatan! Saya tidak akan menerangkan setiap tindakan secara terperinci, tetapi menawarkan versi siap sedia dalam kod sumber. Jika anda mempunyai sebarang soalan, tulis dalam komen. Kami akan fikirkan :)

Hari ini kita akan mulakan bukan dengan jQuery, tetapi dengan susun atur butang dan borang. Kami akan memasukkan semua skrip pada penghujung halaman.

Butang yang, apabila diklik, akan membuka tetingkap modal:

Hantar permohonan anda

Anda boleh menetapkan mana-mana kelas, tetapi dalam href tulis #modal - ini akan menjadi id bekas dengan lorekan dan borang hubungan.

Sekarang saya akan memberikan kod untuk borang dan blok di mana borang itu akan ditempatkan:

Tinggalkan butiran hubungan anda dan perunding kami akan menghubungi anda. Saya mahukan borang ini untuk tapak web saya

Selepas menambah gaya, ia kelihatan seperti ini:

Untuk mencipta tetingkap modal, perpustakaan Remodal telah digunakan. Ini ialah satu set fail css dan js, hanya untuk mencipta tetingkap modal animasi. Anda boleh memuat turunnya dari pautan atau dengan suntingan saya di penghujung artikel.

antara tag kepala menyambung gaya:

Dan sebelum teg badan penutup, tambahkan skrip:

Script.js ialah skrip untuk memproses borang. Ajax yang sama yang membolehkan kami menjalankan keseluruhan prosedur tanpa memuatkan semula halaman:

$(document).ready(function () ($("form").submit(function () ( // Dapatkan ID borang var formID = $(this).attr("id"); // Tambah cincang kepada ID nama var formNm = $("#" + formID); $.ajax(( jenis: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) ( // Teks output hasil penghantaran $(formNm).html(data); ), ralat: fungsi (jqXHR, teks, ralat) ( // Output teks ralat penghantaran $(formNm).html(ralat); ) )); kembali palsu; ) ); ));

Saya tidak akan memberikan yang asal kod css dan js daripada fail yang bertanggungjawab untuk tetingkap dan borang modal, kerana ia agak besar. Jika ya, lihat sumbernya. Tetapi pengendali PHP sebahagian besarnya adalah standard (jika saya boleh berkata demikian):

Sila jangan lupa untuk menukar alamat e-mel anda kepada alamat anda sendiri.

Ini adalah borang ajax yang kami dapat. Maaf kerana tidak cuba menerangkan secara terperinci bagaimana setiap elemen dibuat. Saya hanya mahu memberikan hasil yang telah selesai, tetapi tidak ada gunanya menerangkan semua animasi dan penampilan. Muat turun sumber dan laksanakan di tapak web anda. Dan itu sahaja untuk hari ini. Semoga berjaya kepada semua!

Lelaki, saya menggesa anda untuk menguji borang pada sebenar atau pelayan maya(penghosan). Sila pastikan pelayan anda menyokong php, anda ada tarif yang dibayar dan bukan tempoh ujian. Jika tidak, dalam 90% kes borang itu tidak akan berfungsi.

Jangan tunggu surat di tempat anda peti mel, jika anda baru sahaja membuka fail indeks dalam penyemak imbas dan klik butang "Serah". Php ialah bahasa sebelah pelayan!

Jika anda terlalu malas untuk memikirkannya dan membuat borang itu sendiri, maka saya cadangkan untuk memberi perhatian.

Versi dikemas kini artikel terletak