Cara Membuat Halaman Kontak Email Blogger Terbaru

Saifulah.id - Halaman Kontak di Blogger menjadi salah satu bagian yang sangat penting dibuat agar pengunjung dapat selalu terhubung dengan kita secara pribadi.

Fungsi Halaman Kontak

Sebagai syarat diterima sebagai publisher oleh Google Adsense.
Sebagai wadah menerima masukan, laporan, dan kritikan.
Sebagai tempat menjalin hubungan kerja sama bisnis atau sponsorship.
Sebagai cara berkomunikasi secara personal, rahasia, dan aman.

Gaya Halaman Kontak Median UI

Ada 2 jenis gaya tampilan form kontak yang bisa kita buat di template Median UI, yaitu:

Style Standard
Style Neumorphism

Cara Membuat Halaman Kontak Email Blogger Terbaru

Sehari yang lalu ada sahabat kita, Melki Space bertanya tentang bagaimana cara membuat halaman kontak. Jadi postingan ini saya buat khusus untuk menjawab pertanyaan tersebut.

Cara Membuat Halaman Kontak Blogger

Ada 4 langkah yang harus kita lakukan untuk membuat halaman Kontak, diantaranya:

Langkah 1: Temukan ID Blog

Buka dashboard Blogger
Perhatikan bagian Address Bar browser, anda akan menemukan URL seperti ini
https://draft.blogger.com/blog/posts/1234567890123456789
Bagian yang saya tandai warna kuning adalah ID Blog anda. Jumlahnya ada 19 angka.
Salin ID tersebut, karena nanti akan dibutuhkan.

Langkah 2: Membuat Halaman Baru

Buka dashboard Blogger
Tekan Halaman
Tekan + Halaman Baru
Isi kolom Judul dengan nama Kontak
Tekan logo Pensil 🖉, pilih < > Tampilkan HTML
Lalu Salin salah satu kode di bawah ini

A. Style Standard

<p>Silahkan hubungi kami jika Anda menemukan link error atau ingin memberikan masukan dan saran.</p>

<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<div class='input-area'>
<label for='ContactForm1_contact-form-name'>Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email'>Email <span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email-message'>Message <span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
</div>
<div class='input-area'>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
</div>
<div class='notif-area'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000','//www.saifullah.id/','000000000000000000');
_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': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

B. Style Neumorphism

<div style="text-align: left;">Jika Anda berniat untuk menawarkan kerjasama atau menjalin bisnis, silakan hubungi kami melalui kontak email di bawah</div><br />
<style>
/* css form kontak blogger design by wendy code */
.saiful-kntk-frm{position:relative;display:inline-block;width:100%;max-width:100%;padding:30px 10px 10px 10px;background-color:#f2f3f7;border-radius:10px;box-shadow: 0 2px 8px 0 rgb(0 0 0 / 30%)}
.saiful-dt-inp{position:relative;margin-bottom:30px;margin-right:5px}
.saiful-dt-inp input[type=text]::placeholder,.saiful-dt-inp textarea::placeholder{color:#999!important;font-size:14px}
.saiful-dt-inp input:focus::placeholder,.saiful-dt-inp textarea:focus::placeholder {color: transparent!important}
.saiful-dt-inp label{border-radius:10px;color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:30px;top:-15px;transition:.2s ease all;padding:0 10px;background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);display:none}
.saiful-dt-inp input[type=text]:focus + label,.saiful-dt-inp input[type=text].show + label,.saiful-dt-inp textarea:focus + label,.saiful-dt-inp textarea.show + label{display:block;}
.saiful-dt-inp input[type=text],.saiful-dt-inp textarea,.saiful-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%);padding:15px 15px 15px 40px;border-radius:5px;border:none;outline:none;width:100%}
.saiful-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: -3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);width: 100px;text-align: center;padding-left:25px;margin: -50px auto;color:#999;font-weight:bold;font-size:20px}
.saiful-dt-inp.outset input[type=button]:active {box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%)}
.saiful-dt-inp input[type=text]:active,.saiful-dt-inp input[type=text]:focus,.saiful-dt-inp textarea:active,.saiful-dt-inp textarea:focus{outline:none}
.saiful-knt-notif{color:#ff0000}
.saiful-dt-inp.icon-user:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'></path></svg>") center / contain no-repeat}
.saiful-dt-inp.icon-email:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path></svg>") center / contain no-repeat}
.saiful-dt-inp.icon-msg:before{content:"";position:absolute;left:10px;top:-36px;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z'></path></svg>") center / contain no-repeat}

/* css darkmode sesuaikan class ( .drK ) dengan template yang kalian gunakan agar dapat berfungsi */
.drK .saiful-kntk-frm,.drK .saiful-dt-inp label,.drK .saiful-dt-inp input[type=text],.drK .saiful-dt-inp textarea,.drK .saiful-dt-inp.outset input[type=button]{background-color:#2d2d30;color:#aaaaad}
.drK .saiful-dt-inp input[type=text],.drK .saiful-dt-inp textarea,.drK .saiful-dt-inp.outset input[type=button]:active{box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(36 36 36), inset -0.2rem -0.2rem 0.5rem rgb(32 32 32)}
.drK .saiful-dt-inp.outset input[type=button],.drK .saiful-dt-inp label{box-shadow:-3px -2px 4px rgb(36 36 36), 5px 5px 8px rgb(32 32 32)}
</style>

<div class="saiful-kntk-frm" id="ContactForm1">
<form name="ContactForm">
<div class="saiful-dt-inp icon-user">
<input id="ContactForm1_contact-form-name" name="name" type="text" />
<label>Nama</label>
</div>
<div class="saiful-dt-inp icon-email">
<input id="ContactForm1_contact-form-email" name="email" type="text" />
<label>Email</label>
</div>
<div class="saiful-dt-inp icon-msg">
<textarea id="ContactForm1_contact-form-email-message" name="message" rows="3"></textarea>
<label>Pesan</label>
</div>
<div class="saiful-dt-inp outset">
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
</div>
<div class="saiful-knt-notif">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</div>
</form>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>
/*
ubah 000000000000000000 dengan blog id milik mu ada 4 yang harus di ubah
ubah www.domainmu.com dengan domain milikmu
source code : https://median-ui.jagodesain.com
*/

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = 'templatesV1';
window['blogger_blog_id'] = '000000000000000000';
BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\000000000000000000', '//www.saifullah.id/', '000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
'contactFormMessageSendingMsg': 'Mengirim...',
'contactFormMessageSentMsg': 'Pesan Anda telah dikirim..',
'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.',
'contactFormInvalidEmailMsg': 'Diperlukan alamat email yang valid.',
'contactFormEmptyMessageMsg': 'Bidang pesan tidak boleh kosong.',
'title': 'Contact Form',
'blogId': '000000000000000000',
'contactFormNameMsg': 'Name',
'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message',
'contactFormSendMsg': 'Send',
'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));

var inputs = document.querySelectorAll('.saiful-dt-inp input[type=text], .saiful-dt-inp input[type=email], .saiful-dt-inp textarea');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'show' : 'none';
this.setAttribute('class', bg);
});
}
</script><br />

