Zoho Commerce ഉപയോഗിച്ച് ഒരു E-Commerce Website എങ്ങനെ നിർമ്മിക്കാം?

Customer enquiries സ്വീകരിക്കാൻ ഒരു clear and responsive Contact Form website-ൽ ഉൾപ്പെടുത്താം. ഓരോ website-നും form manually design ചെയ്യുന്നതിനുപകരം, താഴെ നൽകിയിരിക്കുന്ന AI prompt ഉപയോഗിച്ച് business requirements അനുസരിച്ച് customize ചെയ്യാവുന്ന contact form generate ചെയ്യാം.

Form-ൽ Name, Email, Phone, Subject, Message തുടങ്ങിയ fields ഉൾപ്പെടുത്താനും, ആവശ്യത്തിന് WhatsApp enquiry functionality ചേർക്കാനും prompt customize ചെയ്യാം.

AI Prompt — Generate a Contact & WhatsApp Form

Create a clean, professional, reusable and fully responsive Contact & WhatsApp Enquiry section for a Zoho Commerce website using HTML, CSS, JavaScript and Zoho Liquid schema.

Requirements:

1. The code must be generic and reusable for any business or e-commerce website. Do not use any real brand name, email address, phone number, logo, or social media URL.

2. Create a two-column desktop layout:
    – Left side: Contact information
    – Right side: Contact enquiry form

3. The contact information area should include:
    – Heading: “Let’s Connect”
    – Short introductory text
    – Business email
    – Social media icons for Instagram, Facebook, Pinterest and YouTube

4. Use easy-to-replace placeholders:
    – YOUR BUSINESS NAME
    – YOUR EMAIL ADDRESS
    – YOUR WHATSAPP NUMBER
    – YOUR INSTAGRAM LINK
    – YOUR FACEBOOK LINK
    – YOUR PINTEREST LINK
    – YOUR YOUTUBE LINK

5. Create a contact form with:
    – Name
    – Email
    – Phone
    – Subject
    – Message
    – Send Message button

6. Name, Email and Message must be required fields.

7. When the visitor clicks “Send Message”, use JavaScript to create a formatted WhatsApp enquiry containing the information entered in the form.

8. Open the WhatsApp enquiry using the business WhatsApp number supplied in the placeholder. The WhatsApp number should include the country code.

9. Do not submit the form to an external server or database.

10. Add clean circular social media icons using inline SVG. Do not use external icon libraries.

11. Make the design easy to adapt to different brands. Avoid brand-specific class names and use neutral, clearly named CSS classes.

12. Keep colors easy to customize. Add comments showing where background, text, border, button and accent colors can be changed.

13. Make the section fully responsive:
    – Desktop: two-column layout
    – Mobile (767px and below): single-column layout
    – Form fields should stack vertically on mobile
    – Send Message button should be full width on mobile

14. Include hover and focus states for buttons, links and form fields.

15. Use accessible HTML including appropriate input types, labels or accessible attributes, and aria-labels for social media links.

16. Include a valid Zoho Commerce Liquid schema so the section can be added as a Custom Section.

Use:
available_in templates: [“index”, “page”]

17. Return one complete copy-paste-ready code block containing:
    – <style>
    – HTML
    – <script>
    – {% schema %}

18. Do not include explanations outside the code block.

The final result should be minimal, professional, mobile-friendly and suitable for different businesses and e-commerce stores.