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

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

Eslam Ahmed 3:39 م
الطريقة هي من خلال إضافة كود 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/AVvXsEiAGySQU0_jlwiuiah735fIBwRJe7nSBFJROuJ7ziF-mLM3q36ER-nvjcV1YmMN21vJVQ3GeaDPnBh2ImdVuMK6ae8EQWR_Wge7wnSzS1nXH19iWmVGr8vQEDL7hluWRxUHf9y2NkyEpnNM/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/AVvXsEjImYQm7Yk777SqGI7F61Wq4AOEgngkoocPsCH6PD_RIvHMqtgE7BrL0NHa4Igc4I5EYio205-cfnmw4LAuI7UFthVVxk-Np-WQr33191Qxi2AU5e5TaxLChDk2B6Bg7zv3ay_henJ8fbuM/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/AVvXsEgGbui25cFpFviYn_xSe48AbFbji6UDAIC1EQxuDNWWW7jhk1C8LeYkCsRDXxQxjZTKGa-JttyFnxVsysH4ZHaydf0Nhc2C_vTMNFR8KqaeYzcIn8uT9NIQcA_X0AxL69_R_rr8BTglAsae/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/AVvXsEgboPxnwQ_DyGMDg_JS4Hod9ck9IENZqgtK9y5PX1McERwqkN0v_wwj74UEjQIPKoCoC-QgeP-Gbx2s4gaVMRmK8Xdl4xQlosxFtXOlWzx2-tNFY6NbscBJGBKF2845uXH93jne17n3EQWd/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/AVvXsEjt8BpWp_YiNCf26H3ZJUH96bSXJC-EBtB9sZ9DtLvZQLzSY1TUBWdKTcPug1-2Fqlf89vCoZPNR0tvZs1TPR-R2AOcl4-DaMZk-_Zqo0Kz5wPgPf_VL7RdsmF1Qyp8IZpa_FE-rL0N4m22/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)