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

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

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

الاكواد

ضع الكود التالي فوق ال </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> و استبدله بالكود التالي

<noscript id="bJs" hidden>
</body>
&lt;/noscript&gt;
&lt;/body&gt;