انشاء صفحة أتصل بنا بشكل احترافي ومميز




مرحبا بكم اصدقائي اليوم في تدوينة جديدة احضرت لكم اضافة خاصة وجميله •
اجعل  مدونتك رائعه ومميزة وفريده من نوعها ومن منى لايريد ان تكون مدونته مميزه ورائعه اذا اليوم سوف اشرح طريقة اضافة صفحة اتصل بنا بشكل احترافي ومميز يحتاج فقط الى تركيز قليل منك نبدا بالشرح



شرح طريقة التركيب
1. اذهب الى التخطيط وقم باضافة نموذج اتصال فى الشريط الجانبى " السايدبار "

2. من داخل القالب ابحث عن ]]></b:skin>  ثم ضع الكود التالي فوقه
#ContactForm1 {display:none;}

اضغط على حفظ النموذج
 3. انتقل الى قسم الصفحات واضغط على صفحة جديدة ضع في العنوان Contact (يمكنك تغييره للعربية بعد أن تنشر الصفحة) 
4. انتقل من وضع تأليف الى HTML وضع الكود التالى 


 <div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-user"></i> الإسم الكريم </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="background: #595656; border-radius: 3px; color: white; font-family: ge_ss_threeregular; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 3px 3px;"> مهم </span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-pencil"></i> الرسالة <span style="background: #595656; border-radius: 3px; color: white; font-family: ge_ss_threeregular; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 3px 3px;"> مهم </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>
