Technical Documentation

The developer guide for the Universal Contact Form Ecosystem

🚀 Open Live Showcase

Architectural Overview

The Universal Contact Form is built using the Shadow DOM for 100% style isolation, ensuring it never breaks your site's existing CSS.

Autonomous Validation

Real-time client-side validation for emails, phones, and custom regex without external libraries.

DNA Sync

Matches your host site's branding instantly via the accent attribute.

SaaS Ready

Built-in api-key tracking for domain-locked security and submission limits.

Quick Integration

Follow these steps to deploy the component to any web property.

1. Include the Bundle

Add the production-ready UMD bundle to your header or footer.

<script src="https://contacti.app/js/index.js"></script>

2. Drop the Component

Place the custom tag anywhere in your HTML. The api-key is required for backend processing.

<universal-contact-form 
    api-key="USE_YOUR_UNIQUE_API_KEY" 
    fields="fullName,email,message" 
    accent="#764ba2">
</universal-contact-form>

Component Attributes

Attribute Required Description
api-key Yes Your unique API-KEY. Used for domain whitelisting, send-to-email, and usage limits.
fields No Comma-separated StandardFieldName list. Defaults to fullName,email,message.
accent No The hex color for buttons and focus states. Defaults to #0066FF.
success-mode No Values: message, checkbox, or redirect.

Usage Tracking & Security

Domain Whitelisting: For security, submissions are only processed if the Origin header matches the domain registered to your api-key in the Control Plane.

Usage is measured per-submission. Every time a user clicks "Submit," the system performs the following checks:

Text Fields Email Phone Dropdowns Consent Uploads Metadata

Field Dictionary 74 Fields

The following keys can be used in the fields attribute. Each field comes with pre-configured validation and labels.

💡 Tip: Browse fields by category for intuitive grouping, or switch to "All Fields" view to see everything in one place. Use the search bar to quickly find specific fields.

Core Contact 10

firstName Text
min: 1 char max: 50 chars
lastName Text
min: 1 char max: 50 chars
fullName Text
min: 2 chars max: 100 chars
email Email
email format max: 255 chars
emailConfirmation Match
email format must match email
phone Tel
phone format 7-15 digits
phoneCountryCode Select
dropdown options
mobilePhone Tel
phone format 7-15 digits
workPhone Tel
phone format 7-15 digits
faxNumber Tel
phone format 7-15 digits

Organization & B2B 7

company Text
max: 100 chars
companySize Select
6 options 1-10 to 1001+
jobTitle Text
max: 100 chars
department Text
max: 100 chars
industry Select
7 options Tech to Other
website URL
URL format requires https://
budgetRange Select
5 options Under $10k to $500k+

Address & Geography 9

addressLine1 Text
max: 255 chars
addressLine2 Text
max: 255 chars optional
city Text
max: 100 chars
state Text
max: 50 chars
stateProvince Text
max: 50 chars
postalCode Text
max: 20 chars
zipCode Text
max: 10 chars
country Select
country list
region Text
max: 100 chars

Inquiry & Communication 8

subject Text
min: 3 chars max: 200 chars
inquiryType Select
6 options Sales to Other
message Textarea
min: 10 chars max: 5000 chars
description Textarea
max: 5000 chars
comments Textarea
max: 2000 chars
preferredContactMethod Radio
3 options Email/Phone/Either
urgency Select
4 levels Low to Critical
priority Select
3 levels Low to High

Context & Marketing 7

referralSource Select
6 options Search to Other
productInterest Multiselect
multiple choices
serviceInterest Multiselect
multiple choices
timeframe Select
5 options Immediate to 12+ months
projectType Text
max: 100 chars
topicCategory Select
dropdown options
budgetRange Select
5 options Under $10k to $500k+

Consent & Legal 8

termsAccepted Checkbox
often required boolean
privacyPolicyAccepted Checkbox
often required boolean
marketingConsent Checkbox
optional boolean
newsletterOptIn Checkbox
optional boolean
gdprConsent Checkbox
GDPR required boolean
communicationPreferences Multiselect
4 options Email/SMS/Phone/Mail
dataProcessingConsent Checkbox
optional boolean

Special & Support 11

requestedCallbackTime Datetime
datetime format
preferredLanguage Select
6 languages EN/ES/FR/DE/ZH/JA
existingCustomer Radio
2 options Yes/No
accountNumber Text
max: 50 chars
orderNumber Text
max: 50 chars
ticketNumber Text
max: 50 chars
attachments File
max: 10MB .pdf .doc .docx .jpg .png
additionalDocuments File
max: 10MB
resume File
max: 5MB .pdf .doc .docx
portfolio URL
URL format requires https://

Metadata (Auto-captured) 14

formSource Hidden
auto-populated
formVersion Hidden
auto-populated
userAgent Hidden
browser info
referrerUrl Hidden
previous page
landingPage Hidden
entry page
sessionId Hidden
unique session
utmSource Hidden
traffic source
utmMedium Hidden
marketing medium
utmCampaign Hidden
campaign name
utmContent Hidden
ad content
utmTerm Hidden
search term
captchaToken Hidden
bot protection
submissionTimestamp Hidden
auto timestamp
ipAddress Hidden
client IP

📌 Note: Hidden metadata fields (like utmSource, userAgent, and ipAddress) are automatically captured and do not need to be included in the fields attribute.

TOP ↑

Test Field: