Cara Membuat Formulir Keikutsertaan Bloom Muncul Saat Mengklik Tombol

Diterbitkan: 2017-07-12

Sulit membayangkan internet tanpa formulir keikutsertaan saat ini. Kami menggunakannya di situs web kami karena dua alasan utama; mendapatkan pelanggan atau menghasilkan prospek.

Menemukan cara yang tepat untuk mendekati audiens Anda dengan formulir keikutsertaan dapat menjadi tantangan nyata. Beberapa orang ingin bermain aman dan tidak ingin membuat pengunjung mereka merasa seperti 'menyerang' gelembung internet mereka dengan formulir keikutsertaan yang tidak diinginkan. Biasanya saat itulah orang memilih formulir keikutsertaan yang muncul setelah mengklik suatu tempat tertentu di situs web, atau bagaimana kami menyebutnya; 'Pemicu Saat Klik'.

Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana tepatnya Anda dapat menggunakan pemicu klik ini di beberapa bagian terpenting situs web Anda. Setelah Anda berhasil memasukkan opsi klik pada pemicu, jangan lupa untuk mengukur hasil yang diberikannya untuk melihat apakah itu membantu Anda membuat kemajuan.

Formulir Keikutsertaan

Kapan Menggunakan Formulir Keikutsertaan Setelah Klik

Anda pada dasarnya dapat membuat apa pun di situs web Anda memicu formulir keikutsertaan. Tetapi menggunakannya di tempat yang salah dapat dengan cepat berbalik melawan Anda. Orang-orang terbiasa mengklik situs web secara acak sepanjang waktu; ketika mereka sedang membaca sesuatu, misalnya. Atau bahkan hanya ketika mereka melihat-lihat, mereka sering mengklik di suatu tempat di situs web tanpa tujuan.

Sekarang bayangkan Anda adalah pengunjungnya; dengan setiap klik acak, Anda mungkin dihadapkan dengan formulir keikutsertaan yang tidak terduga karena tindakan yang Anda lakukan tanpa tujuan. Itu pasti akan berdampak buruk karena, pada saat yang tepat, Anda akan merasa seperti tidak memiliki kendali sama sekali saat mengunjungi situs web tersebut.

Menempatkan formulir keikutsertaan pemicu klik di tempat-tempat di mana orang secara sukarela memilih untuk mengklik atau tidak mengklik (seperti tombol atau ajakan bertindak pada umumnya) adalah cerita lain. Kami terbiasa mengklik CTA (ajakan bertindak) sehingga tidak membuat kami takut. Kami sengaja memilih untuk melihat langkah selanjutnya. Jika kami tidak penasaran untuk melihat apa yang ada di balik CTA, kami tidak akan mengkliknya. Tapi jika kita mau, kita bisa. 'Pilihan' yang dimiliki pengunjung ini, membuat mereka merasa lebih mudah ketika formulir keikutsertaan akhirnya muncul dan meningkatkan kemungkinan mereka benar-benar mendaftar ke buletin Anda.

Cara Membuat Formulir Keikutsertaan Bloom Muncul Saat Mengklik Tombol

Berlangganan Saluran Youtube Kami

Buat Formulir Keikutsertaan Anda

Membuat orang mengklik CTA Anda adalah suatu bentuk seni. Membuat orang berlangganan atau menjadi pemimpin melalui formulir keikutsertaan setelah mengklik CTA Anda adalah apresiasi seni. Anda harus bereksperimen dan menemukan cara yang tepat untuk mendekati audiens target Anda agar kedua belah pihak senang pada akhirnya.

Kami akan menunjukkan kepada Anda cara membuat pemicu klik untuk dua tombol berbeda di situs web Anda di mana Anda dapat memperoleh manfaat dari formulir keikutsertaan semacam itu; Modul Tombol dan Tombol Header Lebar Penuh. Cara kerjanya sama, tetapi melihatnya dalam skenario yang berbeda mungkin membantu Anda memahami logikanya. Setelah itu, Anda dapat menggunakannya untuk modul lain juga.

Sekarang, sebelum kami menunjukkan cara menautkan formulir keikutsertaan ke CTA, kami akan melalui pengaturan formulir keikutsertaan. Dalam posting ini, kami tidak akan memberi Anda desain khusus apa pun, melainkan dengan logika saja. Ada beberapa pengaturan yang diperlukan untuk memastikan pemicu klik berfungsi.

