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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkcc0K07RvyALzFIC_KcSDWSTkdteGTihAcsoX45-Iwba0-el_dFHhvTLs8FrZ6PnWbSSMVZmBm8P5CQeQqjhdw8SD_kjo3Fjfa4yYOavh9T1NMln4Am78BEoJDhfoZQAsiQdE_Np7aeu/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyk6mMMmCbDs4_lDnkjfi3KQVuaWMK3_CRT68Z0RzaFTlmZgLtNzCBUGnOPKsNMDiqIPsavxwvP7gB1SktUnymJ2dcsVjQ2aVi8X0Oka_bfyvgXL4bSRs6uq537q1Ksy7ObjO0c50VHwFB/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzDczogr26mcAv94L3hKAKhlvEckS0YNYcTKeg84tMoWF9wi2ZotPezfxmqcOWvjzw1HCC-G8K0E4jYnBmI1VBrphp72SJ4gkW4zstj071l2pqrvVt8zRv6_O1Eni_cfOL0PGNIauyrrue/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79J7gZ7MI5JEwfnRXMMbPXasowwVpA1HD3RCb1Ii4Ym2uXGc55mcEk8x6U-bMrPFYaexnkZrhDbwiy6OMlMXAz8APEu1VZflml-J606_Y_yUkkJHDu04V0MRnv77Gqm6fiLBOqM72ajxF/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjxR2eCaoFuV2ZKK5RltCCG6xfFIWA1Bb8LPjUWSlDK1ZberVdEACJwvR_7pRwaMGYTU4NkCTcLE1flffgFgMKsXFBsJfLQal4uPGkcE2IjXq6hB1eU6OQtuAOKiYnZAcjQsPfoNAKt7Vm/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;
}
بعد اختيارك للشكل والتصميم الأفضل لمدونتك قم بحفظ القالب وعاين بنفسك.
الاشتراك في: تعليقات الرسالة (Atom)