Cara Membuat Contact Form Blog Pada Halaman Statis Blog

Assalamu'alaikum Sahabat Blogger.
Cara Membuat Contact Form Blog Pada Halaman Statis Blog - Pada postingan kali ini saya akan memberikan Cara bagaimana membuat Contact Form pada halaman sebuah blog. Sebelum masuk ke pembahasan kita harus paham, apa sih yang dimaksud Contact Form dan apa sih keuntungan dan kerugiannya jika kita membuat halaman Contact Form ?

Pengertian Contact Form

Contact Form adalah halaman sebuah blog atau website yang digunakan untuk memudahkan pembaca atau pengiklan untuk menghubungi admin atau pemilik blog tersebut.

Baca Juga : Cara Membuat Disclaimer di Blog Dengan Mudah


Keuntungan Menggunakan Contact Form

  1. Mempermudah pembaca untuk menyampaikan sebuah pertanyaan dari salah satu artikel anda secara privasi.
  2. Mempermudah pengiklan untuk menghubungi pemilik blog.
  3. Contact Form adalah salah satu syarat untuk mendaftarkan blog kita kepada Google Adsense.

    Kerugian Menggunakan Contact Form

    1. Kerugiannya ialah terkadang para pengunjung sengaja mengirimkan pesan kepada pemilik blog maupun disengaja ataupun tidak disengaja.

    Nah, setelah anda tau penjelasan, keuntungan dan kerugian tentang Contact Form sekarang kita masuk ke pembahasan intinya yaitu cara membuat halaman Contact Form pada blog.

    Tahap #1
    Silakan log in ke blog anda.

    Tahap #2
    Lalu anda klik halaman -> Halaman baru.
      Cara Membuat Contact Form Blog Pada Halaman Statis Blog

      Tahap #3
      Masukan kode script dibawah ini pada halaman HTML.
      Cara Membuat Contact Form Blog Pada Halaman Statis Blog

      Kode Script
      <form name="contact-form"> <div class="formcolumn1"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> </div> <div class="formcolumn2"> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> </div> <div class="formcolumn3"> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"> </textarea> </div> <div class="formcolumn4"> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <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"> #ContactForm1,#comments{ display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{ display:inline-block; width:100%; height:auto; margin:10px auto; padding:14px; background:#fff; color:#222; border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{ font-family:'Poppins'; width:100%; height:250px; margin:10px auto; padding:14px; background:#fff; color:#222; border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{ background:#fff; outline:none; border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{ background:#fff; color:#5f6368; font-size:16px; width:161px; height:45px; float:left; padding:0 0 0 20px; margin:10px 0 3px 5px; cursor:pointer; border:none; border-radius:24px; box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149); transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{ position:relative} .formcolumn4:before{ background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png); background-position:center; background-repeat:no-repeat; background-size:20px; content:''; display:block; height:63px; width:32px; position:absolute; z-index:1; left:15px; top:0} #ContactForm1_contact-form-submit:hover{ background:#fafafb; box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{ margin-top:35px} form{ color:#888} .formcolumn1,.formcolumn2{ float:left; width:50%} .formcolumn1,.formcolumn2{ margin:0 0 10px 0; padding:0 10px 0 0} .formcolumn2{ padding:0 0 0 10px} @media only screen and (max-width:768px){ .formcolumn1,.formcolumn2{ width:100%; padding:0} } </style> <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'] = '3147969412929713724'; BLOG_attachCsiOnload(''); } _WidgetManager._Init('//www.blogger.com/rearrange?blogID\3147969412929713724','//blogmasputro.blogspot.com/','3147969412929713724'); _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': '3147969412929713724', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'} , 'displayModeFull')); //]]> </script>
      Source : Arlinadzgn.com
      Note : Ganti ID blog 3147969412929713724 dengan ID Blog anda
      Dan hasilnya akan seperti gambar dibawah ini :
      Cara Membuat Contact Form Blog Pada Halaman Statis Blog

      Nah, sekarang anda sudah punya halaman Contact Form. Semoga artikel ini bermanfaat. TerimakasihWassalamu'alaikum

      Penulis : MasPutro.com

      2 Komentar

      Posting Komentar

      Lebih baru Lebih lama