Pilih Jenis Formulir Keikutsertaan

Saat menambahkan formulir keikutsertaan baru, pilihan pertama yang akan Anda hadapi adalah jenis formulir keikutsertaan yang ingin Anda gunakan. Untuk membuat pemicu pada efek klik, Anda dapat menggunakan dua jenis: pop up dan fly in. Yang kemungkinan besar akan Anda pilih adalah pop up. Tetapi jika Anda ingin menjadi sedikit lebih halus, Anda juga dapat menggunakan fly in.

Tab Pengaturan

Mulailah dengan memberi nama formulir keikutsertaan Anda di tab Penyiapan dari formulir keikutsertaan yang Anda buat. Selanjutnya, hubungkan formulir Anda ke penyedia email. Tanpa penyedia email, akun, dan daftar email, formulir tidak akan aktif.

Tab Desain

Di dalam tab Desain, Anda dapat mengatur gaya formulir yang akan Anda gunakan. Dalam posting ini, kita tidak akan melakukan itu. Kami akan memilih formulir keikutsertaan standar tanpa modifikasi hanya untuk melihat apakah itu berfungsi. Anda dapat, nanti, selalu kembali ke formulir keikutsertaan yang Anda buat untuk membuat perubahan.

Tab Pengaturan Tampilan

Ini adalah tab yang akan kami tautkan formulir keikutsertaan ke salah satu tombol. Untuk memastikan hasil bekerja, Anda harus memastikan formulir keikutsertaan diizinkan untuk ditampilkan pada halaman yang Anda inginkan untuk bekerja. Jika Anda akan menggunakan formulir yang sama di seluruh situs web, Anda dapat dengan mudah mengaktifkan formulir untuk semuanya seperti yang ditunjukkan pada gambar di bawah.

Selanjutnya, kami ingin menggunakan formulir keikutsertaan untuk pemicu saat klik saja. Itu sebabnya kami akan menonaktifkan semua opsi lain dan hanya mengaktifkan opsi 'Pemicu saat Klik'. Anda akan melihat bahwa bidang Pemilih CSS akan segera muncul. Nanti di posting ini, kita akan menggunakan bidang ini untuk menautkan tombol kita ke formulir keikutsertaan yang kita buat. Biarkan halaman ini terbuka di tab Anda sehingga Anda bisa langsung membukanya nanti.

Ayo Mulai

Meskipun logika di balik penambahan formulir keikutsertaan pemicu klik dalam modul yang berbeda adalah sama, kami akan menjelaskannya dalam dua contoh; Modul Tombol dan Tombol Header Lebar Penuh. Tanpa memahami logikanya, Anda cukup mengikuti langkah-langkah dalam posting ini untuk mewujudkannya.

Namun, jika Anda ingin pemicu klik berfungsi di tempat lain selain yang dijelaskan di bawah, Anda harus melakukan sedikit modifikasi. Satu-satunya hal yang akan berubah adalah kelas yang kita gunakan karena yang satu ini selalu berbeda. Jika Anda ingin membuat pemicu klik ini terjadi untuk bagian lain dari situs web Anda, Anda cukup mengikuti langkah-langkah yang sama seperti yang akan kami tunjukkan di bawah ini dan ubah kelas CSS sesuai dengan apa yang Anda gunakan.

Hubungkan Modul Tombol ke Formulir Keikutsertaan Pop Up

Contoh pertama yang akan kami pandu adalah Modul Tombol. Hal yang menyenangkan tentang membuat pemicu klik untuk Modul Tombol adalah kemungkinannya tidak terbatas. Anda dapat membuat semua jenis bagian atau baris yang berisi Modul Tombol dan menjadi sekreatif yang Anda inginkan.

Tanpa batas waktu lebih lanjut, mari kita mulai membuat pemicu klik untuk tombol tersebut. Kami memiliki dua cara untuk melakukan ini; dengan menggunakan kelas CSS atau dengan membuat ID CSS yang ditetapkan ke modul.

Dengan Menggunakan Kelas CSS

Buka halaman atau buat halaman tempat Anda ingin pemicu klik berfungsi. Selanjutnya, tambahkan Modul Tombol atau buka pengaturan Modul Tombol dari tombol yang Anda inginkan untuk bekerja.

Buka tab Advanced dan gulir ke bawah. Klik di bidang Elemen Utama dan lihat kelas CSS yang ditetapkan ke tombol muncul. Salin kelas CSS, kita akan membutuhkannya segera.

