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

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

اهلاً بكم

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

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

صورة الإضافة 

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

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/AVvXsEgiFJTywvbFYO4MBhny2P7ocwePTbJ0N9h0S64d56r_UM8vscmmMBSnORx8H2Ac_63idC6NZVo6Ye2WAGCCtoOw1diyq8w_3XChWA8-ZOJsx8NHf7tLx5IvXq6eeSmi2P1ZljVqXxlnttU/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/AVvXsEhEODy8Ws47zmEDRlvIjMX4_aSWkldatUxyKNaO01CNVINn32_30sjPoQ6zDQzAfSM0BmBwfcFQnToNNBDfEjt5EI9O9FQOmqZPKU1IkvKZ4xSFedp_Qhg76grzPHgiPNc5OXD-JJsVB7g/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/AVvXsEioCg98ft1lrPKJs_xpSIthbTV2MqNsKF2rX-pQnScfnr9GHBDtkcj6hMWCSLS5cknN6G62gXBBtIMnxLLmFqPeaSKRsRrlr6FWLV5RcT4sfCCm6qc6BDWvqRrG5MRPUD7U4gk_RGX51Ls/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;
}

8- ايضاً ابحث عن الوسم  </head>

9-  ثم اللصق الكود التالي فوقه .

الكود

10- احفظ القالب .