# HubSpot SDR Form Hidden Fields Implementation

**Last Updated:** 2026-03-10

## Overview

The HubSpot embedded form on the `/sdr` page automatically sets hidden field values for tracking purposes:

- **Lead Source**: "Freelancesdr"
- **UTM Source**: "Freelancesdr"
- **UTM Campaign**: Value from URL parameter `?sdr=`

## Form Fields

### Visible Fields

The form includes the following visible fields:

1. **Unternehmensname** (`company`) - Required
2. **Vorname** (`firstname`) - Required
3. **Nachname** (`lastname`) - Required
4. **E-Mail** (`email`) - Required
5. **Telefonnummer** (`phone`) - Required
6. **Segment** (`segment__c`) - Required (dropdown)
7. **Anzahl Mitarbeitende** (`anzahl_mitarbeiter__c`) - Optional (number)
8. **Genannter Preis** (`genannter_preis__c`) - Optional (text)
9. **Kaufinteresse innerhalb der nächsten 4 Monate** (`kaufinteresse_4_monate__c`) - Optional (checkbox)
10. **Weitere Angaben (Ist-Zustand, Pain Points, Wechselmotivation)** (`message`) - Optional (multi-line text)

## Implementation Details

### File Location

`v2/base/include_form-hubspot-sdr.php`

### Key Features

1. **Multiple Field Discovery Strategies**

   - jQuery selectors (primary method for HubSpot forms)
   - Native DOM querySelector
   - ID-based selection
   - Data attribute selection

2. **Optimized Value Setting**

   - Immediate setting in `onFormReady` (no delays for faster form appearance)
   - MutationObserver to catch dynamically added fields
   - Final attempt in `onFormSubmit` callback
   - AJAX interception ensures values are included even if form fields are cleared

3. **AJAX Request Interception**

   - Intercepts both `fetch` API and `XMLHttpRequest` calls to HubSpot API
   - Modifies request body to ensure hidden field values are included
   - Handles both JSON string and object formats

4. **Robust Event Handling**
   - Proper event triggering for dropdowns (change, blur)
   - Proper event triggering for inputs (input, change)
   - Works with both jQuery and native DOM methods

## Field Configuration

### HubSpot Form Fields

- **leadsource** (dropdown)

  - Type: Dropdown
  - Hidden: Yes
  - Required: No
  - Value: "Freelancesdr" (must match exact dropdown option)

- **source\_\_c** (text)

  - Type: Multi-line text
  - Hidden: Yes
  - Required: No
  - Value: "Freelancesdr"

- **utm_campaign\_\_c** (text)
  - Type: Multi-line text
  - Hidden: Yes
  - Required: No
  - Value: URL parameter `?sdr=` value (if present)

### Visible Form Fields

- **segment__c** (dropdown)
  - Type: Dropdown
  - Hidden: No
  - Required: Yes
  - Label: "Segment"
  - Options: Various industry segments (Altersheim, Apotheke, Restaurant, etc.)

- **anzahl_mitarbeiter__c** (number)
  - Type: Number
  - Hidden: No
  - Required: No
  - Label: "Anzahl Mitarbeitende"
  - Maps to HubSpot property: `anzahl_mitarbeiter__c`

- **genannter_preis__c** (text)
  - Type: Single-line text
  - Hidden: No
  - Required: No
  - Label: "Genannter Preis"
  - Maps to HubSpot property: `genannter_preis__c`
  - Description: Price mentioned by SDR (e.g., "89€" or "89-149€")

- **kaufinteresse_4_monate__c** (checkbox)
  - Type: Single checkbox
  - Hidden: No
  - Required: No
  - Label: "Kaufinteresse innerhalb der nächsten 4 Monate"
  - Maps to HubSpot property: `kaufinteresse_4_monate__c`
  - Description: Whether lead has purchase interest within next 4 months
  - Styling: Custom Ordio checkbox styling applied (1.25rem, blue border #4d8ef3, white checkmark when checked)
  - Layout: Two-column flex layout so text wraps under itself, not under checkbox

- **message** (multi-line text)
  - Type: Multi-line text
  - Hidden: No
  - Required: No
  - Label: "Weitere Angaben (Ist-Zustand, Pain Points, Wechselmotivation)"
  - Maps to HubSpot property: `message`

## Debugging

### Enable Debug Mode

Set `DEBUG_MODE = true` in `v2/base/include_form-hubspot-sdr.php` (line 29) to enable console logging.

### Test Endpoint

A test endpoint is available at `/v2/api/test-sdr-form-submission.php` to log form submission data for debugging.

### Common Issues

1. **Values not being set**

   - Check browser console for debug messages (if DEBUG_MODE is enabled)
   - Verify form fields exist in HubSpot form configuration
   - Check that "Freelancesdr" exists as a dropdown option in leadsource field

2. **AJAX interception not working**

   - Verify that fetch/XMLHttpRequest interception is set up in `onFormReady`
   - Check network tab in browser DevTools to see actual request payload

3. **Field values cleared on submission**
   - This is a known HubSpot behavior for hidden fields
   - The AJAX interception ensures values are included in the request body even if form fields are cleared

## Testing

### Manual Testing Steps

1. Visit `/sdr` page
2. Open browser DevTools (Network tab)
3. Fill out and submit the form
4. Check Network request to HubSpot API
5. Verify request body contains:
   - `leadsource: "Freelancesdr"`
   - `source__c: "Freelancesdr"`
   - `utm_campaign__c: <sdr-parameter-value>` (if URL has `?sdr=` parameter)

### Test with URL Parameters

- `/sdr?sdr=MangoPartners` - Should set utm_campaign\_\_c to "MangoPartners"
- `/sdr?sdr=Chris` - Should set utm_campaign\_\_c to "Chris"
- `/sdr` - Should not set utm_campaign\_\_c (no parameter)

## Performance Optimizations

### Script Loading

- HubSpot script loads asynchronously (`async` attribute) to prevent blocking page rendering
- Reduced polling interval from 100ms to 50ms for faster form detection
- Removed unnecessary setTimeout delays (300ms, 1000ms) for immediate form appearance

### Page Optimizations

- AOS (Animate On Scroll) disabled on `/sdr` page (`$aosScript = "false"`) to prevent initialization delays
- Form container has min-height (400px) to prevent layout shift (CLS)
- Mobile-responsive container classes with proper padding (`px-4 md:px-0`)
- Responsive heading sizing (`text-3xl md:text-4xl`)

### Mobile Optimization

- Container padding: `px-4` on mobile, `md:px-0` on desktop
- Responsive margins: `mt-4 md:mt-6` and `mb-12 md:mb-24`
- Form uses HubSpot's default responsive styling (no custom overrides)

## Technical Notes

- The implementation uses a singleton pattern for AJAX interception to prevent multiple overwrites
- Debug logging is disabled by default (`DEBUG_MODE = false`)
- HubSpot script loads asynchronously to improve page load performance
- MutationObserver watches for dynamically added form fields
- No custom CSS styling - uses HubSpot's default embedded form styling

## Related Files

- `v2/pages/sdr.php` - Main SDR landing page
- `v2/api/test-sdr-form-submission.php` - Test endpoint for debugging
- `v2/config/hubspot.php` - HubSpot API configuration