Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree
Beberapa waktu yang kemudian aku memposting solusi jitu dan simple mengatasi error contact form dengan memakai layanan formspree. Namun ada beberapa keluhan adalah sehabis submit pesan maka pengguna akan di-redirect ke halaman Thanks Formspree.Lalu bagaimana biar sehabis submit pesan, pengguna masih berada di blog kita?
Tentu saja caranya cukup gampang sebab Formspree sendiri sudah menunjukkan solusinya biar pengguna form tidak di-reidrect ke halaman Formspree adalah dengan menambahkan input di bawah ini ke dalam form.
<input type="hidden" name="_next" value="//site.io/thanks.html" />Lalu bagaimana cara menciptakan halaman "Thanks" untuk contact form?
Saya akan mencontohkan cara menciptakan halaman "Thanks" untuk contact form Blogger, untuk demo silahkan coba contact form ini.
Nah jikalau Anda memakai layanan Formspree, untuk menciptakan ibarat demo silahkan ikuti caranya di bawah ini.
Silahkan buat halaman statis gres dengan judul "Thanks" kemudian silahkan simpan arahan di bawah ini ke editor postingan mode HTML.
<style scoped="scoped">
.thanks_layout{text-align: center; position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.8);z-index:99999}
.thanks_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align: center; color:#333; position: absolute; top: 10%; left: 50%;margin-left:-25%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
@media screen and (max-width:768px){.thanks_message{width:90%!important;margin-left:-45%!important;}
}
</style>
<div class="thanks_layout">
<div class="thanks_message">
<img alt="Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree" height="48" width="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6it3J5F2TsWTsAUnkGRUS2DF0kmtcgm0z2PviVty12Bloc18t6rIbiHK1nTwK7ojA8dRVMMPOhykfPiCEwc8w0Y3feeJx7ma_5UuY09KrCzwp_ZmxXW1K1OQol4323y46HnrAtbKnH0j/s1600/ic_thumb_up_black_24dp_2x.png" />
<h2>Form submitted successfully</h2>
<div>Jika tidak ada halangan dan kesibukan lainnya, admin akan eksklusif merespon pesan yang Anda kirimkan.</div><br/>
<div><a href="/" title="Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree"><b>Homepage</b></a> atau kembali ke <a href="URL HALAMAN CONTACT FORM" title="Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree"><b>Contact Form</b></a></div>
</div>
</div>Silahkan ganti arahan
URL HALAMAN CONTACT FORM dengan url halaman contact form blog Anda. Kemudian silahkan terbitkan halamannya dan catat URL-nya.Kemudian untuk contact form Blogger blog Anda silahkan gunakan arahan di bawah ini.
<style scoped="scoped" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;}
#ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>
<div class="contact-form-box">
<form action="https://formspree.io/username@gmail.com" method="POST">
<input type="hidden" name="_next" value="URL HALAMAN THANKS" />
<input id="ContactForm1_contact-form-name" name="name" required="required" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" required="required" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="required" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" /><br />
</form>
</div>Silahkan ganti
username@gmail.com dengan alamat email Anda, kemudian ganti juga URL HALAMAN THANKS dengan url halaman "Thanks" yang tadi dibuat.Jika Anda memakai form lain, pastikan semua
input dilengkapi dengan arahan required="required" dan untuk tombol kirim memakai type="submit".Selesai... selamat mencoba. Sumber https://www.kompiajaib.com/
0 Response to "Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree"
Posting Komentar