Forms

الاسم

بريد إلكتروني *

رسالة *

كيفية إضافة نماذج اتصال أو طلب توظيف إلى مدونتك على بلوجر

Author Img
عبدو تكنولوجي

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

معاينة الاضافة


فيديو الشرح


الاكواد

ضع الكود التالي فوق ال </head
<b:if cond='data:view.isPage'>
<style type='text/css'>
/*<![CDATA[*/  
.Formulaire{
--main-color: #f44336; /* اللون الاساسي*/
--textColor: #27272a;/* اللون الخط*/
--input-bg: rgba(0,0,0,.05); /* اللون الحقول*/
--PColor: #666666;/* اللون عناوين*/
max-width:768px;/* عرض الاضافة*/
width:100%;
margin:2rem auto;
}
.Formulaire .inputs{float:none;position:relative;margin-bottom:2rem}
.Formulaire .inputs input,.Formulaire .inputs textarea,.Formulaire .inputs select{font-size:15px;font-family:inherit;color:var(--txtColor);padding:1rem;display:block;width:100%;box-sizing:border-box;border:none;background:var(--input-bg);border-radius:7px}
.Formulaire .inputs .highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}
.Formulaire .inputs .bar{position:relative;display:block;width:100%}
.Formulaire .inputs input:focus,.Formulaire .inputs textarea:focus{outline:none}
.Formulaire .inputs input:focus~.highlight,.Formulaire .inputs textarea:focus~.highlight{}
.Formulaire .inputs .bar:after,.Formulaire .inputs .bar:before{content:'';height:2px;width:0;bottom:1px;position:absolute;background:var(--main-color);transition:.2s ease all}
.Formulaire .inputs .bar:before{left:50%}
.Formulaire .inputs .bar:after{right:50%}
.Formulaire .inputs input:focus~.bar:before,.Formulaire .inputs input:focus~.bar:after,.Formulaire .inputs textarea:focus~.bar:before,.Formulaire .inputs textarea:focus~.bar:after{width:50%}
.Formulaire .inputs label{color:var(--PColor);font-size:1rem;font-weight:400;position:absolute;pointer-events:none;right:7px;top:9px;transition:all 0.2s ease-in-out}
.Formulaire .inputs input:focus~label,.Formulaire .inputs input:valid~label,.Formulaire .inputs textarea:focus~label,.Formulaire .inputs textarea:valid~label{top:-33px;color:var(--txtColor)}
.FormMsg{border-radius:8px;background:var(--input-bg);margin:10px 0;line-height:1.8;padding:16px 16px;display:flex;transition:all 0.3s ease-in-out}
.Formulaire .btn{background-color:var(--main-color);padding:11px 15px;border-radius:5px;color:#fff;font-size:1rem;width:fit-content;margin:13px auto;border: 0}
.FormMsg:empty{display:none}
.FormMsg.success{background:rgb(70 234 119 / 10%);color:rgb(var(70 234 119))}
.FormMsg.failed{background:rgb(245 130 130 / 10%);color:rgb(245 130 130)}
/*]]>*/
</style>
</b:if>

ضع الكود التالي فوق ال </body>
إبحث على </body> و استبدله بالكود التالي
&lt;noscript id=&quot;bJs&quot; hidden&gt;
</body>
&lt;/noscript&gt;
&lt;/body&gt;

مولد النماذج

    قد تُعجبك هذه المشاركات

    تعليقات

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع