اضافة "اتصل بنا" أو نموذج اتصال في صفحة بمدونة بلوجر بشكل جذاب

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

 

الخطوة الثانية قم بالذهاب إلى لوحة التحكم في المدونة ومن ثم المظهر ومن ثم تحرير HTML

 

وابحث عن الوسم

]]></b:skin>

 وقم بإضافة هذا الكود قبله مباشرة

/* CSS Contact */
 #ContactForm1,#ContactForm1 br{
    display:none;
}
 #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
     width:50%;
    height:auto;
    margin:5px auto;
    padding:10px;
    background:#fff;
    color:#444;
    border:1px solid #e9e9e9;
    border-radius:3px;
    transition:all 0.5s ease-out;
}
 #ContactForm1_contact-form-email-message{
    width:450px;
    height:175px;
    margin:5px 0;
    padding:10px;
    background:#fff;
    color:#444;
    font-family:'
    Open Sans'
    ,sans-serif;
    border:1px solid #e9e9e9;
    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:#666;
    border-color:rgba(81,203,238,1);
    box-shadow:0 0 5px rgba(81,203,238,0.7);
}
 #ContactForm1_contact-form-submit {
    font-family: 'Noto Kufi Arabic';
    float:right;
    background:#f3f3f3;
    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:none;
    border-radius:4rem;
    background-image: linear-gradient(-95deg, #f53b3b 0%, #f53b3b 50%, transparent 50%, transparent 100%);
    background-size:200%;
    background-position:0 0;
    background-repeat:no-repeat;
    transition: background-position .4s ease, color .4s ease;
    height: initial;
    line-height: initial;
}
 #ContactForm1_contact-form-submit:hover {
    color:#fff;
    background-position:100% 0;
}
 #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
     width:450px;
    margin-top:35px;
}

الخطوة الثالثة قم بإنشاء صفحة من لوحة التحكم الخاصة بمدونتك قم بتسميتها بما تشاء مثلا "اتصل بنا"
بعد ذلك تذهب إلى  زر html الموجود في اسفل شريط ايقونات تعديل الصفحة

 

ومن ثم بنسخ هذا الكود ولصقه

<div dir="rtl" style="text-align: right;">
<form name="contact-form">
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, serif; font-weight: 700;"><i class="fa fa-user"></i> الإسم </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, serif; font-weight: 700;"><i class="fa fa-envelope"></i> عنوان البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">ضروري</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, 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><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br />
<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">
#comments {display:none;}
</style>
</div> 

بعد نشر الصفحة ستختفي الإضافة التي أضفتها في الخطوة الأولى من صفحتك الرئيسية و سيتم اعتمادها فقط في صفحة اتصل بنا
اتمنى ان يكون الشرح سهل وأي استفسار أمامك التعليقات 😊