Email and Phone Fields

What are email and phone fields?

Email and phone fields are specialized text fields designed for contact information. They look similar to plain text fields but carry additional meaning and, in some cases, validation.

Email fields

How they work

In Webflow, the email field validates that the entered value looks like a valid email address (contains an @ symbol and a domain). The validation is basic — it checks format, not whether the address actually exists.

In the designer, email fields can be bound to:

• mailto: links — clicking opens the user's email client with the address pre-filled.
• Text elements — display the email address as text.
• Form fields — pre-fill a contact form's email input.

Common uses

• Team member email — contact address on staff profile pages.
• Company contact email — general inquiry address on the contact page.
• Author email — displayed on blog posts (if your publication shows author contact info).
• Support email — department-specific address for support pages.

Phone fields

How they work

Unlike email fields, Webflow's phone field has no built-in validation. It accepts any text value. This is because phone number formats vary widely across countries:

• US: (555) 123-4567
• UK: +44 20 7946 0958
• International: +1-555-123-4567

The field relies on editors to enter numbers in the correct format.

In the designer, phone fields can be bound to:

• tel: links — clicking triggers a phone call on mobile devices and some desktop apps.
• Text elements — display the number as text.

Common uses

• Business phone — main office number on contact pages.
• Team member direct line — individual phone numbers on staff profiles.
• Location phone — per-location contact numbers for businesses with multiple offices.
• Emergency contact — hotline or after-hours numbers.

When to use these vs. plain text

You could store an email address or phone number in a plain text field. Here is why the dedicated fields are better:

Consideration	Dedicated Field	Plain Text
Validation	Email: format check. Phone: none	None
Semantic meaning	CMS knows this is contact info	CMS treats it as generic text
Link binding	Direct mailto:/tel: binding	Requires workaround or custom code
Editor clarity	Input label says "Email" or "Phone"	Input label says "Text"
Airtable sync	Maps correctly to Airtable email/phone fields	Mapped as generic text

The bottom line

Use dedicated fields whenever the value will be used as a link (mailto: or tel:) or when you want validation (email). Use plain text when the value is purely for display and you do not need linking or validation.

Formatting best practices

Email

• Always lowercase: hello@company.com not Hello@Company.com
• No display names: store jane@company.com, not Jane Smith <jane@company.com>
• One address per field — if you need multiple emails, use multiple fields or a plain text field with comma separation

Phone

• Pick one format and stick to it across all items:
• International recommended: +1 555 123 4567
• US format: (555) 123-4567
• Raw digits: 5551234567
• Include country code for international audiences: +1 for US, +44 for UK
• Document your chosen format in the field's help text so editors stay consistent

Sync considerations

When syncing between Airtable and Webflow:

• Airtable email fields map directly to Webflow email fields. Airtable validates email format on input, so values should arrive clean.
• Airtable phone fields map directly to Webflow phone fields. Airtable does not validate phone format, so formatting inconsistencies in Airtable will carry over.
• If contact info is stored in a generic Airtable single line text field, you can still map it to a Webflow email or phone field — but the value must pass Webflow's format check (for email) or it will fail to sync.

Tips

1. Use email fields for clickable contact links — the semantic binding to mailto: saves you from writing custom code or awkward workarounds.
2. Add help text for phone formatting — since there is no validation, help text like "Format: +1 555 123 4567" prevents a mess of inconsistent formats.
3. Make contact fields optional — not every team member wants their email or phone public. Let editors leave these blank.
4. Consider privacy — email addresses on public pages get scraped by spam bots. Consider using a contact form instead of displaying raw email addresses, or use an obfuscation technique.
5. Test tel: links on mobile — phone links trigger a call on mobile but may do nothing (or open Skype/FaceTime) on desktop. Make sure the experience is acceptable on both.
6. Pair with a switch field — add a "Show Contact Info" toggle so editors can control whether their email/phone appears publicly.