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

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

اهلاً بكم

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

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

صورة الإضافة 

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

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/AVvXsEhXsi9Bpko9uW2-k_uEXaT_Vidlk2hcB3IwafdehGClOUIHVDpwYJcwxtzZ06XNHSO2LBgvyRe00qcYivleRPgdFfP1Ci7K5tU0l2Z9sohOA8hInCUg1k1ZMf56vBx_E8Xs2yHfV6pSiX8/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/AVvXsEj1BctuA-4sw88vztU0wQ4OFihwUFnqcLWA8_pCbXjpFOeT65mkUfMk30JVcObewT6Eh-fKyALd_CBDRSRfOABn-jISku46AIKIQ8lOj4OQvubfzsV6RlF7VoRIaFubXyiTTZWjBwUS6fo/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/AVvXsEh0u6y_TBEWmhIJKG6utZ4_2poTEuMUc8wTczJ62w-YuAs985J-7AWd5_j0BGHQhuAb3KJ3fla_CsDOI232P8TjD2gzKz9-P_cax7frbZ2R6mQXiSZsr6JCrjLExrwFz9Fqlutq4KIpIGU/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- احفظ القالب .