Cara Membuat Contact Responsive Form Blogger

Author : UnknownTidak ada komentar

https://softwaresemuamu.blogspot.co.id/
Contact Us Responsive Form Blogger
Contact Us Responsive Form Blogger Hello. Kawan-kawanku saya mau share, Caranya dan tips dan trik pada blogger kamu semua ini menggunakan. Widget untuk mengirim pesan atau hubungi admin pada blogger kamu kawan-kawan dan adik-adik semua kita belajar bersama kawanku semua.


https://softwaresemuamu.blogspot.co.id/
Contact Us Responsive Form Blogger

Silakan Buka Menu Atau Pada Dashboard Masuk Laman buat Laman baru dan pilih HTML. dan Letakan Code Tersebut di bawah ini kawank dan adik.

<style scoped="scoped">
.softwaresemuainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.softwaresemuainput input,.jawadevinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.softwaresemuainput input:focus,.softwaresemuainput textarea:focus{outline:none}.jawadevinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.softwaresemuainput input:focus ~ label,.softwaresemuainput input:valid ~ label,.softwaresemuainput textarea:focus ~ label,.softwaresemuainput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.softwaresemuainput input:focus ~ .bar:before,.softwaresemuainput input:focus ~ .bar:after,.softwaresemuainput textarea:focus ~ .bar:before,.softwaresemuainput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.softwaresemuainput input:focus ~ .highlight,.softwaresemuainput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.softwaresemuainput input:focus ~ label,.softwaresemuainput input:valid ~ label,.softwaresemuainput textarea:focus ~ label,.softwaresemuainput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;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}
</style>
<form name="contact-form">
<div class="Softwaresemuamuinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="softwaresemuainput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="softwaresemuainput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = '1234567890';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx1234567890','//softwaresemuamu.blogspot.com/','1234567890');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1234567890', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Keterangan: 1234567890 Ganti ID Blogger Kamu Semua Kawan
Keterangan: //softwaresemua,blogspot.com/ Ganti URL Kamu Kawan
Keterangan: #07ACEC Ini Adalah Anda Bisa Ganti Warna Sesuaikan Website Anda Semua

Silakan Download Filenya Di Sini

Jangan Lupa Share Ke Teman lain Semoga kali bisa, Untuk praktekan untuk Membuat Contact Us Reposnsive Form Blogger kamu kawanku semua semoga bermanfaat untuk kita semua Bersama
Terima Kasih Atas Kunjungan Anda Semua

Artikel Terkait

Posted On : Sabtu, 15 April 2017Time : April 15, 2017
SHARE TO :
| | Template Created By : Binkbenks | CopyRigt By : Tutorial Online | |
close
Banner iklan disini
> [Tutup]