5 تصميمات أنيقة لنماذج إتصال مخصصة لمدونات بلوجر

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


الطريقة هي من خلال إضافة كود Css بعد اضافتنا لإضافة نموذج الاتصال. أولا لإضافة نموذج الاتصال يمكنك الذهاب الى تخطيط layout ثم إضافة أداة Add a Gadget واختيار نموذج الاتصال Contact Form. ومن أجل تخصيص النموذج بألوان أخرى نقوم بالذهاب إلى القالب ثم تحرير html ثم سنقوم بالضغط على (Ctrl+F) ونبحث عن الوسم: 
]]></b:skin>
وأخيرا اختر أحدد التصميمات التالية مما يتوافق مع ألوان مدونتك وضع الكود فوق الوسم السابق

التصميم الأول




 .contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

.contact-form-email-message {
padding: 5px;
}

.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}

.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}

التصميم الثاني


.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}

 التصميم الثالث


.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(//lh3.googleusercontent.com/-GqNaPfpbCw4/UyjXvLmWlOI/AAAAAAAAKIM/qHtxyZYRPUc/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.contact-form-widget div.form {
background: #fff;
background-image: url(//lh4.googleusercontent.com/-tXb0r3XoQlU/UyjaViCJFrI/AAAAAAAAKIY/3HV7tKODyIQ/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}

 التصميم الرابع 


.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(//lh3.googleusercontent.com/-dJy1C7rwmEQ/Uyj-q5JD1cI/AAAAAAAAKJU/oaOXETgXO3c/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
.contact-form-email-message {
padding: 5px;
}
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

 التصميم الخامس والأخير


.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(//lh4.googleusercontent.com/-wz6C40j6prM/Uyjo-r3lQSI/AAAAAAAAKIo/eTCpE9uVrCw/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
.contact-form-widget:before {
background-image: url(//lh5.googleusercontent.com/-_eWCqxEwGfo/UyjxeoqeutI/AAAAAAAAKJE/r96690O9TG4/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-email-message {
padding: 5px;
}
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}
بعد اختيارك للشكل والتصميم الأفضل لمدونتك قم بحفظ القالب وعاين بنفسك.

هناك 8 تعليقات:

  1. اخى الكريم لقد اضفت هذا الشكل وهو مميز جدا ولكن ارغب بان لا يكون فى المدونه بهذا الشكل وان يكون تحت اسم الاتصال بنا مثلا وعند الضغط عليه يظهر هذا التصميم وقد فعلت هذا باستخدام foxyform ولكنه بالتصميم السابق فهل يمكننى ان اضع هذا التصميم كاحد الكلمات فى القائمه وعند ااضغط على الكلمه يظهر التصميم وشكرا لك

    ردحذف
  2. طلب اخر لو سمحت كيف يمكننى عمل القوائم الجانبيه التى عندك على الجزء الايمن :)

    ردحذف
  3. @Top10TipsTo

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

    Top10طريقة إضافة نموذج إتصال مخصص داخل موضوع معين لمدونات بلوجر

    Top10طريقة عمل نموذج اتصل بنا على بلوجر خطوة خطوة

    ردحذف
  4. وين نحط الاميل خاص بنا ؟

    ردحذف
  5. نماذج جميلة اخي ابو اياد ولكن اخي العزيز عناوين الحقول في جميع هذه الى اليسار وبما ان اللغة المستخدمة هي العربية فمن المفروض ان تكون الى اليمين ..ارجو التعديل ..جزاك الله خيرا

    ردحذف
  6. غير معرف11:47 م

    ولكن أخى عندما يرسل لى أحدهم رسالة أين أجدها أو كيف أخصص أيميل لتلقى الرسائل آسف لأنى مبتدىء

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية