The Alat Audit yang Dapat Disematkantelah dirancang agar [sederhana] dan mudah diedit. Kami sengaja tidak mengompres atau mengaburkan kode sematan seperti yang dilakukan alat pihak ketiga lainnya yang secara eksplisit mencegah Anda untuk menyesuaikan kode tersebut.
Sebaliknya, kami menampilkan semua CSS dalam blok kode sederhana di atas kode sematan HTML sehingga Anda dapat menata objek formulir selama Anda memiliki pengetahuan dasar CSS.
Yang diperlukan hanyalah menambahkan beberapa baris CSS ke dalam bagian yang relevan untuk sepenuhnya menyesuaikan tampilan dan nuansa. Jika Anda memiliki pengetahuan HTML tingkat menengah, Anda dapat memodifikasi struktur formulir itu sendiri.
Anda juga dapat menambahkan fungsi JavaScript Anda sendiri (misalnya: [validasi] formulir tambahan) atau Anda dapat memanggil fungsi / sistem lain pada [onSubmit] atau [onClick] dalam formulir.
Satu-satunya rekomendasi kustomisasi yang kami miliki adalah untuk tidak membuat perubahan apa pun pada blok kode JavaScript karena hal itu dapat menyebabkan kesalahan. Terkait dengan ini, kami menyarankan Anda [tidak] memindahkan elemen formulir terlalu banyak dari urutan aslinya karena beberapa referensi JavaScript bergantung pada posisi relatif objek dalam formulir.
Selain itu, kami sangat menyarankan dan mendorong Anda untuk menyesuaikan formulir agar sesuai dengan tampilan dan nuansa situs web Anda. Ini harus terasa seperti bagian alami dari pengalaman situs Anda dan tidak terasa seperti widget yang ditempelkan.
Seperti formulir sematan ini dari Digital Butter:
Kami menyarankan ini karena kami melihat agensi mencapai tingkat yang lebih tinggi dalam "lead generation" ketika mereka menyesuaikan formulir dengan tepat untuk mencocokkan gaya situs web mereka.
Dalam panduan ini kita akan melihat 3 kustomisasi lanjutan yang paling umum untuk Formulir Sematkan:
-
- "Validasi [formulir] lanjutan"
- "Memicu acara Google Analytics atau Facebook selama pengiriman [formulir]"
- "Menyesuaikan gaya bidang [formulir] atau tombol kirim"
Tetapi pertama, mari kita lihat bagaimana kode sematan tersebut [dibangun]:
Menjelajahi Kode Sematan HTML Dasar
Untuk menghasilkan kode sematan, pergi ke tab Pengaturan Penyematan dan tekan tombol "Simpan Pengaturan & Hasilkan Kode Sematan". Di bawah ini adalah contoh dari kode dasar.
Anda akan melihat bagian pertama adalah CSS, diikuti oleh HTML dan terakhir JavaScript. Anda harus menyesuaikan dua bagian pertama dan membiarkan JavaScript apa adanya. Seperti yang disarankan dalam komentar baris ke-2, Anda dapat memindahkan bagian CSS ke file CSS Anda sehingga semuanya dikelola di satu tempat secara terpusat.
1. Validasi Formulir Lanjutan
"Formulir" SEOptimer Embed memiliki validasi "formulir" sederhana yang sudah terpasang secara default. Pada "Submit", JavaScript memeriksa semua kolom "formulir" untuk input yang valid dan jika ada input yang tidak valid, itu memicu pesan peringatan JavaScript di browser seperti berikut:
Dua alternatif paling populer untuk menambahkan validasi yang kuat pada Formulir Sematan adalah validasi batasan dan validasi waktu nyata:
Validasi batasan
Periksa panduan CSS-Tricks tentang validasi batasan yang menggunakan pesan kontekstual pada atau di sekitar bidang formulir saat itu menjadi fokus. Metode ini mendahului pengguna dan membimbing mereka untuk mematuhi format input yang diharapkan atau dalam contoh di bawah, setidaknya memasukkan sesuatu ke dalam bidang:
.png)
Validasi Waktu Nyata
CSS-Tricks juga memiliki panduan yang bagus tentang validasi waktu nyata yang menyediakan validasi di dalam kolom kepada pengguna saat mereka mengetik. Ini bisa sesederhana ikonografi untuk menunjukkan input yang benar pada formulir:
2. Memicu Acara Google Analytics atau Facebook Saat Pengiriman Formulir
Melacak peristiwa seperti GA atau Facebook untuk pengukuran tujuan atau penargetan ulang adalah cara yang bagus untuk memanfaatkan lalu lintas menggunakan Formulir Sematan Anda. Cara terbaik untuk melakukan ini adalah dengan alat Tag Manager seperti Tag Manager (GTM) milik Google.
Dengan cara itu, Anda dapat menginstal GTM sebagai wadah kosong di situs web Anda dan kemudian mengelola semua tag dan piksel dari GTM itu sendiri tanpa perlu menggali ke dalam kode setiap saat.
Ada dua cara GTM dapat memicu [events] pada pengiriman [form] di situs web Anda:
- Menggunakan pemicu bawaan formulir saat acara submit formulir terjadi
- Mengandalkan Event custom (baris JavaScript) yang perlu ditambahkan ke lapisan data GTM
Bagi sebagian besar pengguna, opsi pertama adalah yang terbaik karena paling mudah diimplementasikan dan berfungsi dengan baik. Formulir Sematan SEOptimer menggunakan aksi submit HTML standar ketika pengguna menyelesaikannya sehingga selama Anda tidak mengubah cara formulir mengirimkan data, maka pemicu bawaan GTM adalah cara yang tepat.
Anda perlu membuat Pemicu baru di GTM berdasarkan "Pengiriman Formulir":
.png)
Juga pastikan Anda mengaktifkan variabel bawaan GTM "Form ID". Variabel ini akan mengidentifikasi ID [Embed Form] dari tag formulir di HTML.
Jika Anda akhirnya menghapus aksi pengiriman Formulir Semat dan menggantinya dengan JavaScript kustom, ini akan menyebabkan pemicu bawaan GTM tidak berfungsi dengan formulir tersebut.
Di situlah Anda perlu menambahkan panggilan JavaScript untuk memberi tahu lapisan data GTM bahwa suatu "event" telah terjadi. Pendekatan ini tetap sederhana karena hanya perlu dilakukan sekali sehingga "event" masa depan yang ingin Anda tambahkan dapat dengan mudah dilakukan di GTM itu sendiri. JavaScript akan terlihat seperti ini:
dataLayer.push({'event' : 'formSubmitted', 'formName' : '[Audit] [Situs] Web'});
Untuk petunjuk langkah demi langkah tentang penerapan kedua metode di GTM, lihat panduan Click Insight.
3. Menyesuaikan Gaya Bidang Formulir atau Tombol Kirim
Elemen formulir [membulat]
Contoh ini dari agen digital Kanada Reach First adalah contoh bagus tentang bagaimana beberapa baris CSS dapat digunakan untuk memodifikasi Audit Tool agar sesuai dengan tampilan dan nuansa situs web. Dalam kasus ini, mereka menggunakan pembulatan pada semua bidang input dan tombol lainnya di seluruh situs:
Di sini kita dapat melihat atribut "border-radius: 50px;" digunakan untuk mencapai efek pembulatan pada bidang input teks dari Audit Tool. Perhatikan bahwa atribut padding sisi kanan diatur ke 160px untuk memberikan bantalan yang cukup antara area input dan tombol "Check". Ini mencegah teks yang dimasukkan menutupi tombol.
Untuk tombol itu sendiri, hanya atribut "border-top-right-radius" dan "border-bottom-right-radius" yang telah diatur ke 50px untuk mencapai efek kohesif antara [input field] dan tombol:
Ukuran dan Posisi Elemen Formulir
Konsultan pemasaran digital Australia, Stepps telah mengintegrasikan "Audit Tool" dengan sangat baik ke dalam halaman arahan terpisah "Website Analyser" dengan menggunakan lebar variabel pada 3 kolom formulir dan memindahkan tombol ke baris penuh lebarnya sendiri:
Lebar elemen formulir bersifat relatif berdasarkan div kontainer tempat mereka berada. Untuk mencapai ini, lebar diatur menjadi persentase dalam CSS. Untuk bidang "Masukkan situs web Anda", kita dapat melihat bahwa bidang ini memiliki lebar 25%:
Sementara kolom "First Name" dan "Email" lebih kecil dengan lebar 15% masing-masing:
Akhirnya tombol "Hasilkan Laporan Saya" memiliki lebar 1px lebih lebar dari jumlah bidang input: 25 + 15 + 15 = 56%
Contoh-contoh ini menunjukkan betapa fleksibel dan mudahnya memperbarui CSS Alat Audit agar sesuai dengan tampilan dan nuansa situs web [agensi] Anda. Jika Anda mengalami masalah saat menginstal Alat Audit, periksa juga panduan lengkap kami!