Lalu, buka tab Pengaturan Tampilan dari formulir keikutsertaan yang Anda buat. Di bagian sebelumnya, kami telah menunjukkan kepada Anda di mana keajaiban akan terjadi. Kami mengaktifkan 'Pemicu Saat Klik' dan menonaktifkan semua kemungkinan lain yang disebutkan. Tepat di bawah 'Trick On Click', Anda harus menempelkan baris berikut:

*.et_pb_button_0.et_pb_button.et_pb_module

Seperti yang Anda lihat, itu hanyalah simbol '*' yang diikuti oleh kelas yang Anda salin tepat sebelum langkah ini.

Saat menggunakan metode ini, ada satu hal yang harus Anda ingat; tombol Kelas CSS berbeda untuk setiap tombol di halaman yang sama tetapi segera setelah Anda menambahkan tombol ke halaman lain, itu akan langsung dimulai dari '0 '. Ini berarti bahwa setiap Modul Tombol pertama di setiap halaman akan memicu formulir keikutsertaan jika formulir keikutsertaan Anda tersedia untuk semua halaman dan posting.

Jika Anda ingin menghindari ini, Anda dapat menggunakan buat pemicu klik terjadi melalui ID CSS. Tetapi jika Anda menetapkan ID CSS tertentu ke modul lengkap, cara termudah untuk mewujudkannya adalah melalui Kelas CSS.

Anda dapat menentukan pada halaman apa formulir keikutsertaan tertentu dapat muncul di Pengaturan Tampilan formulir keikutsertaan Anda. Dengan melakukannya, Anda akan memegang kendali dan tahu persis di halaman mana formulir keikutsertaan akan muncul setelah mengklik tombol yang ditetapkan untuk itu.

Dengan Menggunakan ID CSS

Metode kedua adalah dengan menggunakan ID CSS. Buka Modul Tombol, buka tab Lanjutan dan berikan ID CSS. Dalam hal ini, kita akan menggunakan 'popup'.

Lanjutkan dengan masuk ke tab Konten Modul Tombol dan tulis simbol "#" diikuti dengan apa pun yang Anda inginkan. Dengan melakukan ini, Anda akan memastikan pengunjung tetap berada di tempat yang sama pada halaman saat mengklik tombol.

Selanjutnya, kembali ke pengaturan formulir keikutsertaan Anda dan tambahkan "a#popup" ke bidang Pemicu Saat Klik. Anda harus selalu menulis “a#” diikuti dengan ID CSS yang Anda tetapkan ke Modul Tombol.

a#popup

Hubungkan Tombol Header Lebar Penuh ke Formulir Keikutsertaan

Contoh lain di mana kami akan menunjukkan cara melakukan formulir keikutsertaan Pemicu Saat Klik adalah Tombol Header Lebar Penuh. Satu-satunya kemungkinan yang kita miliki di sini adalah menggunakan kelas tombol CSS. Kami tidak dapat menetapkan ID CSS melalui pembuat Divi ke tombol secara khusus.

Dengan Menggunakan Kelas CSS

Buat header lebar penuh atau buka header lebar penuh tempat Anda ingin menambahkan formulir keikutsertaan Pemicu Saat Klik. Buka tab Advanced dari header Fullwidth dan gulir ke bawah hingga Anda menemukan 'Tombol Satu'. Klik pada bidang dan salin kelas CSS yang ditetapkan ke tombol.

Kemudian, buka tab Konten dan ketik simbol “#” diikuti dengan yang lainnya di bidang URL Tombol #1.

Terakhir, buka tab Pengaturan Tampilan dari keikutsertaan Anda dan ketik simbol "*" diikuti oleh kelas yang Anda salin ditugaskan ke tombol.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Pikiran Akhir

Tutorial ini akan membantu Anda memulai dengan pemicu saat klik dan formulir keikutsertaan Bloom. Bahkan mungkin membuat Anda mempertimbangkan kembali cara Anda saat ini mencoba untuk mendapatkan pelanggan atau prospek. Jika Anda memiliki pertanyaan atau saran; jangan ragu untuk meninggalkan komentar di bagian komentar di bawah. Dan saat Anda berada di sana; beri tahu kami dalam kasus apa Anda akan menggunakan formulir keikutsertaan Pemicu Saat Klik.

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh BarsRsind / shutterstock.com