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.














