إضافة نموذج الإتصال منبثقة
مرحبا بكم على مدونة جزائري ويب
موضوع اليوم هو إضافة نموذج الإتصال منبثقة
المرجو إتباع نفس الخطوات في الشرح وكذلك خذوا نسخة إحتياطية من القالب
أو جربوها على مدونة تجريبة هذا التنويه للأشخاص المبتدئين
أو جربوها على مدونة تجريبة هذا التنويه للأشخاص المبتدئين
قبل كل شيئ أضف الكود التالي خاص بالأيقونات
ضعه فوق إذا كنت تتوفر عليه فلا داعي لإضافته
ضعه فوق إذا كنت تتوفر عليه فلا داعي لإضافته
- توجه إلى قالب >> تحرير
- ثم انقر على تحرير
HTML - ابحث عن الوسم
]]> و اضف الكود التالي فوقه:
.contact-button {} .contact-button a {padding: 9.7px;color: #FFFFFF!important;display: inline-block;font-size: 190%;font-family: droid arabic kufi;background: #0FD2AD;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;} .contact-close:hover {color: #0894D8;background: #818484;} .contact-sec {border: 1px solid #eee;position: fixed;top: 50%;margin-top: -190px;left: 50%;max-width: 300px;width: 90%;margin-left: -150px;background-color: #FFF;height: auto;z-index: 99999;display: none;-webkit-transform: scale(0);-moz-transform: scale(0);transform: scale(0);transition: all .5s ease;webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;} .contact-close {position: absolute;top: -13px;background-color: #0FD2AD;color: #FFF!important;height: 25px;width: 25px;text-align: center;border-radius: 25px;line-height: 25px;font-size: 13px;left: 90%;} .contact-sec .widget {padding: 20px;} .contact-sec .contact-form-cross {display: none;} #ContactForm1 h2 {font-size: 16px;text-align: center;color: #848889;border-bottom: 1px dashed #eee;padding-bottom: 8px;font-family: droid arabic kufi;} .contact-sec.contact-show {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);} contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {max-width: none;padding: 5px; text-align: right;} .contact-form-name, .contact-form-email, .contact-form-email-message {background-color: #f3f3f3;width: 250px;border: 0;} .contact-form-button-submit {max-width: none;width: 100%;height: 35px;border: 0;background-image: none;background-color: #0894D8;cursor: pointer;color: #fff;} .contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {border: 0;box-shadow: none;} .contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {border: 0;} .contact-form-button-submit:hover {background-color: #222;background-image: none;border: 0;} input#ContactForm1_contact-form-name, input#ContactForm1_contact-form-email{padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-bottom: 10px; width:100%;} textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%;} .contact-button {text-align: right;margin-right: 10px;font-family: droid arabic kufi;} #ContactForm1_contact-form-submit {font-family: droid arabic kufi;background: #fff;color: #aaa;vertical-align: middle;cursor: pointer;padding: 1px 15px!important;font-weight: 700;font-size: 13px;text-align: right;border-radius: 3px;background-image: linear-gradient(110deg, #0FD2AD 0%, #0FD2AD 50%, transparent 50%, transparent 100%); background-size: 200%;background-position: 120% 0;background-repeat: no-repeat;transition: all .8s ease, background-position .8s ease, color .8s ease;border: 1px solid #eee;float: right;margin-top: 10px;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#DD4537; border: 1px solid #eee;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top: 55px;font-family: cursive;font-size: 14px;color: #FFF; background: #0FD2AD;} .contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: cursive;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} form i.fa.fa-pencil, form i.fa.fa-user,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;float: right; margin-left: 10px;} form i.fa.fa-user {color:#7986cb;} form i.fa.fa-envelope {color:#ffa726;} form i.fa.fa-pencil{color:#FC4F3F;}
ابحث عن وضع فوقه الكود التالي:
إبحث عن footer-wrapper
أو عن footerwrapper وضع الكود التالي فوقه:
الكود الآتي هو لتفعيل ظهر أيقونة الإتصال
يمكنك إضافتها بأي مكان تراه مناسب
يمكنك إضافتها بأي مكان تراه مناسب
الاشتراك في:
تعليقات الرسالة
(
Atom
)
ليست هناك تعليقات :
إرسال تعليق