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

1. Sebagai syarat diterima sebagai publisher oleh Google Adsense.
2. Sebagai wadah menerima masukan, laporan, dan kritikan.
3. Sebagai tempat menjalin hubungan kerja sama bisnis atau sponsorship.
4. 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:

1. Style Standard
2. Style Neumorphism

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

1. Buka dashboard Blogger
2. Perhatikan bagian Address Bar browser, anda akan menemukan URL seperti ini
   

   https://draft.blogger.com/blog/posts/1234567890123456789

3. Bagian yang saya tandai warna kuning adalah ID Blog anda. Jumlahnya ada 19 angka.
4. Salin ID tersebut, karena nanti akan dibutuhkan.

Langkah 2: Membuat Halaman Baru

1. Buka dashboard Blogger
2. Tekan Halaman
3. Tekan + Halaman Baru
4. Isi kolom Judul dengan nama Kontak
5. Tekan logo Pensil 🖉, pilih < > Tampilkan HTML
6. 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:

1. Buka Blogger
2. Tekan Tema
3. Pilih Edit HTML
4. Cari kode ini
   

   .blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea

5. 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}

6. 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}

7. 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