Skip to main content

Contact Page Documentation - Docs Site

This document provides technical details about the contact page implementation in the docs site and the migration to Tally.so.

Page Overview​

The contact page (/help/contact) serves as the primary support interface for users of the documentation site, providing a structured way to submit support requests with categorized form fields.

File Locations​

  • Page: src/pages/contact.js
  • Component: src/components/TallyContactForm.js

Architecture Context​

  • Framework: Docusaurus v3.4.0
  • Styling: TailwindCSS integration via PostCSS plugin
  • Layout: Docusaurus Layout with custom Hero component
  • Content: React components in pages directory

Migration to Tally.so​

Background​

The docs site contact page was migrated from a comprehensive custom React form to a Tally.so embedded form to streamline support request handling and reduce maintenance complexity.

Migration Details​

Previous Implementation (NO LONGER USED)​

The original form included:

  • Custom form fields: Name, email, category dropdown, shop URL, message, conditional order number
  • Advanced logic: Conditional field rendering based on category selection
  • State management: React useState for form data and HTTP request states
  • API integration: Axios POST to Pipedream webhook (https://eogflk1xclelkwf.m.pipedream.net)
  • Error handling: Custom Alert components for success/error states
  • Dependencies: axios, clsx, custom field components

New Implementation (CURRENT)​

  • Component: src/components/TallyContactForm.js
  • Form ID: n9ApjG (docs-specific form)
  • Dependencies: Only React and Docusaurus components
  • Processing: Handled by Tally.so infrastructure

Technical Implementation​

Component Structure​

export default function TallyContactForm() {
  return (
    <Layout>
      <Hero
        title="Contact Support"
        tagline="Need help or have questions about ID verification for your store?"
      />
      <div className="max-w-lg mx-auto px-3 py-8">
        <iframe
          data-tally-src="https://tally.so/embed/n9ApjG?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
          loading="lazy"
          width="100%"
          height="1108"
          frameBorder="0"
          marginHeight="0"
          marginWidth="0"
          title="Support Request (docs)"
        />
      </div>
    </Layout>
  );
}

Tally.so Script Loading Strategy​

Unlike Next.js applications, Docusaurus doesn't have a global _document.js file. The script loading approach mirrors the optimized www site strategy:

useEffect(() => {
  const loadTallyScript = () => {
    if (typeof window !== "undefined" && !window.Tally) {
      const script = document.createElement("script");
      script.src = "https://tally.so/widgets/embed.js";
      script.async = true;
      script.onload = () => {
        if (window.Tally) {
          window.Tally.loadEmbeds();
        }
      };
      document.head.appendChild(script);
    } else if (window.Tally) {
      window.Tally.loadEmbeds();
    }
  };

  loadTallyScript();
}, []);

Iframe Configuration​

Parameters Explained:

  • alignLeft=1 - Aligns form elements to the left
  • hideTitle=1 - Hides the default Tally form title
  • transparentBackground=1 - Makes form background transparent for theme integration
  • dynamicHeight=1 - Allows form height to adjust based on content

Docs-specific settings:

  • Height: 1108px (larger than www site due to more form fields)
  • Title: "Support Request (docs)"
  • Form ID: n9ApjG (different from www site's nr8LKp)

Docusaurus Integration​

Layout Components​

  • Layout: Uses Docusaurus Layout component for consistent theming
  • Hero: Custom Hero component with title and tagline
  • Styling: TailwindCSS classes work within Docusaurus theme

The contact page is integrated into the Docusaurus navigation via docusaurus.config.js:

{ to: "/help/contact", label: "Contact Us", position: "right" }

URL Structure​

  • Path: /help/contact
  • Base URL: /help/ (configured in docusaurus.config.js)
  • Full URL: https://getverdict.com/help/contact

Performance Optimizations​

Script Loading Benefits​

  • Before: No external scripts (custom form only)
  • After: Tally.so script loaded only when contact page is accessed
  • Strategy: Dynamic script injection avoids loading on all documentation pages

Bundle Size Impact​

  • Removed dependencies: axios, custom form state management
  • Added dependency: Tally.so widget script (loaded on-demand)
  • Net benefit: Reduced JavaScript bundle size for documentation browsing

Differences from WWW Site Implementation​

Framework Differences​

  • WWW: Next.js with custom _document.js
  • Docs: Docusaurus with component-level script loading
  • Layout: Docusaurus Layout vs custom Next.js layout
  • Styling: Docusaurus theme integration vs standalone TailwindCSS

Form Differences​

  • WWW Form: Simple contact form (4 fields)
  • Docs Form: Support request form with categorization (6+ fields)
  • Height: WWW uses 514px, Docs uses 1108px
  • Form ID: WWW uses nr8LKp, Docs uses n9ApjG

Content Preservation​

Elements preserved from the original implementation:

  • Hero title: "Contact Support"
  • Hero tagline: "Need help or have questions about ID verification for your store?"
  • Page structure: Layout with hero section followed by form
  • Responsive design: max-width container with padding
  • Navigation: Same URL and navbar integration

Dependencies​

Current Dependencies​

  • React - Component framework
  • Docusaurus - Layout and Hero components
  • TailwindCSS - Styling framework
  • Tally.so - Form hosting and management

Removed Dependencies​

  • axios - HTTP client for form submission
  • clsx - Conditional CSS classes
  • useState - Form state management
  • Custom form field components (Alert, Label, TextField, etc.)
  • Pipedream webhook integration

Form Features Comparison​

Previous Custom Form​

  • Fields: Name, email, category, shop URL, message, conditional order number
  • Validation: HTML5 validation + custom logic
  • Conditional rendering: Order number field based on category
  • Error handling: Custom error/success alerts
  • Styling: Custom TailwindCSS styled components

New Tally.so Form​

  • Fields: Configured via Tally.so dashboard
  • Validation: Built-in Tally.so validation
  • Logic: Conditional fields managed by Tally.so
  • Error handling: Built-in error handling
  • Styling: Tally.so styling with transparent background

Migration Benefits​

  1. Reduced Maintenance: No custom form logic or validation to maintain
  2. Improved UX: Professional form design with advanced features
  3. Better Performance: Smaller bundle size, on-demand script loading
  4. Enhanced Features: Advanced form logic without custom code
  5. Streamlined Support: Centralized form management via Tally.so dashboard
  6. Built-in Analytics: Form submission tracking and analytics

Support Workflow Integration​

Form Submission Handling​

  • Previous: Custom Pipedream webhook processing
  • Current: Tally.so handles submission, notification, and storage
  • Benefits: Built-in spam protection, data validation, and delivery

Support Team Integration​

  • Form responses: Delivered via Tally.so notification system
  • Data export: Available via Tally.so dashboard
  • Analytics: Built-in conversion and completion tracking

Future Considerations​

Customization Options​

  • Styling: Limited to Tally.so capabilities and CSS injection
  • Fields: Managed via Tally.so dashboard
  • Logic: Advanced conditional logic via Tally.so features
  • Integration: Webhook capabilities for external system integration

Monitoring and Analytics​

  • Form performance: Monitor via Tally.so analytics
  • User feedback: Track form completion rates
  • Support metrics: Measure response times and resolution rates

Maintenance Notes​

  • Form updates: Managed via Tally.so dashboard, no code changes required
  • Field modifications: Add/remove fields without touching codebase
  • Styling changes: Limited to Tally.so customization options
  • Performance monitoring: Track script loading and form rendering times