Trik Dan Tips Widget Contact Form Responsive

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:0px;background:#404040;color:#fff;font-size:13px;font-weight:600;border-radius:3px}
</style>

<form id="stlb" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<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" 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'] = '6093713042691745392';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6093713042691745392','//somadlistrick.blogspot.com','6093713042691745392');

_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 successfully. Thank you for contacting us</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': '6093713042691745392', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> Instruksi

• Silahkan ganti isyarat yang ditandai dengan abjad tebal berwarna merah dengan ID situs blogger dan URL situs masing-masing.
• Ganti juga text notifikasi message yang ditandai dengan warna biru bila diperlukan.
• Tempatkan semua isyarat css, html dan java script contact form dalam satu laman menyerupai yang telah dijalaskan pada langkah di atas
• Lihat teladan "tampilan" contact form pada link ini [Demo Contact Form]

Catatan: Kode ID Blogger anda sanggup dilihat pada kafe atas browser menyerupai teladan berikut ini;

https://draft.blogger.com/blogger.g?blogID=6093713042691745392#editor/

Selesai, aku harap tutorial ini sanggup membatu dalam menciptakan laman "contact us" pada situs blooger anda. follow by email situs ini untuk mendapat pemberitahuan setiap artikel terbaru kami.