Langkah 3: Mengganti Semua Kode

Ganti 000000000000000000 dengan ID Blog kalian
Ganti www.saifullah.id dengan alamat domain kalian
Untuk semua tulisan lain yang ditandai dengan warna biru, boleh diganti sesuai keinginan

Langkah 4: Mempublikasikan

Setelah semua kode yang ditandai pakai warna diganti, tekan Publikasikan.

Tambahan

Jika kalian pakai kontak form style Neumorphism, ada kode CSS yang harus di edit di dalam template setelah menerapkan keempat langkah di atas, yaitu:

Buka Blogger
Tekan Tema
Pilih Edit HTML
Cari kode ini
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea
Maka kalian akan menemukan kode seperti ini
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea{display:block;width:100%;border:1px solid rgba(230,230,230,1);border-radius:2px;outline:0; padding:15px 15px;margin-bottom:15px}
Tambahkan kode 15px 35px di ujung kode padding:15px 15px, maka hasilnya jadi seperti ini
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea{display:block;width:100%;border:1px solid rgba(230,230,230,1);border-radius:2px;outline:0; padding:15px 15px 15px 35px;margin-bottom:15px}
Simpan Tema

LIVE DEMO

Demikian Cara Membuat Halaman Kontak Kami (Contact Us Page) di Blogger versi terbaru. Jadi kita bisa memilih tampilan seperti apa form kontak di blog kita. Semoga bermanfaat.

Referensi:
https://median-ui.jagodesain.com/p/contact.html
https://www.kaskus.co.id/thread/5e327e2609b5ca16e223acc0/tutorial-desain-neumorphism---tren-desain-2020/
https://www.wendycode.com/2021/11/widget-kontak-form-blogger-neumorphism.html

31 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐

Mas Bambang 1/23/2022 04:44:00 PM

bahas median ui versi amp dong
1. Saifullah.id 1/24/2022 02:28:00 AM
  
  Ok. Masukkannya kita pertimbangkan ya. Kalau ada waktu akan kita bahas versi amp juga. Kira-kira mau dibuatkan AMP Median UI versi 1.5 atau 1.6 kak?
2. Mas Bambang 1/24/2022 10:38:00 AM
  
  1.6
Blue Sky 1/23/2022 10:00:00 PM

Wah, terimkasih banyak min...
1. Saifullah.id 1/24/2022 02:30:00 AM
  
  Sama-sama kak 😊