<div class="social_network wow bounceInDown animated" style="visibility: visible;">
<h3 class="cnt-title">
وسائل اتصال اخرى</h3>
<div id="social_networks">
<ul>
<li class="sorting-01 facebook" title="Follow us on Facebook"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-facebook"></i><span class="inv"></span></a></li>
<li class="sorting-02 youtube" title="Follow us on Youtube"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-youtube"></i><span class="inv"></span></a></li>
<li class="sorting-03 twitter" title="Follow us on Twitter"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-twitter"></i><span class="inv"></span></a></li>
<li class="sorting-05 googleplus" title="Follow us on Google+"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-google-plus"></i><span class="inv"></span></a></li>
<li class="sorting-04 pinterest" title="الرئيسية"><a href="https://www.blogger.com/"><i class="fa fa-home"></i><span class="inv"></span></a></li>
</ul>
<div class="other-cnt">
<div class="phone">
06 38 897 79 962+ </div>
<div class="emailtxt">
assadalqaisi77@gmail.com
</div>
</div>
</div>
</div>
</div>
<style>
/*  CSS Contact qaisi1web */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:96%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:droid arabic kufi;border:1px solid #e3e3e3;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:#BEBEBE;}
#ContactForm1_contact-form-submit {width:100%;font-family:droid arabic kufi;;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, #FC4F3F 0%, #FC4F3F 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e3e3e3;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#DD4537;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top: 35px;font-family: cursive;font-size: 14px;color: #FFF;
background: #FC4F3F;}
.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 {background:#7986cb;color:#fff;}
form i.fa.fa-envelope {background:#ffa726;color:#fff;}
form i.fa.fa-pencil{background:#FC4F3F;color:#fff;}
.social_network {margin: 8px -10px;padding: 10px;overflow: hidden;width: 100%;border: 1px solid #eee;border-right: none;border-left: none;border-bottom: none;
margin-bottom: -10px;}
h3.cnt-title {font-family: droid arabic kufi;background: #676565;color: #fff;padding: 10px;margin-top: -10px;width: 102%;margin-left: -20px;text-align: center;}
#social_networks{  text-align: center;display: block;clear: both;padding: 15px;}
#social_networks ul {display:block;margin:0 auto;padding:0;list-style:none;}
#social_networks li{text-align:center;display:inline-block;margin:0 5px;width:36px;
height:36px;transition:All 0.6s ease-out;}
#social_networks li:hover{color:#eee;cursor:pointer;}
#social_networks li:hover a{color:#fff;}
#social_networks li a{display:inline-block;color:#aaa;line-height:36px;font-size:1.2em;transition:All 0.3s ease-out;}
#social_networks li a:hover{color:#fff;}
#social_networks li a span{display:none;}
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.pinterest{text-align:center;background:none;cursor:pointer;box-shadow:0 0 0 1px #eee;background-image: linear-gradient(110deg, #FC4F3F 0%, #FC4F3F 50%, transparent 50%, transparent 100%);background-size:200%;background-position:150% 0;background-repeat:no-repeat;
transition: background-position .4s ease, color .4s ease;}
#social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.pinterest:hover{color:#fff;}
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.pinterest:hover{color:#fff;background-position:0 0;box-shadow:0 0 0 1px #f56954;}
</style>
الان قم بحفظ الصفحة ومعاينتها ومبروك عليك نموذج اتصل بنا احترافي لمدونتك

إذا واجهت مشكلة في المظهر لا تتردد في وضعه بالتعليقات . بالتوفيق ...

مرحبا بكم اصدقائي اليوم في تدوينة جديدة احضرت لكم اضافة خاصة وجميله • اجعل  مدونتك رائعه و...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
17 التعليقات
avatar

اتمنى دائما ان تستفيد من مواضيعنا

avatar

لا يعمل جررب http://tridwn.blogspot.com/p/contact.html

avatar

ممكن الموجود عندك فى المدونة

avatar

كما ارى انه يعمل جيداا

avatar

اخي ممكن تذخل تتاكد بنفسك http://tridwn.blogspot.com/p/contact.html ابعت رساله

avatar

استاذ اسعد لدى شيئين فى المدونة اتمنى ايجاد لهم حل
عندما اقوم بانشاء صفحة جديدة تظهر بشكل ردئ هكذا على عكس باقى القالب
http://www.eishelkora.com/p/blog-page_61.html
وايضا القالب لا يدعم كتابة الارقام باللغة العربية يعنى عندما اكتب رقم سبعه لايكتب بالانجليزية يكتب بالعربى وهذا امر سيئ

avatar

اعتقد انه لايعمل جرب من هنا http://www.eishelkora.com/2016/02/Contact-us.html
+ان كان يعمل ف اظن انه يذهب الى جميل لاتذهب اى رسائل ال جميل

avatar

اخي اتمنى المره القادمة ان تضع سؤالك في ركن الاسئله,لانه خارج موضوع التدوينة
http://qaisi1web.blogspot.com/2015/09/do-you-have-problem-in-blogger.html

بالنسبه لمشكلة صفحات مدونتك قم بالبحث في قالب مدونتك عن
هذه الكود
#main-wrapper {
overflow: hidden;
position: relative;
margin-top: 22px;
float: right;
width: 100%;
}
واستبدله بهذه

#main-wrapper {
overflow: hidden;
position: relative;
margin-top: 22px;
float: right;
width: 71%;
}

اما مشكله الارقام قم بتغير خط مدونتك حتى يعمل بالاجنبي

avatar

نعم صديقي سوف يذهب الى الجيميل , الرابط الذي زودتني به لا يعمل

avatar

اخي ركبته لاكن لا يرسل الرسائل

avatar

اخي اقراء الشرح جيدا ولا تنسى ان تضيف نموذج اتصل بنا من صفحة التخطيط

avatar

كيف أمسح النمرة والأيميل

avatar

لتغير رقم الهاتف ابحث عن 06 38 897 79 962+ وغيره
لتغير البريد الالكتروني ابحث عن assadalqaisi77@gmail.com وغيره بما تريد

avatar

السلام عليكم
الطريقة شغالة ونجحت بس اكو شغلة خطأ الاسم والايميل الكتابة مابي لون يعني بالتحديد يبين النص والرقم والايميل هم نفس الشي بالون الابيض يعني ميبين
ارجو حل المشكلة وشكرا
sftu98@gmail.com

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *