طريقة إضافة نموذج أتصل بنا .

زوار ومتابعي المدونة

اهلاً بكم

اليوم سوف نتعرف في درسنا هذا على طريقة

" إضافة نموذج أتصل بنا "

صورة الإضافة

- طريقة تركيب الإضافة :

1- ادخل إلى مدونتك | ثم أحتر صفحات

2- ثم اختر صفحة فارغة

3- اللصق الكود التالي في صندوق الإضافة HTML .

4- ثم اصغط على زر نشر .

الكود




Contact Us

5- بعد ذلك اختر تحرير قالب .

6- ثم ابحث عن الوسم ]]></b:skin>

7- اللصق الكود التالي فوقه .

الكود

#ContactForm1_contact-form-nbtname{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuDxfrm-Ohsk255f_3Ydg23MPEqsjh3GKsnYjwcN9RkiwlXKhXg43dXSfiWK6WJ1PyHd3b4ynt2ansh_sePedi7ySi_0_rFOJUEi_oBwWL9yZJKpdUyaDSlx_waTmdC-JCDeeFQzMAWo/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-nbtemail{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIrNxH62uNXtLSrZw8_D7vQ1w063hyujchXCoKFJzjmrdx1rKVRwmyvE2zRG4pPSkS0OtlOWHHdqOy5CjvbcPS4J4_kdVLMX22VFYJTXGJCfTKkU7Ufr-4DgOUTBTeDButl9OPJIQqBE/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-nbtmessage{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwn6YfXVa_1PX5VZsMZOpZgQhaHbw-_UHsTVdVqrsRHAC16CP_Dhgr0mkzAtlLwxZW0aKAKOoBfRDomp4stEuH71GRA7EqUwrU8tJBKvWLqg0UORrbXUFpQ7yFjDwg-qBl6hkdqknZBU/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-nbtreset {
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-nbtreset:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-nbtsubmit {
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-nbtsubmit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-nbterror-message, #ContactForm1_contact-form-nbtsuccess-message{
width: 320px;
margin-top:35px;
}