Link Fields
How to use link fields for external URLs, internal paths, email links, and phone links — and when to use them instead of plain text.
What is a link field?
A link field stores a URL — an external web address, an internal page path, an email address (mailto:), or a phone number (tel:). In the Webflow designer, link fields can be bound directly to button hrefs, text link targets, and image link wrappers.
Link field vs. plain text with a URL
You might wonder why you need a dedicated link field when a plain text field can also hold a URL. The difference matters:
| Consideration | Link Field | Plain Text Field |
|---|---|---|
| Bindable to links | Yes — directly bind to button/link href | No — requires custom code or workarounds |
| Validation | Basic URL format checking | None |
| Editor UX | Shows as a URL input with clear intent | Generic text input — editors may format incorrectly |
| Semantic meaning | "This is a URL" | "This is text that happens to look like a URL" |
Rule of thumb: if the value will be used as a clickable link on the site, use a link field. If it is just metadata or display text, plain text is fine.
Common uses
External URLs
- Website URL — company website, portfolio link, or partner site.
- Social media links — Twitter/X profile, LinkedIn, Instagram, YouTube channel.
- Registration link — Eventbrite, Meetup, or custom signup form.
- Documentation link — link to external docs, specs, or resources.
Internal paths
- CTA button URL — where a call-to-action button should point (/contact, /pricing, /signup).
- Related page — link to another page on the same site that is not a CMS item.
- Custom redirect — override the default collection page URL.
Email and phone
- Email link — stored as "mailto:hello@company.com", opens the user's email client.
- Phone link — stored as "tel:+15551234567", triggers a phone call on mobile.
For dedicated email and phone fields with validation, see Email and Phone Fields.
Setting up link fields
Help text matters
Link fields benefit from clear help text:
- "Full URL including https://" — prevents editors from entering "www.example.com" without the protocol.
- "Internal path starting with /" — clarifies that internal links should be "/about" not "about".
- "Include mailto: prefix" — for email links.
Protocol consistency
Decide on a convention and document it:
- External: always include
https:// - Internal: always start with
/ - Email: always prefix with
mailto: - Phone: always prefix with
tel:and use international format
Open in new tab
Webflow link elements have an "Open in new tab" setting in the designer. For CMS-driven links, you cannot control this per-item unless you add a switch field (e.g., "Open in New Tab") and use conditional visibility or custom attributes.
Tips
- Always include the protocol — "https://example.com" works. "example.com" may not, depending on how the link element is configured.
- Validate before syncing — broken links hurt SEO and user trust. Check that URLs resolve before importing.
- Use separate fields for separate links — do not put "Website, Twitter, LinkedIn" in one field. Use three separate link fields. This lets you bind each to its own icon or button in the design.
- Consider optional fields — not every team member has a Twitter profile. Make social link fields optional so editors are not forced to enter placeholder values.
- Test on mobile — tel: and mailto: links behave differently on mobile vs. desktop. Test both.