سلام عليكم ورحمة الله وبركاته، اليوم اقدم لكم شرح كيف انشاء صفحة اتصل بنا في بلوجر للكل مدونات ولكل قوالب وبجميع لغات الكود الموجود أسفل المقال يعمل بكل قوالب ومتناسق ومتجاوب وايضا سوف نضع لكم اكواد أخرى بتصاميم تختلف اختاروا منهم ما يعجبكم .
 |
| صفحة اتصل بنا جاهزة تعمل على مدونة انجليزية وعربية |
صفحة اتصل بنا جاهزة تعمل على مدونة انجليزية وعربية
تعد صفحة تواصل معنا او اتصل بنا صفحة مهمة جدا ولازم توجد في موقعك وتعد صفحة اتصل بنا من مستلزمات لقبول موقعك في جوجل أدسنس , نقدم لكم كود جاهز لصفحة اتصل بنا اسفل المقال يعمل في قوالب إجنبية والعربية.
معاينة صفحة اتصل بنا عربية
معاينة صفحة اتصل بنا أنجليزية
إقرا إيضا : انشاء مدونة من صفر والربح منها
تحميل صفحة اتصل بنا من ميديا فاير
تحميل ملف مضغوط من رابط ميديا فاير يحتوي كود صفحة اتصل بنا باللغة عربية وكود ثاني باللغة انجليزية
إقرا إيضا : ضبط جميع اعدادات بلوجر
كود اتصل بنا
- للقوالب عربية
<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الأسم </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة <span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<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>
<style scoped="" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style></div>
- للقوالب انجليزية
<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span face=""open sans" , "arial" , "helvetica" , sans-serif" style="color: #666666; font-weight: 700;"><i class="fa fa-user"></i> The name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span face=""open sans" , "arial" , "helvetica" , sans-serif" style="color: #666666; font-weight: 700;"><i class="fa fa-envelope"></i> E-mail <span style="color: #f56954; font-size: x-small; font-weight: bold;">wanted</span></span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span face=""open sans" , "arial" , "helvetica" , sans-serif" style="color: #666666; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> The message <span style="color: #f56954; font-size: x-small; font-weight: bold;">wanted</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<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>
<style scoped="" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style></div>
- صفحة اتصل بنا ثالثة
<div id="Pagecontactus"></div>
كلمات دلالية للبحث
- قالب اتصل بنا HTML
- صفحة اتصل بنا WordPress
- تصميم صفحة اتصل بنا
- عمل صفحة اتصل بنا + شرح الكود
- كود اتصل بنا PHP HTML
- صفحة من نحن جاهزة