Halaman

▼

#MODUL 6 TUTORIAL MEMBUAT CONTACT FORM DI HALAMAN STATIS


Selamat datang di #modul 6, pada modul ini kita akan mempelajari tentang cara membuat contact form di halaman statis blog. Disini sudah mulai menggunakan javascript dan html ya, jadi harap disimak ulasan ini dari awal sampai habis. Mimin jamin 100% pasti sobat bisa kalau mau mengikuti setiap instruksi dengan benar.

Seperti biasa, jika sobat belum membaca materi pada modul sebelumnya yaitu #modul 5, sebaiknya jangan lanjut dulu ke #modul 6 ini, agar sobat bisa mempelajari secara berurutan dan tidak ada kendala ketika belajar seputar blogging tingkat lanjut bisa lihat di : SITEMAPS

Fungsi dari contact form ini adalah agar memudahkan visitor atau pengunjung blog apabila ingin mengirimkan pesan kepada admin. Pada materi ini form yang digunakan akan redirect otomatis ke gmail sobat.

1. Pertama, silahkan login ke Blogger
2. Kedua, klik menu TEMA kemudian pilih EDIT HTML

3. Ketiga, pada script klik CTRL+F cari kode </head> selanjutnya letakkan kode berikut ini di atas kode </head> , Jika sudah jangan lupa klik SIMPAN TEMA
 <b:if cond='data:view.isPage'><style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;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}
</style></b:if>

4. Keempat, Silahkan klik menu Halaman, lalu pilih HALAMAN BARU

5. Kelima, masukan script HTML berikut ini pada bagian HTML bukan COMPOSE
 
<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
  <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"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8161458442793536799';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8161458442793536799','//www.masterdzgn.com/','8161458442793536799');
_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': '8161458442793536799', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Baca keterangan berikut :

Value Keterangan
Nama Merupakan tulisan yang tertera pada form
Email
Isi Pesan
Kirim Pesan Tulisan pada tombol submit form
8161458442793536799 ID Blog (ada 4x pada script di atas)
bisa diganti dengan ID Blog sobat
www.masterdzgn.com Ganti dengan alamat blog sobat
(tanpa diawali http/https)

6. Keenam, silahkan klik publikasikan lalu cek previewnya dengan klik LIHAT


Jika sobat sudah melakukan semua langkah-langkah di atas secara berurutan dan berhasil, maka sobat sudah menuntaskan materi pada #modul 6 ini. Namun, apabila ternyata mengalami kendala bisa tanyakan pada kolom komentar di bawah. 

Untuk cara menambahkan link halaman contact form konsepnya sudah dibahas pada modul sebelumnya ya, terkait cara edit menu navigasi. Atau bisa baca di : MODUL 5

Sobat bisa mempelajari materi selanjutnya pada #modul 7 tentang tutorial membuat generator privacy policy, disclaimer, dan term of servise pada halaman statis, bisa cek modulnya di : SITEMAPS. Terima kasih dan semoga harimu menyenangkan.

pada tanggal