السلام عليكم ورحمة الله وبركاته.. اليوم اقدم لكم طريقة عمل صفحة اتصل بنا بلوجر
فاليوم سوف ابين طريقة عمل صفحة اتصل بنا وهي طريقة سهلة ومهمة في تساعد الزائر في ارسال استفسار او طلب عن طريق البريد الألكترواني وسوف اقدم شرح بالفديو لكي اسهل الأمر
الشرح بالفيديو
اولأ اذهب الي لوحة التحكم
ثم قالب ثم تحرير قالب
ثم ابحث عن الكود ]]></b:skin> باستخدام ctrl+f
وضع الكود القادم قبله
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: #333 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 #333;}#ContactForm1_contact-form-name{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBIujU4yoPVe5gO_GHQvE4PT_k7VpM4nhy0tqxW7lnXWm9ud5lxV5fGGYjA9S6M0b9pMK7ndVtCtUKFsDuaNlWwL6mhkN3P6PZLxKAnQQ92s87MPMPYuqe6QN4lGerN-X4sZjNbnORJQo/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-email{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIdDbBBfsw2iEc6ltZS8fa7_XUuBTPrmCREMaxbS8JmHnDNFhA3dNHut4SRDnmDzuubqlj3piIukHJ6wstiiLEZBeuhaCpFOYFVIkH0qY3Sq-DpvetdY2pn82aIy8VdN5NJgwc3vZSBbo/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-message{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/AVvXsEgB2zfTy5964SUd8G0bDMOv7L2G5pZibIUetBFM5WcxU1WvWS6I7BdtiKsduuKbfVxRw5bBIpEL7ndLXaGg9iMvzTzwLLIE72d2e52xUGKttrcc-ZtmlCzqPKjxTo8zjEdOteKfOuadOZE/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-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: #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;}
وبعدين اذهب الي الصفحات ثم انشاء صفحة
وضع الكود html في صفحة
<div id="contact_wrap"><h3>Contact Us</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><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">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>
وكدة مبروك عليك الأضافة ولو في استفسار انا موجود
اعجبك الموضوع؟ مشاركتها مع أصدقائك:-
.png)
شكرا اخي الكريم على الموضوع الرائع
ردحذفلقد انشات الفورم بالفعل
ولكن زر الارسال غير مفعل اي انني لا استطيع ارسال الايميل اعتقد ان هناك خطوة ناقصة وهي التي نضيف فيها الايميل الذي نستقبل عليه الرسائل
شكرا اخي الكريم على الموضوع
ردحذف