Cara Membuat Custom Styling Form Pada Opsi Embed HTML

Anda bisa mengubah tampilan bawaan dari form yang ada di KIRIM.EMAIL sesuai dengan keinginan Anda.

Untuk caranya silakan ikut langkah-langkah berikut ini.

1. Masuk ke halaman aplikasi.kirim.email
2. Buat form baru atau edit form yang sudah ada.
3. Pastikan status form dalam kondisi ON.
4. Pada bagian DESIGN, klik tab HTML.
5. Copy kode yang tersedia.
   
   
   
   
6. Buka https://codepen.io/pen/ dan paste tersebut di kolom HTML.
   
   
   
   
7. Ubah layoutnya didengan klik tombol Change View.
   Pilih opsi kode HTML di sebelah kiri dan tampilannya di sebelah kanan seperti pada gambar berikut ini.
   
   

Menambahkan tag <style>

Setelah Anda memindahkan kode, berikutnya tambahkan kode berikut ini :

<!-- Masukkan kode styling didalam bracket dibawah ini --> 

<style> 
// Masukan kode styling disini
</style>

setelah kode </div> yang paling bawah.

Sehingga hasilnya seperti pada gambar berikut ini :

Mengenal anatomi form

Sebelum kita membuat custom styling form, ada baiknya kita berkenalan dulu dengan anatomi form terlebih dahulu. Ini berfungsi untuk membuat selector dengan custom styling yang Anda inginkan.

Pada dasarnya anatomi form KIRIM.EMAIL hanya ada dua, yaitu :

1. Header
2. dan Konten.

Sedangkan pada Konten ada 3 bagian yaitu :

1. Field
2. Input
3. Button.

5 Elemen itulah yang akan kita gunakan untuk membuat custom styling form.

Kode Sumber Selector

Setelah Anda tahu posisi dan anatomi form, maka selanjutnya adalah ambil kode sumber selector berikut ini sesuai kebutuhan Anda.

Misalnya Anda ingin mengganti bagian header, maka Anda tinggal copy kode untuk header dan paste di bagian tag <style>.

Adapun kode sumbernya sebagai berikut :

Selector untuk bagian header form

/* Selector untuk bagian header form */

#flexbox-style .kirimemail-form-body {
        background-color: unset;
        color: unset;
}

Selector untuk bagian konten form

/* Selector untuk bagian konten form */

#flexbox-style .kirimemail-form-field {
        background-color: unset;
}

Selector button

/* Selector button */

#flexbox-style .button:not(.zmb).slate {
        background: #2d86c2;
        box-shadow: 0 0 0 1px #2d86c2;
}

Selector button ketika disentuh kursor mouse

/* Selector button ketika disentuh kursor mouse */

#flexbox-style .button:not(.zmb).slate:hover {
        background: #ca9146;
        box-shadow: 0 0 0 1px #ca9146;
}

Selector field / kotak input

/* Selector field / kotak input */

#flexbox-style .kirimemail-custom-field dd {
        padding: 5px;
}

Selector input

/* Selector input */

#flexbox-style .kirimemail-custom-field input {
        padding: 20px;
        height: 100% !important;
        width: 100% !important;
}

Berikut beberapa keterangan property yang sering digunakan untuk styling pada form.

• background-color = Warna Background
• color = warna text
• box-shadow = warna dan ukuran shadow
• margin = lebar ruang spasi terluar dari element
• padding = lebar ruang spasi terdalam dari element
• height = tinggi element
• width = lebar element.

Contoh penggunaan :

#flexbox-style .kirimemail-form-body {
 background-color: #32a895;
 color: black !important;
 }

Jika styling tidak pengaruh, bisa menggunakan tambahan !important seperti contoh diatas. Ukuran lebar dan tinggi menggunakan satuan px, contohnya : margin : 24px,

Jika sudah selesai dengan custom styling nya silakan copy kode tersebut dan embed ke halaman website Anda.

Selesai.

Jika ada pertanyaan silahkan hubungi kami via live chat atau ke [email protected]