Cara Membuat Contact Us Di Blog

Cara Membuat Contact Us Keren di Blog

Contact Form Keren

Cara membuat contact us di blogger - Contact Us atau yang biasa disebut "hubungi kami di website" adalah salah satu hal yang wajib dimiliki oleh sebuah blog agar mempermudah seorang menghubungi kita ketika ada tawaran kerja sama.

Contact Us bisa kita buat dengan 2 cara yaitu dengan menggunakan Tools yang beredar di Google atau kita bisa membuatnya dengan bantuan kode CSS dan Html.

Tentu saja Contact Us yang dibuat menggunakan tools Google akan terlihat biasa saja berbeda dengan menggunakan kode CSS dan Html akan terlihat menarik dan bervariasi karena kita bisa mengkostumisasi nya dengan kode-kode CSS yang kalian pelajari agar bisa kalian modifikasi.

Tetapi bagi kalian yang tidak paham dengan CSS atau html disini saya sudah menyediakan 2 contoh Contact Form Keren yang sudah dimodifikasi oleh sang pembuatnya (Contact ini bukan saya yang buat)

Contact Form By Id Blanter

Contact Form Keren

Contact Form By Igniel

Contact Form Keren


Diatas adalah contoh Contact Us yang akan saya bagikan pada pertemuan kali ini. Perlu diketahui pesan otomatis akan masuk pada email blog yang kita gunakan jadi kalian tidak perlu repot-repot untuk mengutak-atik nya lagi, tinggal paste dan save. Simak tutorial dibawah ini.

Cara Membuat Contact Us Blog


Contact Us By Arlina
  • Silahkan masuk pada blog kalian => lalu buat halaman baru, pada halaman ini kalian rubah  mode penulisan menjadi HTML bukan Compose lalu paste kode dibawah ini pada halaman tersebut.




Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.



<form id="kontak-arlina" 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" size="30" placeholder="Email *" 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="Send Message" /> 

<div style="max-width: 100%; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak-arlina{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}

#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{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}

#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

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-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '3263220808940184577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3263220808940184577','//infiniteidn.blogspot.com/','3263220808940184577');

_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': '3263220808940184577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>


  • Isi judul halaman dengan nama Contact Us atau Hubungi Saya.
  • Ganti semua kode id 3263220808940184577 dengan milik kode id blog kalian. Terdapat 4 kode id silahkan kalian ganti semua satu persatu.
  • Dan ganti juga infiniteidn.blogspot.com dengan nama blog kalian.
  • Terakhir simpan.

Contact Us By Id Blanter

  • Caranya juga sama dengan cara yang pertama kalian buka blog lalu buat halaman baru ganti ke mode HTML lalu paste kode ini pada halaman tersebut.



<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'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8866800899420715293','//idblanter.com/','8866800899420715293');
_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': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


  • Cari kode idblanter lalu kalian ganti dengan alamat blog kalian.
  • Lalu cari kode id 8866800899420715293 dan ganti dengan kode id milik sobat.
  • Terakhir klik save dan Selesai.
Untuk mendapatkan Id blog kalian tinggal klik link home dashboard blogger kalian dan copy kode yang seperti ini.

Id Blog

Nah bagaimana cukup mudah bukan Cara membuat contact us di blogger ? Caranya cukup simple dan sederhana, jika kalian paham CSS kalian bisa modifikasi agar lebih menarik dan keren. Jika memang belum paham ataupun ada yang error kalian bisa tanyakan pada kolom komentar dibawah, agar saya bisa bantu memperbaiki.

Terimakasih


"NKRI Harga Mati Kalo Kamu Saya Perjuangin Sampe Mati"


Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Membuat Contact Us Di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel