Cara Membuat Contact Form Di Blog

Iklan 728x90

Cara Membuat Contact Form Di Blog

Halo sobat Blogger, pada artikel kali ini saya akan membuatkan tutorial Cara Membuat Contact Form di blog tanpa javascript khusus. Cara ini saya dapat dari blog Dunia Blanter .

Contact Form adalah sebuah halaman di website atau blog yang digunakan untuk menghubungi admin atau pemilik website.

Contack Form ini juga biasa disebut dengan Contact Us, Contack Me, Kotak saran, dan Hubungi kami. Dari semua nama tersebut intinya sama saja yaitu untuk menghubungi admin atau pemilik blog.

Baca Juga : Cara Mudah Menghubungkan Domain Ke Blogspot

Contact form yang akan kita buat kali ini tampilannya cukup sederhana tapi tetap menarik, tampilannya seperti gambar berikut ini:

Cara membuat contact form di blog

Nah bagaimana, apakah kamu tertarik untuk membuatnya?

Jika tertarik ingin membuatnya silahkan ikuti tutorial cara membuatnya berikut ini.

Tutorial Cara Membuat Contact Form di Blog


1. Masuk ke Blogger
2. Pilih Laman > Laman Baru
3. Pada navbar pilih mode "HTML" bukan compose

Jika sudah punya halaman kontak anda tinggal pilih edit saja.

Selanjutnya silahkan letakan kode berikut ini di halaman Contack Form anda pada mode HTML

<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;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="blanterinput">
<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="blanterinput">
<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="blanterinput">
<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>
<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'] = '5073470166847169881';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5073470166847169881','//aditimes.com/','5073470166847169881');
_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': '5073470166847169881', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Selanjutnya silahkan ganti //aditimes.com/ dengan URL Blog anda

Ganti juga semua kode 85073470166847169881 dengan Blog ID anda

Untuk merubah warna dasar silahkan ganti kode warna #07ACEC dengan kode warna yang anda inginkan.

Result

Nah itulah tutorial cara membuat contact form yang bisa saya share kali ini. Jika dirasa bermanfaat silahkan di bagikan kepada teman-teman yang lain ya..

Sekian dulu artikel kali ini, sampai jumpa di artikel berikutnya :D

Baca Juga
SHARE

Related Posts

Subscribe to get free updates

5 comments

  1. sudah diterapkan dan hasilnya bagus,,,,, sangat bermanfaat artikenya,,,,

    ReplyDelete
  2. Sangat bermanfaat gan. Akan ane praktekin.
    Tulisan sangat rapi dan mudah dipahami.
    Terima kasih gan, sangat membantu ane,

    Fakta

    ReplyDelete

Post a Comment