Cara Membuat Contact Form (Halaman Kontak) Responsive di Blogger

Sebelumnnya, Apa itu Contact form, atau halaman Kontak? secara sederhana, ini adalah salah satu sarana terbaik untuk pembaca blog kamu menghubungi kamu secara pribadi, atau mungkin tetentang hal lainnya yang secara langsung menghubungkan kamu dengan pembaca website kamu secara pribadi.

Di setiap website sangat disarankan untuk menyediakan halaman Kontak untuk pembacanya, sebenarnya ada begitu banyak alternatif lain untuk membuat halaman kontak dengan mudah dengan bantuan pihak ketiga.

Namun di artikel ini saya akan memberikan kamu alternatif terbaiknya, dengan memasang halam kontak yang responsive pada website kamu.

Demo For Contact Form

Sebelum halaman kontak responsive yang akan saya bagikan kali ini terpasang di website kamu, ada baiknya mengikuti beberapa langkah-langkah penting dibawah ini:

Langkah Pertama

1. Menuju ke blogger.com
2. Pergi ke Tata letak - Tambahkan Gadget

3. Klik Gadget - Formulir Kontak

4. Selanjutnya letakkan widget di bagian bawah postingan seperti ini:

5. Save

Langkah Kedua

6. Menuju Ke Tema - Edit HTML

7. Letakkan CSS dibawah ini diatas kode ]]></b:skin>

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

8. Save

Langkah Terahir

9. Menuju ke Halaman - Halaman Baru - HTML, kamu dsini membuat judul dengan yang kamu inginkan

10. Copy scrip dibawah ini dan pastekan pada langkah di atas :

 <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>

Note: Ganti '1234567890' dengan Id blog kamu dan tambahkan URL gambar. Id blog kamu terdapat pada tab broswer seperti ini: