Langkah-langkah Sederhana Membuat Halaman 'Contact Us' di Blogger Anda

 Bagaimana Cara Membuat Halaman 'Contact Us' yang Menarik di Blog?

Prosesnya sangat sederhana, hampir mirip dengan membuat postingan artikel. Anda tidak perlu menghabiskan banyak waktu, kurang dari satu menit, dan Anda sudah bisa menyelesaikannya. Satu-satunya persyaratan adalah Anda perlu memiliki script formulir kontak yang telah siap pakai.

Anda beruntung mengunjungi halaman ini, karena saya telah menyiapkan script HTML dan CSS yang diperlukan.

Tanpa perlu menunggu lebih lama, mari kita ikuti langkah-langkah cara membuat halaman 'Contact Us' dengan HTML dan CSS di Blogger:

1. 1. Buka Dasbor Blogger Anda.
2. 2. Buat halaman baru dan beri judul 'Contact Us'.
3. 
   
   
   
   
   
4. 3. Salin seluruh kode yang tercantum di bawah ini

   <form name="contact-form">
     Nama <br />
     <input
       id="ContactForm1_contact-form-name"
       name="name"
       size="30"
       type="text"
       value=""
     /><br />
     <br />
     Email
     <span style="color: #f56954; font-size: x-small; font-weight: bold;"
       >important</span
     >
     <br />
     <input
       id="ContactForm1_contact-form-email"
       name="email"
       size="30"
       type="text"
       value=""
     /><br />
     <br />
     Isi Pesan
     <span style="color: #f56954; font-size: x-small; font-weight: bold;"
       >important</span
     ><br />
     <textarea
       cols="25"
       id="ContactForm1_contact-form-email-message"
       name="email-message"
       rows="5"
     ></textarea>
     <br />
     <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
     <br />
     <div style="max-width: 222px; text-align: center; width: 100%;">
       <div id="ContactForm1_contact-form-error-message"></div>
       <div id="ContactForm1_contact-form-success-message"></div>
     </div>
   </form>
   <script
     src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"
     type="text/javascript"
   ></script>
   <br />
   <script type="text/javascript">
     //<![CDATA[
     if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4743004460182732382';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4743004460182732382','//https://unduhdekaka.blogspot.com/','4743004460182732382');
     _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '4743004460182732382', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
     //]]>
   </script>
   <br />
   <style scoped="" type="text/css">
     #comments {display:none;}
     #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
     height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
     #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
     #ContactForm1_contact-form-submit{float:left;background:#3182d9;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
     #ContactForm1_contact-form-submit:hover {background:#3a3a3a;color:#fff;}
     #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
     .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
     .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
     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>
   

   Ganti beberapa kode di bawah dengan blog miliki kamu:

   • 4743004460182732382: ID Blog kamu
   • www.unduhdekaka.blogspot.com : Alamat blog kamu tanpa http/https

4. Setelah menyalin kode tersebut, tempelkan di dalam Tampilan HTML. Jika tidak ada kesalahan, cukup klik tombol Publikasikan

berikut contoh tampilannya

Dengan mengikuti langkah-langkah ini, Anda akan dengan cepat memiliki halaman 'Contact Us' yang menarik dan siap digunakan di blog Anda. Jangan ragu untuk melanjutkan dengan langkah-langkah berikutnya untuk mendukung pengalaman komunikasi antara Anda dan pembaca.