Cara Membuat Contact Form di Blogger Pada Halaman Statis 100% Work

Cara Membuat Contact Form di Blogger Pada Halaman Statis 100% Work

No ratings yet.

Cara Membuat Contact Form di Blogger Pada Halaman Statis 100% Work

Hay temen-temen blogger pemula, sudahkah membuat contact us / contact from di blog anda. Mungkin jika anda belum tahu kalao sebuah contact from/ formulir kontak di dalam blog itu sangat penting gunanya yaitu agar para pembaca blog/ website anda dapat menghubungi anda secara pribadi.

Dan juga sebagai syarat agar di terima oleh google adsense anda harus membuat formulir kontak di halaman statis blog anda. karena google tidak akan menerima blog / website yang tidak lengkap navigasinya.

Selain contact form anda juga harus membuat disclaimer, privacy policy, about us dan sitemap di halaman stastis blog anda ya, syarat ini harus di lengkapi jika ingin bergabung jadi publisher google adsense lewat blog / website.

Di kesempatan kali ini saya ingin berbagi cara membuat formulir kontak pada halaman statis yang mudah menggunakan kode html contact us tanpa foxyform ataupun 123contactfrom. langsung saja ikuti langkah-langkahnya sebagai berikut:

Cara Membuat Contact Form Keren di Blog

1.Pertama silahkan masuk di blogger.com
2. Pilih Laman/ pages dan buat pages baru
3. Kasih judul pages/ laman tersebut “Contact Us” atau “Kontak Kami”
4. Terus Pilih HTML jangan compose

4. Lalu Copy kode html contact us dibawah ini dan paste kan di laman yang anda buat tadi.


<style type="text/css">.contact-form-widget {margin-left:auto; margin-right:auto; width:100%; max-width:540px; background:#fff } .first-line { display: table; width: 100%; margin-bottom: 20px; } .contactf-name,.contactf-email { float:left; width:47%; display: table-cell; } .contactf-name { margin-right:6% } .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus { width:100%; margin:0 0 25px; color:#999; background:transparent!important; border:2px solid #ddd; box-shadow:none; padding: 10px; box-sizing: border-box; } .contact-form-email-message { height:50px; } .contact-form-button-submit{ background:#f1592a; min-width:20%; font:700 16px Work Sans; color:#fff; border:0; cursor:pointer; outline:none; border-radius:2px; -webkit-box-shadow: 0px -5px 10px 5px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1); box-shadow: 0 4px 15px 0 rgba(0,0,0,0.1); padding: 10px; margin-bottom: 10px; } .contact-form-button-submit:hover { background:#333; } .contact-form-cross { border:medium none!important; box-shadow:none!important; padding:0!important } </style>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="first-line">
<div class="contactf-name">
Your name
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your name&quot;;}" onfocus="if (this.value == &quot;Enter your name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Enter your name" /></div>
<div class="contactf-email">
Email
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address&quot;;}" onfocus="if (this.value == &quot;Enter your email address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Enter your email address" /></div>
</div>
<div class="contactf-message">
Message
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" value="Type your message here..."></textarea>
<div class="sendme">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit →" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<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'] = '1061492620238640983';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1061492620238640983','//www.daftarilmu.com/','1061492620238640983'); _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': '1061492620238640983', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

5. Kemudian ganti ‘1061492620238640983‘ angka berwarna merah tersebut dengan id blog anda dan ganti www.daftarilmu.com dengan alamat website agan.

6. Jika tidak tau id blog anda silahkan lihat gambar di bawah ini.

Cara Membuat Contact Us Keren di Blog

7. Terahir Publish Laman yang anda buat
8. Done

Preview Contact Us Simpel

Jika masih ada pertanyaan atau belum jelas silahkan komen saja di bawah atau hubungi langsung melalui contact us yang telah saya sediakan.

Demikian Tutorial blogging kali ini tentang Cara Membuat Contact From di Blogger Halaman Statis 100%Work, Semoga bisa bermanfaat buat anda khususnya blogger pemula seperti saya ini. Dan kunjungi terus website ini untuk tutorial menarik lainnya. Terimakasih

Rating:

Leave a Comment