Cara Mudah Membuat Contact Form (Contact Us) di Blogger

Mungkin kalian pernah atau sering menjumpai halaman ini di suatu blog atau website, mungkin pernah bukan? Memang sudah menjadi kewajiban sebagai pemilik blog untuk membuat serta memasang halaman contact form atau contact us ini di blog.

 
Banyak Manfaat dari halaman ini yang bisa kita serta pengunjung blog dapatkan, salah satunya dapat membantu pengunjung berinteraksi dengan pemilik blog secara private atau pribadi.

Dengan itu, pengunjung yang ingin bertanya dengan pemilik blog tapi memilih percakapannya secara private atau pribadi, dapat terbantu dengan adanya halaman contact us ini(contact us saja sebutnya).

Sebenarnya sih tak masalah kalau tidak membuatnya, tapi itu terserah kalian, mau membuat contact us nya atau tidak. Nah sekarang saya tanya, Penasaran bukan bagaimana cara membuat contact us?

Pasti, saya kan kesini mau tau cara nya...

Haha, beruntung, pada postingan kali ini saya akan mengulas mengenai hal tersebut. Cara membuat contact form di blogger, itu lah judul pada postingan kali ini.

Kita nggak bakalan pakai tools ataupun mampir ke website nya orang seperti membuat halaman privacy policy dan disclaimer. Kali ini kita akan membuat halaman contact us nya dengan menggunakan code.

Cara Membuat Contact Form di Blogger

Jika kalian masih bingung dengan code CSS, nggak perlu khawatir. Karena code CSS di bawah nanti lebih mudah buat diedit. Sudah gampang diedit, keren lagi contact form nya...

1. Pergi ke dashboard blogger kalian masing masing ➤ pilih menu Halaman,

2. Klik +Halaman Baru ➤ beri judul Contact Us atau Contact Form, terserah teman-teman mau judulnya apa,

3. Copy code CSS di bawah,

<style scoped="scoped">
    .bisablog-input {
        float: none;
        position: relative;
        margin-bottom: 45px;
        margin-right: 10px
    }
    .bisablog-input input,
    .bisablog-input textarea {
        font-size: 15px;
        padding: 15px 0;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd
    }
    .bisablog-input input:focus,
    .bisablog-input textarea:focus {
        outline: none
    }
    .bisablog-input label {
        color: #999;
        font-size: 15px;
        font-weight: 400;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 10px;
        transition: .2s ease all
    }
    .bisablog-input input:focus ~ label,
    .bisablog-input input:valid ~ label,
    .bisablog-input textarea:focus ~ label,
    .bisablog-input textarea:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #546de5
    }
    .bar {
        position: relative;
        display: block;
        width: 100%
    }
    .bar:before,
    .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #10829e;
        transition: 0.5s cubic-bezier(1, 0.12, 0.25, 1) all
    }
    .bar:before {
        left: 50%
    }
    .bar:after {
        right: 50%
    }
    .bisablog-input input:focus ~ .bar:before,
    .bisablog-input input:focus ~ .bar:after,
    .bisablog-input textarea:focus ~ .bar:before,
    .bisablog-input textarea:focus ~ .bar:after {
        width: 50%
    }
    .highlight {
        position: absolute;
        height: 50%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: .5
    }
    .bisablog-input input:focus ~ .highlight,
    .bisablog-input textarea:focus ~ .highlight {
        animation: inputHighlighter .3s ease
    }
    .bisablog-input input:focus ~ label,
    .bisablog-input input:valid ~ label,
    .bisablog-input textarea:focus ~ label,
    .bisablog-input textarea:valid ~ label {
        top: -20px;
        font-size: 13px;
        color: #ff0839
    }
    input#ContactForm1_contact-form-email-message {
        height: 150px
    }
    input#ContactForm1_contact-form-submit {
        width: 100%;
        color: #fff!important;
        background: #10829e;
        padding: 15px 25px;
        border-radius: 4px;
        border: none;
        outline: none;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: all .4s ease-in-out;
        text-transform: uppercase;
        float: left;
        margin-top: 15px
    }
    input#ContactForm1_contact-form-submit:hover {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
    }
    #ContactForm1_contact-form-error-message {
        float: right;
        background: #D32F2F;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        border-radius: 3px
    }
    #ContactForm1_contact-form-success-message {
        float: right;
        background: #4CAF50;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        border-radius: 3px
    }
    </style>
    <form name="contact-form">
        <div class="bisablog-input">
            <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Name
            </label>
        </div>
        <div class="bisablog-input">
            <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Email
            </label>
        </div>
        <div class="bisablog-input">
            <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Message
            </label>
        </div>
        <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
        <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
        <div id="ContactForm1_contact-form-error-message"></div>
        <div id="ContactForm1_contact-form-success-message"></div>
    </form>
    <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
    <script type="text/javascript">
    //
        <![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5360883255841668158';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx5360883255841668158','//namablogkamu.blogspot.com/','1138884915321989014');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6512837267690936704', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>

