كيفية تخصيص نموذج المراسلة في بلوجر - الجزء 2

في الجزء الثاني من تدوينتي حول كيفية تخصيص نموذج المراسلة في بلوجر، سوف أقدم لكم أشكال حصرية على المستوى العربي يمكن من خلالها تخصيص وجعل نموذج المراسلة إحترافيا x-) ... إن كنت لم تتابع الجزء الأول فتفضل بقرائته من هنا: كيفية تخصيص نموذج المراسلة في بلوجر - الجزء 1 :) 

النتيجة النهائية:

 

جميلة أليس كذلك ؟ :>) 

الخطوة 1 : تركيب الإضافة من بلوجر

الخطوة 2 : تركيب الأداة على صفحة ثابتة

الآن وبعد تطبيق الخطوة 1، نذهب لإنشاء صفحة جديدة ونختار صفحة فارغة وننتقل إلى تبويب HTML ونضع الكود التالي :

<div id="contact_wrap"> <h3> تواصل معنا</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الإلكتروني" 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="أرسل" /> <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 elemen dalam postingan */ #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

الخطوة 3 : تركيب الCSS

والآن نضع كود الcss التالي قبل ]]></b:skin>

النسخة البيضاء :

/* CSS Contact Form Light Theme by ArabicLabs.com */ #ContactForm1{ display: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;direction:rtl; 
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Arial;
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;
right: 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;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 40px 10px 10px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqn0dtHZBKU1HKnYSFKHwrb1CP92QLIYhz37SFe1xAdWemjhI2QhgSul_q4iZYOZ8eFm6YNBnLqcBXKpJ8VNBlas0u4NUP6Tjk8rWa49xcNVUOH0KRz64a7fwsu7QdYH99y8v_iKgr6ZA/s1600/user.png)no-repeat 290px 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{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 40px 10px 10px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24F3giHVFJsdFtBXI8DpPH2t-CFS0s_g6tdPUCCzjNbP_z3c0T1HFUU6HHaD_zJXdhK9EtJBUbVxoxOq3pV_UWdMdZu-WmzW1PB3ky8XR2QaEwmtRG095JUeXNCa0F8oAroFdLC8ZakU/s1600/pen.png)no-repeat 290px 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-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 40px 10px 10px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHS6KFDoIAuDfNYltWzDe8h9D7yMiWx-VcvEtJtuVKhIkSCL-SYWYB0yIevOHpGI9l5v0rEjJNGl8eoxTtA8tP6KtySvyn8rxQG25zNw6YrWBF27IWN7gFHBPleNvSIS4zIpiH-6OEbw/s1600/msg2.png)no-repeat 290px 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: left; 
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-message{
width: 320px;
margin-top:35px;
}

النسخة الداكنة :

/* CSS Contact Form Dark Theme by Arabiclabs.com */ #ContactForm1{ display: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 h3{ color: #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-name{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqn0dtHZBKU1HKnYSFKHwrb1CP92QLIYhz37SFe1xAdWemjhI2QhgSul_q4iZYOZ8eFm6YNBnLqcBXKpJ8VNBlas0u4NUP6Tjk8rWa49xcNVUOH0KRz64a7fwsu7QdYH99y8v_iKgr6ZA/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-email{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24F3giHVFJsdFtBXI8DpPH2t-CFS0s_g6tdPUCCzjNbP_z3c0T1HFUU6HHaD_zJXdhK9EtJBUbVxoxOq3pV_UWdMdZu-WmzW1PB3ky8XR2QaEwmtRG095JUeXNCa0F8oAroFdLC8ZakU/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-message{ width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY4Ull9cCB3pIT9DeX4dZlUEYIczG3PtwziCyTtIb1Q64DWYjyqM1qozcK5MROZxAboDCY5_DCupgWE-SeZKU4dogMYB9xcsC9BPHKe8yx2Mm60_IU2wd-R80hiEFVDEf_vqEz_p6cXOg/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-message{ width: 320px; margin-top:35px; }