Cara Membuat Form Contact Email Pada Blog

Mastutor26 - Salah satu elemen yang penting yang harus ada di miliki pada website atau blog yaitu Halaman Kontak. Halaman ini berfungsi sebagai sarana di mana pengunjung website atau blog kita dapat berkomunikasi atau menghubungi pengelola website secara langsung.

Untuk memudahkan pengunjung berkomunikasi atau mengirimkan sebuah pesan, maka biasanya perlu disediakan sebuah form di halaman Kontak ini. 

Di mana form ini dapat diisi oleh pengunjung untuk bisa langsung mengirimkan pesan  berupa keluhan link yang tidak aktif atau lainnya kepada pengelola website atau blog kita.

Untuk Tujuannya tentu agar pengunjung tidak perlu repot-repot untuk mengirim email, SMS, kepada pengelola website atau blog.

Ikutin cara caranya agar bisa kekirim ke alamat kita

<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'] = 'Id blog kamu';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\Id blog kamu', document.location.origin , 'Id blog kamu');
_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': 'Id Blog kamu',
    'contactFormNameMsg': 'Nama Anda',
    'contactFormEmailMsg': 'Email Anda',
    'contactFormMessageMsg': 'Pesan',
    'contactFormSendMsg': 'Kirim',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>

|Demo |

Kalian ganti teks yang Id Blog kamu  dengan ID blog kalian  disini sangat penting agar pesan yang dikirim masuk ke alamat email kalian

Jika sudah sekarang masuk → ke halaman Blogger.com dan buatlah halaman baru dengan judul yang Contact atau hubungi kami 

• 1 menunjukan bahwa alamat id blog kalian

Sebelum menyalin kode form, pastikan badan postingan berada di mode HTML. Sisipkan kode form tadi lalu publikasikan halaman dan lihat bagaimana hasilnya.

Share this post