Cara Mudah Membuat Contact Form Responsive di Blogger

Hallo sobat Persada !! kabar baik bukan ?
Pada kesempatan kali ini kita akan membagikan tutorial tentang Cara Membuat Contact Form Responsive di Blogger
Contact Form merupakan salah satu widget yang sangat penting. Karena Form Kontak merupakan salah satu media agar pembaca blog kita dapat terhubung dengan kita, tentunya selain form komentar ya sobat.

Saking pentingnya Form Contact ini juga bisa di bilang salah satu syarat untuk pengajuan atau pendaftaran Google Adsense.
Baiklah, tanpa perlu panjang lebar kita langsung menuju tutorial tentang Cara Mudah Membuat Contact Form Responsive di Blogger
1. Langkah pertama tentu saja login ke akun Blogger sobat.
2. Pilih tab Halaman kemudian buat halaman baru.
3. Ketikan judul halaman, kemudian copy kode html dibawah ini dan paste.
<*div class="logo"> verified_user
<*form name="contact-form"> <*div class="input"> <*input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<*div class="input"> <*input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<*div class="input"> <*textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5">
<*input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<*div id="ContactForm1_contact-form-error-message">
<*div id="ContactForm1_contact-form-success-message">
<*style scoped="scoped"> .logo{text-align:center;} @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align:middle; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .md-48{font-size: 100px; color: #546de5; padding: 10px; background: #dde3ff; border-radius: 100px;} .input{float:none;position:relative;margin-bottom:45px;margin-right:10px} .input input,.input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd} .input input:focus,.input textarea:focus{outline:none} .input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all} .input input:focus ~ label,.input input:valid ~ label,.input textarea:focus ~ label,.input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5} .bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%} .input input:focus ~ .bar:before,.input input:focus ~ .bar:after,.input textarea:focus ~ .bar:before,.input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5} .input input:focus ~ .highlight,.input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.input input:focus ~ label,.input input:valid ~ label,.input textarea:focus ~ label,.input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px} input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px} <*script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript">

4. Kemudian pilih Simpan.

Sekarang coba lihat halaman Contact yang telah kita buat, jika belum sesuai dengan keinginan kalian sobat bisa mengedit nya sesuka hati.
Catatan :
- Hapus semua tanda *
- Ganti domain persada.net dengan domain blog sobat
- Ganti juga Id blog dengan Id blog sobat, caranya masuk ke dashboard blogger dan lihat di URL halamanya.

Mungkin hanya itu tutorial tentang Cara Mudah Membuat Contact Form Responsive di Blog .Semoga bermanfaat dan bisa membantu sobat.
Posting Lebih Baru Posting Lama Beranda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel