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

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

• معاينة

شرح طريقة التركيب
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>

الان قم بحفظ الصفحة ومعاينتها ومبروك عليك نموذج اتصل بنا احترافي لمدونتك

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

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