طريقة عمل لوجو شفاف اون لاين بدون برامج

في هذا الموضوع سأقدم لكم ثلاثة نماذج حديثة لأضافة كود صفحة اتصل بنا لمدونات بلوجر مع شرح الطريقة الصحيحة لتركيب الأضافة .

الخطوة الأولى :
في البداية وحتى تعمل معك صفحة اتصل بنا بشكل صحيح يجب ان تضيف هذه الأضافة وتفعلها من لوحة تحكم بلوجر  كما يلي :
توجه الى لوحة تحكم بلوجر ثم اضافة اداة ثم تختار نموذج الأتصال ثم حفظ ، حتى وإن لم تظهر الأضافة كما في بعض القوالب ، المهم يجب أن تكون موجودة ومضافة في مدونتك . شاهد الصورة :

اقرأ ايضا : كود الفهرس لمدونات بلوجر بصيغة جديدة

الخطوة الثانية :
توجه الى لوحة تحكم بلوجر ثم اختار الصفحات ثم صفحة جديدة وسميها اتصل بنا او راسلنا ثم انتقل من تأليف الى html وأضف احد الأكواد التالية حسب النموذج الذي يعجبك :

كود النموذج الأول لصفحة اتصل بنا :

 <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> الأسم&nbsp;</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> البريد الإلكتروني&nbsp;<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> الرسالة&nbsp;<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>


 

كود النموذج الثاني لصفحة اتصل بنا :

 <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> Name </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> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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" />  
<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">
#comments {display:none;}
</style> 

كود النموذج الثالث لصفحة اتصل بنا :

<form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8">
 <div>
  <input type="hidden" name="acctid" id="acctid" value="rvqrkz0ygh2es8hn" />
  <input type="hidden" name="formid" id="formid" value="1087231" />
  <input type="hidden" name="required_vars" id="required_vars" value="name,email,field-ce2693f4e47c4d1" />
 </div>
 <table cellspacing="5" cellpadding="5" border="0">
  <tr>
   <td valign="top">
    <strong>&#1575;&#1604;&#1571;&#1587;&#1605;:</strong>
   </td>
   <td valign="top">
    <input type="text" name="name" id="name" size="40" value="" />
    
   </td>
  </tr>
  <tr>
   <td valign="top">
    <strong>&#1575;&#1604;&#1576;&#1585;&#1610;&#1583; &#1575;&#1604;&#1571;&#1604;&#1603;&#1578;&#1585;&#1608;&#1606;&#1610;:</strong>
   </td>
   <td valign="top">
    <input type="text" name="email" id="email" size="40" value="" />
    
   </td>
  </tr>
  <tr>
   <td valign="top">
    <strong>&#1605;&#1581;&#1578;&#1608;&#1609; &#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577;</strong>
   </td>
   <td valign="top">
    <textarea name="field-ce2693f4e47c4d1" id="field-ce2693f4e47c4d1" rows="6" cols="40"></textarea>
    
   </td>
  </tr>
  <tr>
   <td colspan="2" align="center">
    <input type="submit" value=" ارسال " />
   </td>
  </tr>
 </table>
</form>
<br /><center><font face="Arial, Helvetica" size="1"><b>

<!-- End Freedback Form --></b></font></center>

ومبروك عليك الأضافة