Cara Membuat Contact Form Keren dan Responsive di Blogger

Contact Form atau kontak formulir adalah sebuah halaman tersendiri yang fungsinya untuk memberikan jalan bagi pengunjung blog anda jika ingin mengirimkan pesan.

Bisa berupa kritikan, saran atau bisa juga sebuah pertanyaan maupun transaksi pemebelian jika blog anda di gunkan untuk jualan.

Halaman contact form ini nantinya akan terhubung ke alamat email anda, jadi ketika ada pesan yang masuk secara otomatis akan masuk nitifikasi email anda.

Pada kesempatan kali ini saya akan membagikan cara membuat kontak formulir dengan mudah tanpa menggunakan pihak ke tiga. alias menggunakan bawaan blogger.

Adapun langkahnya pertama anda harus login ke akun blog anda terlebih dulu.

Kemudian pada sebelah kiri cari menu tata letak dan kilik.

Dari situ silahkan cari tulisan tambahkan gadget dan pilih formulir kontak.

Setelah di tambahkan silahkan klik save.

Langkah yang berikutnya silahkan anda masuk ke menu tema dan pilih edit HTML tekan ctrl +f dan Cari kode  ]]</b:skin>

Setelah di temukan silahkan copy kode di bawah ini dan paste di bawah kode  ]]</b:skin>.

.widget.ContactForm,.widget #ContactForm1{display: none !important;}

Setelah selesai silahkan klik save.

Langkah yang berikutnya silahkan anda pilih menu halaman dan klik halaman baru.

Setelah munsul dasbor halamanya silahkan beri judul kontak atau apapu terserah anda.

Jangan lupa pilih tampilan HTML dan copy kode di bawah ini lalu letakan pada dashbor halaman tersebut.

Setelah selesai silahkan klik save.

Scrip Kontak Formulir

 <style>
/* Responsive halaman kontak */
#comments,.post_meta,#blogpager {
    display:none
}
form {
    color:#666
}
#kontak {
    width:100%;
}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
    background-color:#fff;
    border-radius:2px;
    color:#333;
    -moz-box-sizing:border-box;
    display:block;
    float:none;
    font-size:16px;
    border:1px solid #ccc;
    padding:6px 10px;
    height:38px;
    width:60%;
    line-height:1.3;
    margin-bottom:20px;
}
#ContactForm1_contact-form-email-message {
    background-color:#fff;
    border-radius:2px;
    color:#333;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    display:block;
    float:none;
    font-size:16px;
    border:1px solid #ccc;
    padding:6px 10px;
    height:175px;
    width:100%;
    line-height:1.3;
    margin:20px auto;
}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus {
    outline:none;
    background:#fff;
    color:#444;
    border-color:#66afe9;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)
}
#ContactForm1_contact-form-submit {
    background:#ff6200 !important;
    text-transform:uppercase !important;
    border:0px !important;
    cursor:pointer;
    color:#fff !important;
    padding:12px 22px !important;
    border-radius:3px !important;
    font-weight:700;
    letter-spacing:1px!important;
}
#ContactForm1_contactformsubmit:hover {
    background:#ea6a1b;
    color:#fff
}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message {
    width:100%;
    margin-top:35px
}
.contact-form-error-message-with-border {
    background:#ea6a1b;
    border:none;
    box-shadow:none;
    color:#fff;
    padding:5px 0
}
.contactform-successmessage {
    background:#4fc3f7;
    border:none;
    box-shadow:none;
    color:#fff
}
img.contact-form-cross {
    line-height:40px;
    margin-left:5px
}
.post-body input {
    width:initial
}
@media only screen and (max-width:640px) {
    #ContactForm1_contact-form-submit {
        width:100%
    }
    #ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
        width: 50% auto;
    }
}
</style>
<form id="kontak" name="contact-form">
    <input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value=""/><input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value=""/><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Submit"/><br/>
    <div style="max-width: 222px; text-align: center; width: 100%;">
        <div id="ContactForm1_contact-form-error-message"></div>
        <div id="ContactForm1_contact-form-success-message"></div>
    </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'] = '1234567890';
        BLOG_attachCsiOnload('');
    }
    _WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1234567890', 'URL-BLOG KAMU', 'ID-BLOG');

    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
        'contactFormMessageSendingMsg': 'Sending...',
        'contactFormMessageSentMsg': 'Your message has been sent.',
        'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.',
        'contactFormInvalidEmailMsg': 'A valid email address is required.',
        'contactFormEmptyMessageMsg': 'Message field cannot be empty.',
        'title': 'Contact Form',
        'blogid': '1234567890',
        'contactFormNameMsg': 'Name',
        'contactFormEmailMsg': 'Email',
        'contactFormMessageMsg': 'Message',
        'contactFormSendMsg': 'Send',
        'submitUrl': 'https://www.blogger.com/contact-form.do'
    }, 'displayModeFull')); //]]>

</script>

Setelah selesai silahkan ganti angka 1234567890 menjadi alamat atau id blog anda.

Jika semua sudah di lakukan maka prosesnya sudah selesai anda bisa cek hasilnya pada halaman yang baru anda bauat atau refresh blog anda.

Cukup sekian dulu tutorial kali ini semoga bermanfaat dan selamat mencoba, jika ada pertanyaan kritik maupun saran silahkan hubungi kami melalui kolom kontak yang tersedia.

Baca juga : Cara membuat sitemap Seo Friendly