# Contact Page V6 — No Finger + Bold Chat + Enhanced Stats + Calendar CSS + Custom Fields --- ## PART 1: Updated HTML (Copy-Paste into Exal Website Builder) ```html ``` --- ## PART 2: Calendar Widget CSS (Paste in Exal Calendar → Widget Appearance → Custom CSS) ```css :root { --cw-primary: #7C3AED; --cw-primary-hover: #6D28D9; --cw-primary-light: rgba(124,58,237,0.08); } .cw-widget-container { border-radius: 16px; } .cw-calendar-day { border-radius: 10px; } .cw-time-slot { border-radius: 10px; } .cw-time-slot.cw-selected { background: #7C3AED; color: #fff; border-color: #7C3AED; } .cw-btn-primary { background: linear-gradient(135deg, #7C3AED, #A78BFA); border: none; border-radius: 999px; font-weight: 700; letter-spacing: 0.03em; padding: 14px 32px; } .cw-service-card { border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid rgba(124,58,237,0.08); } .cw-form-field input:focus, .cw-form-field textarea:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.15); } .cw-calendar-day-number, .cw-time-slot-time, .cw-booking-date, .cw-booking-time { direction: ltr; unicode-bidi: embed; } ``` --- ## PART 3: Custom Form Fields — Bilingual (Set up in Exal Calendar) Go to: **Calendar → Form & Confirmation → Edit Form** Set **Widget Order**: Step 1: Date & Time → Step 2: Form ### Keep These Default Fields (REQUIRED): | # | Field | Status | |---|-------|--------| | 1 | First Name | Required | | 2 | Last Name | Required | | 3 | Email | Required | | 4 | Phone | Required | ### Add These Custom Fields: | # | Field Label | Type | Required | Options/Placeholder | |---|------------|------|----------|-------------------| | 5 | **Business Name / اسم الشركة** | Text | Optional | Your business name / اسم عملك | | 6 | **Industry / القطاع** | Dropdown | Required | Retail, Food, Real Estate, Healthcare, Education, Technology, Services, Other | | 7 | **Your Biggest Challenge / أكبر تحدٍ تواجهه** | Dropdown | Required | No leads, Low conversions, Bad reviews, No CRM, Social media not working, Don't know where to start, Other | | 8 | **Goals (Next 3 Months) / الأهداف (3 أشهر قادمة)** | Textarea | Optional | What do you want to achieve? / ما الذي تريد تحقيقه؟ | | 9 | **How Did You Hear About Us? / كيف سمعت عنا؟** | Dropdown | Optional | Google, Social Media, Referral, WhatsApp, Other | ### Field Label Format: **Always use this pattern:** English first / Arabic second ``` Business Name / اسم الشركة Industry / القطاع Your Biggest Challenge / أكبر تحدٍ تواجهه Goals (Next 3 Months) / الأهداف (3 أشهر قادمة) How Did You Hear About Us? / كيف سمعت عنا؟ ``` ### Dropdown Options (Bilingual): **Industry / القطاع:** ``` Retail / تجزئة Food & Beverage / مطاعم ومقاهي Real Estate / عقارات Healthcare / صحة Education / تعليم Technology / تكنولوجيا Services / خدمات Other / أخرى ``` **Your Biggest Challenge / أكبر تحدٍ تواجهه:** ``` No leads / لا يوجد عملاء محتملون Low conversions / معدل تحويل منخفض Bad reviews / مراجعات سيئة No CRM / لا يوجد نظام إدارة علاقات Social media not working / وسائل التواصل لا تعمل Don't know where to start / لا أعرف من أين أبدأ Other / أخرى ``` **How Did You Hear About Us? / كيف سمعت عنا؟:** ``` Google Search Social Media / وسائل التواصل Referral / توصية WhatsApp Other / أخرى ``` --- ## Setup Checklist - [ ] Paste HTML into Exal Website Builder - [ ] Paste CSS into Calendar → Widget Appearance → Custom CSS - [ ] Change widget order: Step 1: Date & Time → Step 2: Form - [ ] Add 5 custom fields with bilingual labels - [ ] Set dropdown options (bilingual) - [ ] All custom fields: numbers in English only - [ ] Test booking flow end-to-end