Coming SoonCustom form configuration is planned for a future release. Currently, forms are handled automatically by the experience widget based on your experience settings.
| Form Type | Purpose | Availability |
|---|
| Experience Entry | Join queue, enter draw, place bid | Automatic (via widget) |
| Email Capture | Collect email addresses | Coming soon |
| Contact Form | General inquiries | Coming soon |
| Survey | Collect feedback | Coming soon |
Experience Entry Forms
The experience widget automatically displays the appropriate form based on authentication requirements.
Guest Entry
For experiences that allow guest access:
┌─────────────────────────────────────────────────┐
│ Join the Queue │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Email (optional) │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [ Join Now ] │
│ │
└─────────────────────────────────────────────────┘
Authenticated Entry
For experiences requiring email or phone verification:
┌─────────────────────────────────────────────────┐
│ Join the Queue │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Email │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [ Send Code ] │
│ │
│ ─────── or ─────── │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Phone Number │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [ Send Code ] │
│ │
└─────────────────────────────────────────────────┘
OTP Verification
After submitting email or phone:
┌─────────────────────────────────────────────────┐
│ Verify Your Email │
│ │
│ We sent a code to [email protected] │
│ │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │
│ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ │
│ │
│ [ Verify & Join ] │
│ │
│ Didn't receive it? [Resend Code] │
│ │
└─────────────────────────────────────────────────┘
Required Access Code
┌─────────────────────────────────────────────────┐
│ VIP Access Required │
│ │
│ Enter your access code to continue │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Access Code │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [ Continue ] │
│ │
└─────────────────────────────────────────────────┘
Optional Access Code
┌─────────────────────────────────────────────────┐
│ Join the Queue │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Email │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Have an access code? (optional) │
│ ┌─────────────────────────────────────────┐ │
│ │ Access Code │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [ Join Now ] │
│ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ Place Your Bid │
│ │
│ Current Bid: $150.00 │
│ Minimum Bid: $160.00 │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ $ Your Bid │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ☐ Enable auto-rebid up to $______ │
│ │
│ [ Place Bid ] │
│ │
└─────────────────────────────────────────────────┘
Email Validation
{
type: "email",
required: true,
validation: {
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: "Please enter a valid email address"
}
}
Phone Validation
{
type: "phone",
required: true,
validation: {
international: true,
message: "Please enter a valid phone number"
}
}
Access Code Validation
{
type: "accessCode",
required: true | false, // Based on experience settings
validation: {
serverSide: true, // Validated against database
message: "Invalid or expired access code"
}
}
Error Handling
Forms display contextual error messages:
| Error | Display |
|---|
| Required field empty | ”This field is required” |
| Invalid email format | ”Please enter a valid email” |
| Invalid access code | ”Invalid or expired access code” |
| Rate limited | ”Too many attempts. Please wait.” |
| Server error | ”Something went wrong. Please try again.” |
┌─────────────────────────────────────────────────┐
│ Join the Queue │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Email │ │
│ └─────────────────────────────────────────┘ │
│ ⚠️ Please enter a valid email address │
│ │
│ [ Join Now ] │
│ │
└─────────────────────────────────────────────────┘
| Element | Theme Property |
|---|
| Input background | --ff-color-background |
| Input border | --ff-color-muted |
| Input text | --ff-color-text |
| Label text | --ff-color-muted |
| Button | --ff-color-primary |
| Error text | System red (accessibility) |
Custom Field Types
| Field | Description |
|---|
| Text | Single-line text input |
| Textarea | Multi-line text input |
| Email | Email with validation |
| Phone | Phone with country code |
| Select | Dropdown selection |
| Checkbox | Single checkbox |
| Checkbox Group | Multiple checkboxes |
| Radio | Radio button group |
| Date | Date picker |
| File | File upload |
| Action | Description |
|---|
| Submit to API | Send data to your endpoint |
| Send Email | Notify on submission |
| Add to Audience | Add consumer to Fanfare audience |
| Webhook | Trigger external integrations |
Conditional Logic
Show/hide fields based on responses:
{
field: "companySize",
showIf: {
field: "customerType",
equals: "business"
}
}
Current Workarounds
Until custom forms are available:
Embed forms from external providers:
<!-- Example: Typeform embed -->
<div data-tf-live="01234567890"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
Webhook Integration
Use Fanfare webhooks to capture data when consumers join experiences:
// Webhook payload includes consumer data
{
event: "consumer.joined",
data: {
consumerId: "cons_...",
email: "[email protected]",
experienceId: "exp_...",
metadata: { ... }
}
}
Next Steps
