Cara Menciptakan Contact Form Di Blog Ibarat Arlina Design

Teamwork212 - Pada kesempatan kali ini cara aku akan membagikan sedikit tutorial singkat perihal cara membuat contact form atau contact us ala arlina design.

Bukan hal yang sulit sahabat kalau kita udah usang terjun di dunia blogging tapi apalah daya kalau kita masih newbie atau pendatang baru.

Formulir kontak yang aku kasih kali ini merupakan formulir kontak milik Arlina Design. Tampilannya dibilang sangat manis dan elegan.

Berikut Cara Membuat Contact Form menyerupai milik arlina design

➽ Hal yang paling pertama sudah niscaya sahabat harus punya blog, sesudah itu buka blogger milik sobat. kalau sudah terbuka cari sajian Tata Letak ➯ klik sajian Tambahkan Gadget ➯ kalau sudah terbuka cari widget yang bertuliskan Formulir Kontak klik tanda tambah yang ada di sampingnya sesudah itu klik simpan.

Lihat Gambar

jika dalam blog sahabat sudah ada formulir kontak abaikan saja langkah yang pertama.

➽ Setelah langkah yang pertama sudah final sahabat akan di tuntun ke langkah berikutnya dimana sahabat akan di giring ke sajian tema. klik sajian Tema ➯ tekan goresan pena Edit HTML ➯ Tambahkan isyarat css di bawah ini sebelum </head>

 <style type='text/css'>
 #ContactForm1,#ContactForm1 br{display:none}
 </style>

➽ Jika sudah klik tombol Simpan.

➽ Setelah itu sahabat masuk ke sajian Halaman ➯ klik tombol Halaman Baru tambahkan isyarat di bawah ini di HTML post bukan di Compose Jika salah penempatan maka ulangi lagi.

 <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:'Roboto';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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFepllsVv6oelBFkk1YDndM2woJQjW_CoL6mj_yXtCOAqL2u4SyHJQSrdfOVRbqunvF5yaw5OBvuL1lAGmrcwWcvSv3QnD6XRCxaCLMKqROaE-2GhWjDmrNws7eRi4vCGj97bVCcssjOU/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>

Untuk lebih terang lihat teladan gambar dibawah

Edit juga setelan entri pada sajian Pilihan

Lihat gambar

Buat sahabat yang pengoptimasiannya blognya menyembunyikan CCS dan JavaScript dapat tambahkan isyarat dibawah ini sesudah isyarat pada langkah sebelumnya tadi.

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