New Post has been published on iusbd.com
New Post has been published on http://iusbd.com/website/blogger/create-a-contact-page-easily-on-blogger
Create a contact page easily on Blogger
Blogger has expanded its list of gadgets, adding a new âContact Formâ, which as its name suggests, allow your visitors to send you a message via this form.
In this article I will offer you a tutorial (in 3 steps) to include this widget on a page âcontactâ (static), with some modifications to the appearance of this form, since Blogger will not allow you to view this widget in a sidebar or bottom of the blog.
Step 1: Add the widget to your blog.
Login to your blog, select âLayoutâ> âAdd a Gadgetâ.
On the open window, there is a sidebar on the left (Nay photo below). Choose âMore gadgetsâ then âContact Formâ
Add Blogger Widget
You will indeed contact form in your sidebar, but do not worry, we will eliminate the third step.
Step 2: Create the page.
Login to your blog, select âPagesâ and click on âNew Pageâ and âBlank Pageâ.
After choosing the title of âContactâ or âContact Pageâ etc.
On the left, click âHTMLâ (the right of âWriteâ), then paste the code below:
<Div id = âcontact_wrapâ> <h3> Formulaire contact </ h3> <form name = âcontact-formâ> <input id = âContactForm1_contact-form-nameâ name = ânameâ placeholder = âNomâ 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 = âMessageâ rows = â5âł> </ textarea> <input id = âContactForm1_contact-form -submit âtype =â button âvalue =â Envoy â/> <br /> <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> </ div> <style type = âtext / cssâ > / * Menyembunyikan ele Dalaman Posting * / #comments, # blog-pager, .breadcrumbs, .post-footer display: none </ style> </ div>
Click âPublishâ to save the orange page.
Step 3: Apply CSS.
To change the appearance of form and remove the widget to the sidebar, add the CSS.
There are two models: Model light and dark pattern . (Click above for even the demo). Login to your blog and choose âModelâ then âEdit HTMLâ.
Thanks to the âCtrlâ and âFâ key, look for â / b: skin â, and just before , paste the code for the model you liked, or v better with your model.
Clearly the model code: #ContactForm1display:none;#contact_wrap margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=â#f2f2f2â˛, endColorstr=â#ccccccâ);background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;#contact_wrap h3color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;#contact_wrap h3:before content: â â;position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;#contact_wrap h3:after content: â â;position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;#ContactForm1_contact-form-namewidth: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;#ContactForm1_contact-form-emailwidth: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;#ContactForm1_contact-form-email-messagewidth: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;#ContactForm1_contact-form-submit width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;#ContactForm1_contact-form-submit:hover background:#4c9bc9;#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-messagewidth: 320px;margin-top:35px;
Dark model code: #ContactForm1display:none; #contact_wrap margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border: #600 solid 1px;border-bottom: #420000 solid 1px;background-color:#983738;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=â#bf5355â˛, endColorstr=â#983738â˛);background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);#contact_wrap h3color: #fff;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #3b5931;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;background-color: #659156;position: relative;#contact_wrap h3:before content: â â;position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #000 transparent transparent transparent;#contact_wrap h3:after content: â â;position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #000;#ContactForm1_contact-form-namewidth: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#2b2e31 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;#ContactForm1_contact-form-emailwidth: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #2b2e31 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;#ContactForm1_contact-form-email-messagewidth: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #2b2e31 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;#ContactForm1_contact-form-submit width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #659156;border:1px solid #333;#ContactForm1_contact-form-submit:hover background:#5d894d;#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-messagewidth: 320px;margin-top:35px;
Record the model and itâs good;-) If you have a problem of integration, please leave a comment below.









