مدونة هلا تك

اضافة اتصل بنا بشكل منبثق تعمل 100% بدون خطا

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

شرح تركيب اضافة اتصل بنا

أذهب الى التنسيق و اضف اداة جديدة و اختار اداة ~~HTML/javascript~~

و ثم الصق الكود التالي بداخلها

و ثم قم بالحفظ

<style>
.custom-contact-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 40px;
border-radius: 8px;
width: 600px;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.custom-label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}

.custom-input,
.custom-textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}

.custom-button {
background-color: #6c983f;
color: #fff;
padding: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
box-sizing: border-box;
transition: background-color 0.3s;
}

.custom-button:hover {
background-color:#547a2c;
}

.custom-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.custom-close-button {
position: absolute;
top: 4px;
left: 42px;
cursor: pointer;
font-size: 33px;
color: #000;
}
.custom-close-button:hover {
color: #6c983f;
}

@media only screen and (max-width: 768px) {
.custom-contact-popup {
width: 90%;
}
}

@media only screen and (max-width: 480px) {
.custom-contact-popup {
width: 95%;
}
}
</style>

<button class="custom-button" onclick="openCustomContactForm()">Open Contact Form</button>

<div class="custom-overlay" onclick="closeCustomContactForm()"></div>
<div class="custom-contact-popup">
<span class="custom-close-button" onclick="closeCustomContactForm()">×</span>
<form action="https://formsubmit.co/xxxxxxxxxxxxxxxxxx" method="POST">
<label class="custom-label" for="name">Name:</label>
<input class="custom-input" type="text" id="name" name="name" required=""/>

<label class="custom-label" for="email">Email:</label>
<input class="custom-input" type="email" id="email" name="email" required=""/>

<label class="custom-label" for="message">Message:</label>
<textarea class="custom-textarea" id="message" name="message" rows="4" required></textarea>

<button class="custom-button" type="submit">Submit</button>
</form>
</div>

<script>
function openCustomContactForm() {
document.querySelector(".custom-contact-popup").style.display = "block";
document.querySelector(".custom-overlay").style.display = "block";
}

function closeCustomContactForm() {
document.querySelector(".custom-contact-popup").style.display = "none";
document.querySelector(".custom-overlay").style.display = "none";
}
</script>

التعديل على اضافة اتصل بنا

قم بأستبدال ~~xxxxxxxxxxxxxxxxxx~~ بالايميل الخاص بك اللذي تريد استقبال الرسائل عليه

ملاحظة

بعد تركيب الاضافة قم بارسال ايميل لنفسك

افتح الرسالة و قم بالتفعيل بالضغط على رابط التفعيل

تقوم بهذا الامر لمرة واحدة فقط و ستعمل الاضافة معك بدون اي مشكلة

و شكرا لكم على زيارة المدونة / هلا تك /

وفي الختام !

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