2. Blue Sky 1/24/2022 02:43:00 PM
  
  saya mau nanya lagi min, di blog saya yg ketikannya itu terlalu pinggir ke kiri (dibawah logo Nama, Email dan Pesan) Sehingga ketika mau ngirim pesan, beberapa hurufnya terlindung oleh logo tersebut. Kira2 untuk mengubah (menggeser ke kanan itu yg diedit code yang mana ya?) Terimakasih.
3. Saifullah.id 1/24/2022 10:52:00 PM
  
  Bisa kirim linknya kak, biar saya cek langsung kondisinya.
4. Blue Sky 1/25/2022 10:40:00 PM
  
  https://wevaneo.blogspot.com/p/contact.html ini kak
5. Saifullah.id 1/25/2022 11:37:00 PM
  
  Cara memperbaikinya sudah saya tambahkan di dalam postingan. Baca bagian Tambahan atau Klik Disini
6. Blue Sky 1/26/2022 06:11:00 PM
  
  Sudah bisa kak, Terimakasih banyak kak.
7. Saifullah.id 1/26/2022 11:29:00 PM
  
  Syukurlah. Sama-sama 😊
Sephiria Evangelina 1/24/2022 10:27:00 PM

Mas mau nanya nih kalo Homepage median Ui yang versi 1.6 biar jadi grid gimana ya mas
1. Saifullah.id 1/24/2022 10:41:00 PM
  
  Saya juga gak tau kak, belum sempat bereksperiment secara mendalam pakai template Median UI 1.6
Iwan 4/02/2022 10:28:00 PM

mas, ini punya saya kok ada error JSON-LD
Urutan pelolosan dalam string salah.
1. Saifullah.id 4/03/2022 12:06:00 AM
  
  Pakai template apa?
Fery 5/30/2022 04:36:00 PM

kak kalo udh pasang form itu nanti pesannya masuk ke mana yah?
1. Saifullah.id 5/30/2022 10:44:00 PM
  
  Masuk ke kontak masuk email kita yang terhubung ke Blogger
Ilmu Internet 6/16/2022 01:48:00 PM

thanks untuk widgetnya, kebetulan semenjak ganti median ui halaman kontak ikut berubah!
Fery 7/13/2022 12:50:00 PM

sekrang form kontaknya gak berfungsi kak, kalo dulu berpungsi tapi sekrang engga. kira kira kenapa yah atau ada updatean htmlnya?
1. Saifullah.id 8/31/2022 11:58:00 PM
  
  Ada update terbaru dari Blogger
Nazhril 8/30/2022 07:31:00 PM

Kak kok punya saya gak mau terkirim, tulisanya mengirim trus
1. Saifullah.id 8/31/2022 11:58:00 PM
  
  Ada pembaruan dari blogger kak.
Liswrit 12/07/2022 05:01:00 PM

Bang, punyaku kok tulisannya sending terus. Pas aku cek di email, gak ada pesan masuk.
1. Saifullah.id 12/08/2022 05:09:00 AM
  
  Ada update kode dari Blogger kak. Makanya tutorial kontak ini mungkin tidak berfungsi lagi.
Deyvinchi 12/07/2022 07:40:00 PM

Min mau nanya. nanti kalau misal ada yang kontak kita gitu, ke kirim nya kemana ya ? ke email kita kah atau masuk ke "komentar" di blog kita ? Soalnya saya pakai contact form di blog lain ga work min. Mohon bantunnya.
1. Saifullah.id 12/08/2022 05:12:00 AM
  
  Sebaiknya kalau cuma pertanyaan seputar postingan, nanya nya lewat komentar blog saja. Karena akan lebih mempermudah pemilik blog tau topik pembahasaannya seputar apa. Sedangkan kontak email itu biasanya di khususkan untuk bertanya diluar topik yang ada di Blog . Misalnya untuk menawarkan kerjasama yang sifatnya pribadi antar individu.
2. Deyvinchi 12/08/2022 05:17:00 AM
  
  Itu dia min memang tujuannya kalau ada yang kontak secara pribadi. Soalnya saya nyediain space banner mandiri bukan pake adsense. Sementara cuma nyantumin email aja di contact page.
  Ada saran min pake script apa gitu? nuhun
3. Saifullah.id 12/08/2022 05:22:00 AM
  
  Pakai form kontak bawaan dari blogger aja kak. Masuk ke TATA LETAK, lalu ADD GADGET, lalu cari FORM CONTACT
4. Saifullah.id 12/08/2022 05:24:00 AM
  
  Kalau nyantumin email sebaiknya ditambah link https://mailto:alamat emailnya. Jadi setiap kali ada yang klik emailnya akan langsung masuk ke aplikasi Gmail
5. Deyvinchi 12/08/2022 06:47:00 PM
  
  Nah iya bisa diakali pakai mailto: . Oke min saya coba juga pake gadget form. Makasih banyak saran nya min. Arigatou..
6. Saifullah.id 12/08/2022 10:14:00 PM
  
  Sama-sama 😊

TugaSiswa.com