Oi, harus tau sumbernya nih https://bisablog.com/laman-kontak-blogger/

4. Pilih mode Tampilan HTML dengan mengklik icon pensil terlebih dahulu,

5. Paste code css nya tadi ke Tampilan html tersebut,

6. Ubah angka/ID 5360883255841668158(warnanya kuning)... Dengan ID blog kalian,

Untuk mengetahui ID blog, lihat di bar atas dashboard blogger kalian...

Angka 5360883255841668158 adalah ID blog nya, silahkan kalian cek sendiri.

7. Setelah diubah ID blognya, klik Publikasikan / Publish...

Bagi yang kepo kurang lebih tampilan nya seperti ini...

Selesai... Jika teman-teman ingin mengubah warna tombol submit contact formnya dan garis bawah pada form, ubah code #10829e(ada dua yang seperti ini). Untuk kalian yang ingin tahu code warna lain nya bisa lihat disini. Satu lagi, sebelum kalian nge-scroll kebawah, saya akan memberi tahu cara nya untuk mengganti text-text yang ada di contact form diatas.

Untuk mengganti tulisan Name : Cari kode <label>Name</label> diantara kode-kode contact form diatas. Lalu ganti tulisan Name jika kalian ingin menggantinya...

Untuk mengganti tulisan Email : Cari kode <label>Email</label> ➤ ganti tulisan Email.

Untuk mengganti tulisan Message : Cari kode <label>Message</label> ➤ ganti tulisan Message.

Untuk mengganti tulisan SEND pada tombol submit : Cari kode value="Send", ➤ ganti tulisan Send dengan yang kalian mau.

Selesai, jangan sampai salah ya.

Cara Memasang Widget Contact Form di Blog

Tak hanya untuk halaman blog saja contact form ini juga bisa dipasang sebagai widget blog di bagian sidebar(samping) blog. Caranya tak kalah mudah, silahkan kalian ikuti langkah langkah berikut...

 
1. Pilih menu Tata Letak ➤ pada bagian sidebar / sidebar top, klik Add Gadget atau Tambahkan Gadget,

2. Cari gadget Contact form / Formulir kontak lalu klik saja icon plus nya,

3. Atur judul nya sesuai keinginan, mau itu Contact Form ataupun yang lain...

4. Klik Simpan / Save.

Selesai... Begitulah cara untuk memasang widget contact form nya.

Gimana, berhasil tidak contact form nya? Mudah-mudahan berhasil ya.

Sebagai catatan, contact form yang saya share diatas tadi bisa teman-teman cek keberhasilannya dengan mengisi ketiga form nya lalu klik Send.

Jika tidak ada notifikasi apapun dan text yang kalian isi di ketiga form tersebut belum juga hilang, maka contact form nya belum berhasil. Terjadi kesalahan. Namun jika sebaliknya maka contact form tersebut sudah berhasil di blog teman-teman. Untuk menangani bug tersebut akan saya jelaskan secara singkat dibawah. Dan juga akan saya jelaskan bug-bug(kesalahan) lainnya.

Menangani Bug pada Halaman Contact Form

Bug pertama dan paling umum pada contact form diatas biasanya adalah pesan yang sudah berhasil dikirim, tapi tidak masuk di email kita. Penanganan? Silahkan cek ID blogger teman-teman yang terdapat pada contact form tersebut. Karena id blogger tersebut sangat berhubungan dengan akun kalian yang login di Blogger. Dan juga pastikan akun yang di gunakan Gmail kalian saat ini adalah akun yang terdaftar / yang login di blogger.

Bug kedua adalah yang tadi nih, text pesan tidak juga hilang saat kita sudah klik tombol Send dan juga tidak ada notifikasi apapun tanda pesan mengirim dan terkirim. Bug yang kedua ini biasanya terjadi di beberapa template blog tertentu, tidak semuanya. Di blog ini sendiri semua nya lancar-lancar saja. Penanganan? Pastikan ID blog kalian sudah benar.

Jika belum berhasil maka yang perlu kalian lakukan adalah menambah widget contact form nya di sidebar blog. Silahkan teman-teman perhatikan langkah-langkah berikut; Pergi ke dashboard blogger ➤ pilih menu Tata Letak / Layout. Pada bagian Sidebar klik Add Gadget / Tambahkan Gadget ➤ setelah itu cari Formulir kontak atau Contact form ➤ klik icon plus lalu klik Simpan.

Silahkan di cek... Cara-cara diatas berdasarkan pengalaman saya menangani bug/kesalahan pada contact form tersebut saat dipasang sebagai halaman blog. Jika kalian punya cara lain bisa share ke saya dan teman-teman lainnya ya, postingan ini akan di update jika diantara kalian punya cara lain dalam menangani bug-bug contact form.

Demikian postingan ini saya buat, tentang cara membuat contact form di blogger. Jika ada pertanyaan silahkan tuangkan di kolom komentar. Salam dari saya Hanif Muchtar. Terimakasih.