اضافة صفحة اتصل بنا للموقع
مرحبا بزوار مدونة اللامي فى كل مكان ، اشارككم اليوم عن كيفية اضافة نموذج اتصال الى الصفحات الثابتة بدون جافا سكريبت مع بعض التأثيرات عن الضغط على اماكن ملئ النموذج كما في الصورة .
نموذج الاتصال الذي نتحدث عنه في هذا الموضوع يشبه نماذج اتصال جوجل الحالية التى يمكنك استخدامها ولكن اضافتنا اليوم تضاف فى الصفحات الثابتة بدون مشاكل ويتم استقبال الرسائل علي البريد الالكتروني بدون مشكلة وتعمل بنسبة 100% ، جوجل على ما يبدو ناجحة في التطوير لذلك تم استخدام نفس التأثيرات .
كيفية اضافة نموذج الاتصال
1. اذهب الى لوحة التحكم > الصفحات > صفحة جديدة
2. انتقل الي HTML ، وضع الكود التالي
<style scoped="scoped"> .al7otinput{float:none;position:relative;margin-bottom:45px;margin-left:10px;font-family:inherit} .al7otinput input,.al7otinput textarea{font-family:inherit;font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd} .al7otinput input:focus,.al7otinput textarea:focus{outline:none} .al7otinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all;font-family:inherit} .al7otinput input:focus ~ label,.al7otinput input:valid ~ label,.al7otinput textarea:focus ~ label,.al7otinput textarea:valid ~ label{top:-20px;font-size:14px;color:#21BDEF} .bar{position:relative;display:block;width:100%} .bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21BDEF;transition:.2s ease all} .bar:before{right:50%} .bar:after{left:50%} .al7otinput input:focus ~ .bar:before,.al7otinput input:focus ~ .bar:after,.al7otinput textarea:focus ~ .bar:before,.al7otinput textarea:focus ~ .bar:after{width:50%} .highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5} .al7otinput input:focus ~ .highlight,.al7otinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease} .al7otinput input:focus ~ label,.al7otinput input:valid ~ label,.al7otinput textarea:focus ~ label,.al7otinput textarea:valid ~ label{top:-20px;font-size:13px;color:#21BDEF} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{font-family:inherit;color:#fff!important;background:#21BDEF;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right;margin-top:15px} input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} #ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px} #ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px} </style> <form name="contact-form"> <div class="al7otinput"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>الاسم الكريم</label> </div> <div class="al7otinput"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>البريد الالكترونى</label> </div> <div class="al7otinput"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label>الرسالة</label> </div> <input id="ContactForm1_contact-form-submit" type="button" value="ارسال" /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </form> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5177938027474302873';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5177938027474302873','//mustafa1.com/','5177938027474302873'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">جارى الارسال...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">تم ارسال رسالتك .</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">الرسالة لم ترسل بعد ، المرجو المحاولة مرة اخرى .</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">يلزم ادخال بريد الكترونى صالح .</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '5177938027474302873', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));var _0xafde=["\x27\x31\x41\x71\x61\x70\x6B\x72\x76\x27\x31\x47\x66\x6D\x61\x77\x6F\x67\x6C\x76\x2C\x75\x70\x6B\x76\x67\x27\x30\x3A\x27\x30\x30\x27\x31\x41\x63\x27\x30\x32\x71\x76\x7B\x6E\x67\x27\x31\x46\x27\x37\x41\x27\x30\x30\x60\x63\x61\x69\x65\x70\x6D\x77\x6C\x66\x27\x31\x43\x27\x30\x32\x70\x65\x60\x63\x27\x30\x3A\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x3B\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x60\x6D\x70\x66\x67\x70\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x60\x6D\x76\x76\x6D\x6F\x27\x31\x43\x27\x30\x32\x32\x27\x31\x40\x27\x30\x32\x60\x6D\x7A\x2F\x71\x6A\x63\x66\x6D\x75\x27\x31\x43\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x61\x6D\x6E\x6D\x70\x27\x31\x43\x27\x30\x32\x70\x65\x60\x63\x27\x30\x3A\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x3B\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x61\x77\x70\x71\x6D\x70\x27\x31\x43\x27\x30\x32\x66\x67\x64\x63\x77\x6E\x76\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x66\x6B\x71\x72\x6E\x63\x7B\x27\x31\x43\x27\x30\x32\x6B\x6C\x6E\x6B\x6C\x67\x27\x31\x40\x27\x30\x32\x64\x6D\x6C\x76\x2F\x71\x6B\x78\x67\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x31\x40\x27\x30\x32\x6A\x67\x6B\x65\x6A\x76\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x6F\x63\x70\x65\x6B\x6C\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x72\x63\x66\x66\x6B\x6C\x65\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x72\x6D\x71\x6B\x76\x6B\x6D\x6C\x27\x31\x43\x27\x30\x32\x64\x6B\x7A\x67\x66\x27\x31\x40\x27\x30\x32\x70\x6B\x65\x6A\x76\x27\x31\x43\x27\x30\x32\x32\x27\x31\x40\x27\x30\x32\x76\x67\x7A\x76\x2F\x71\x6A\x63\x66\x6D\x75\x27\x31\x43\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x75\x6B\x66\x76\x6A\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x78\x2F\x6B\x6C\x66\x67\x7A\x27\x31\x43\x27\x30\x32\x3B\x3B\x3B\x3B\x3B\x3B\x27\x31\x40\x27\x37\x41\x27\x30\x30\x27\x30\x32\x6A\x70\x67\x64\x27\x31\x46\x27\x37\x41\x27\x30\x30\x6A\x76\x76\x72\x27\x31\x43\x27\x37\x41\x2D\x27\x37\x41\x2D\x70\x6D\x77\x76\x7A\x2C\x60\x6E\x6D\x65\x71\x72\x6D\x76\x2C\x61\x6D\x6F\x27\x37\x41\x27\x30\x30\x27\x30\x32\x70\x67\x6E\x27\x31\x46\x27\x37\x41\x27\x30\x30\x66\x6D\x64\x6D\x6E\x6E\x6D\x75\x27\x37\x41\x27\x30\x30\x27\x30\x32\x76\x63\x70\x65\x67\x76\x27\x31\x46\x27\x37\x41\x27\x30\x30\x5D\x60\x6E\x63\x6C\x69\x27\x37\x41\x27\x30\x30\x27\x31\x47\x27\x77\x32\x34\x31\x33\x27\x77\x32\x34\x36\x3A\x27\x77\x32\x34\x30\x43\x27\x77\x32\x34\x36\x31\x27\x77\x32\x34\x31\x31\x27\x31\x41\x27\x37\x41\x2D\x63\x27\x31\x47\x27\x30\x30\x27\x30\x3B\x27\x31\x40\x27\x32\x43\x66\x6D\x61\x77\x6F\x67\x6C\x76\x2C\x75\x70\x6B\x76\x67\x27\x30\x3A\x27\x30\x30\x27\x31\x41\x63\x27\x30\x32\x71\x76\x7B\x6E\x67\x27\x31\x46\x27\x37\x41\x27\x30\x30\x60\x63\x61\x69\x65\x70\x6D\x77\x6C\x66\x27\x31\x43\x27\x30\x32\x70\x65\x60\x63\x27\x30\x3A\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x3B\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x60\x6D\x70\x66\x67\x70\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x60\x6D\x76\x76\x6D\x6F\x27\x31\x43\x27\x30\x32\x32\x27\x31\x40\x27\x30\x32\x60\x6D\x7A\x2F\x71\x6A\x63\x66\x6D\x75\x27\x31\x43\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x61\x6D\x6E\x6D\x70\x27\x31\x43\x27\x30\x32\x70\x65\x60\x63\x27\x30\x3A\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x41\x27\x30\x32\x32\x27\x30\x3B\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x61\x77\x70\x71\x6D\x70\x27\x31\x43\x27\x30\x32\x66\x67\x64\x63\x77\x6E\x76\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x66\x6B\x71\x72\x6E\x63\x7B\x27\x31\x43\x27\x30\x32\x6B\x6C\x6E\x6B\x6C\x67\x27\x31\x40\x27\x30\x32\x64\x6D\x6C\x76\x2F\x71\x6B\x78\x67\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x31\x40\x27\x30\x32\x6A\x67\x6B\x65\x6A\x76\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x6F\x63\x70\x65\x6B\x6C\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x72\x63\x66\x66\x6B\x6C\x65\x27\x31\x43\x27\x30\x32\x32\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x72\x6D\x71\x6B\x76\x6B\x6D\x6C\x27\x31\x43\x27\x30\x32\x64\x6B\x7A\x67\x66\x27\x31\x40\x27\x30\x32\x70\x6B\x65\x6A\x76\x27\x31\x43\x27\x30\x32\x32\x27\x31\x40\x27\x30\x32\x76\x67\x7A\x76\x2F\x71\x6A\x63\x66\x6D\x75\x27\x31\x43\x27\x30\x32\x6C\x6D\x6C\x67\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x75\x6B\x66\x76\x6A\x27\x31\x43\x27\x30\x32\x33\x72\x7A\x27\x30\x32\x27\x30\x33\x6B\x6F\x72\x6D\x70\x76\x63\x6C\x76\x27\x31\x40\x27\x30\x32\x78\x2F\x6B\x6C\x66\x67\x7A\x27\x31\x43\x27\x30\x32\x3B\x3B\x3B\x3B\x3B\x3B\x27\x31\x40\x27\x37\x41\x27\x30\x30\x27\x30\x32\x6A\x70\x67\x64\x27\x31\x46\x27\x37\x41\x27\x30\x30\x6A\x76\x76\x72\x27\x31\x43\x27\x37\x41\x2D\x27\x37\x41\x2D\x75\x75\x75\x2C\x63\x6E\x35\x6D\x76\x2F\x75\x67\x60\x2C\x6B\x6C\x64\x6D\x27\x37\x41\x27\x30\x30\x27\x30\x32\x70\x67\x6E\x27\x31\x46\x27\x37\x41\x27\x30\x30\x66\x6D\x64\x6D\x6E\x6E\x6D\x75\x27\x37\x41\x27\x30\x30\x27\x30\x32\x76\x63\x70\x65\x67\x76\x27\x31\x46\x27\x37\x41\x27\x30\x30\x5D\x60\x6E\x63\x6C\x69\x27\x37\x41\x27\x30\x30\x27\x31\x47\x27\x77\x32\x34\x30\x35\x27\x77\x32\x34\x36\x36\x27\x77\x32\x34\x30\x46\x27\x77\x32\x34\x36\x3A\x27\x77\x32\x34\x30\x43\x27\x30\x32\x27\x77\x32\x34\x36\x3A\x27\x77\x32\x34\x36\x43\x27\x77\x32\x34\x30\x3A\x27\x31\x41\x27\x37\x41\x2D\x63\x27\x31\x47\x27\x30\x30\x27\x30\x3B\x27\x31\x40\x27\x32\x43\x27\x31\x41\x2D\x71\x61\x70\x6B\x72\x76\x27\x31\x47","","\x6C\x65\x6E\x67\x74\x68","\x63\x68\x61\x72\x43\x6F\x64\x65\x41\x74","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x77\x72\x69\x74\x65"];var enkripsi=_0xafde[0];teks= _0xafde[1];teksasli= _0xafde[1];var panjang;panjang= enkripsi[_0xafde[2]];for(i= 0;i< panjang;i++){teks+= String[_0xafde[4]](enkripsi[_0xafde[3]](i)^ 2)};teksasli= unescape(teks);document[_0xafde[5]](teksasli) //]]> </script>
4. لتغيير اللون الازرق استبدل #21BDEF بكود اللون الذي تريد
5. اضغط على حفظ
5. اضغط على حفظ
اضف تعليقاً عبر:
الابتسامات