خصّص شكل وسلوك رابط نموذج الاتصال على موقعك.
خيارات التخصيص
عند إنشاء كود رابط HTML في تبويب تضمين، يمكنك تخصيص:
- نص الرابط - ما يعرضه الرابط
- سلوك الرابط - يفتح في نفس النافذة أو نافذة جديدة
- عرض الشعار - إظهار أو إخفاء شعار SupportRetriever
خيارات نص الرابط
خيارات جاهزة
اختر من تنويعات شائعة:
- Contact - بسيط ومباشر
- Contact me - شخصي وودي
- Contact us - احترافي وأعمال
نص مخصص
أدخل نص الرابط بنفسك:
- "Get in touch"
- "إرسال us a message"
- "Reach out"
- "Talk to us"
- أو أي نص يناسب هويتك
سلوك الرابط
نفس النافذة (افتراضي)
الرابط يفتح في تبويب المتصفح الحالي:
<a href="https://supportretriever.com/form/your-form-id">Contact</a>
أنسب لـ:
- مواقع الصفحة الواحدة
- عندما تريد عودة المستخدمين بسهولة
- تجارب ملائمة للجوال
نافذة جديدة
الرابط يفتح في تبويب متصفح جديد:
<a href="https://supportretriever.com/form/your-form-id" target="_blank" rel="noopener noreferrer">Contact</a>
أنسب لـ:
- مواقع متعددة الصفحات
- عندما يريد المستخدمون الإبقاء على الموقع مفتوحاً
- الروابط الخارجية
عرض الشعار
مع الشعار
يتضمن شعار SupportRetriever قبل النص:
<a href="https://supportretriever.com/form/your-form-id">
<img src="https://supportretriever.com/images/logoPink_small.png" alt="SupportRetriever" style="vertical-align: middle; margin-right: 8px; height: 20px;">
Contact
</a>
المظهر:
Contact
بدون شعار
رابط نصي فقط:
<a href="https://supportretriever.com/form/your-form-id">Contact</a>
المظهر:
المعاينة المباشرة
يعرض تبويب تضمين معاينة مباشرة تتحدّث عند تغيير الخيارات:
معاينة
تنسيق CSS مخصص
بعد نسخ HTML، يمكنك إضافة CSS مخصص:
/* تنسيق الرابط */
.contact-form-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.contact-form-link:hover {
color: #2d2a7a;
text-decoration: underline;
}
/* تنسيق الشعار */
.contact-form-link img {
opacity: 0.9;
transition: opacity 0.2s;
}
.contact-form-link:hover img {
opacity: 1;
}
أفضل الممارسات
- نص واضح: استخدم نصاً وصفياً وموجهاً للإجراء
- موضع متسق: ضع الروابط حيث يتوقعها المستخدمون
- إمكانية وصول: تأكد من تباين لون كافٍ
- ملاءمة الجوال: اختبر على أجهزة الجوال
- اتساق الهوية: وافقه مع لغة تصميم موقعك