Cara Membuat Halaman Formulir Kontak Profesional Untuk Blogspot #2

Cara Membuat Halaman Formulir Kontak Profesional Untuk Blogspot - Hallo sobat blogger, gimana kabarnya???? Pada kesempatan ini saya akan membagikan tutorial tentang Cara Membuat Halaman Formulir Kontak Untuk Blogspot.

Dengan Formulir ini, pengunjung akan membagikan informasi maupun masukan kepada admin ke dalam formulir kontak tersebut.

Yang mana pesan tersebut akan terkirim ke akun Gmail administrator di blog tersebut. Jika sobat ingin memasangnya, Berikut adalah tutorialnya :

Langkah-Langkah Yang Harus Diikuti :

Langkah 1 : Anda masuk ke blogspot anda, lalu klik "Halaman" ⇒ "Halaman Baru"

Langkah 2 : Beri nama artikel tersebut, "Contact Form" atau "Contact Us" misalnya.

Langkah 3 : Buka tab "Editor HTML" lalu Tempelkan kode dibawah ini ke tab HTML pada Langkah 2.

<style type="text/css">
.AnazMyID {
    float: none;
    position: relative;
    margin: 25px 0;
    margin-right: 9px
}
.AnazMyID input,
.AnazMyID textarea {
    font-size: 16px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd
}
.AnazMyID input:focus,
.AnazMyID textarea:focus {
    outline: 0
}
.AnazMyID label {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 9px;
    transition: .2s ease all
}
.barbsd {
    position: relative;
    display: block;
    width: 100%
}
.barbsd:after,
.barbsd:before {
    content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #00a16b;
    transition: .2s ease all
}
.barbsd:before {
    left: 50%
}
.barbsd:after {
    right: 50%
}
.AnazMyID input:focus~.barbsd:after,
.AnazMyID input:focus~.barbsd:before,
.AnazMyID textarea:focus~.barbsd:after,
.AnazMyID textarea:focus~.barbsd:before {
    width: 50%
}
.lightbsd {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}
.AnazMyID input:focus~label,
.AnazMyID input:valid~label,
.AnazMyID textarea:focus~label,
.AnazMyID textarea:valid~label {
    top: -19px;
    font-size: 14px;
    color: #00a16b
}
input#ContactForm1_contact-form-email-message {
    height: 150px
}
input#ContactForm1_contact-form-reset,
input#ContactForm1_contact-form-submit {
    color: #fff !important;
    background: #00a16b;
    padding: 14px 25px;
    border-radius: 4px;
    border: none;
    outline: 0;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 16px;
    margin: 10px 5px 0 0
}
input#ContactForm1_contact-form-reset:hover,
input#ContactForm1_contact-form-submit:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}
#ContactForm1_contact-form-error-message {
    float: right;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    padding:0 5px
}
.post-body img{margin:0!important;display:inline;padding-left:10px;border-radius:0}
#ContactForm1_contact-form-success-message {
    float: right;
    background: #357A37;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    padding:0 5px
}
</style>
<br />
<form name="contact-form">
<div class="AnazMyID">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-user"></i> Nama Kamu</label>
    </div>
<div class="AnazMyID">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-envelope"></i> Email Anda</label>
    </div>
<div class="AnazMyID">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-comment"></i> Pesan</label>
    </div>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
    <input id="ContactForm1_contact-form-reset" type="reset" value="Hapus" />
    <br />
<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/199156504-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'] = '6020555554161964193';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6020555554161964193', document.location.origin , '6020555554161964193');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Mengirim...',
    'contactFormMessageSentMsg': 'Pesan Anda Terkirim.',
    'contactFormMessageNotSentMsg': 'Tidak dapat mengirim pesan.  Silakan coba lagi nanti.',
    'contactFormInvalidEmailMsg': 'Masukkan alamat email yang valid:.',
    'contactFormEmptyMessageMsg': 'Isi kotak pesan diatas.',
    'title': 'Contact Form',
    'blogId': '6020555554161964193',
    'contactFormNameMsg': 'Nama Anda',
    'contactFormEmailMsg': 'Email Anda',
    'contactFormMessageMsg': 'Pesan',
    'contactFormSendMsg': 'Kirim',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>

Langkah 4 : Sobat ganti semua IDBlog berikut ini 6020555554161964193 menggunakan ID Blog sobat.

Jika sobat tidak melihat email masuk, cari di Folder SPAM dan tandai sebagai bukan SPAM.

Agar Formulir kontak berfungsi, jangan matikan JS Default blog.

Demikian artikel dari saya tentang Cara Membuat Halaman Kontak Profesional Untuk Blogspot, Semoga artikel yang saya bagikan bisa bermanfaat bagi sobat semua. Terima Kasih dan Selamat Mencoba