How do I add an email or phone link in Webflow?

Pick Email or Phone in the link settings

A link in Webflow is a text link, a link block, or a button. To make an image clickable, place it inside a link block. Select the element on the canvas or in the Navigator. Open the Element settings panel. The shortcut is D.

Choose the link type first, then fill in its settings. Email connects a button or any link element to an email address, so a visitor can send a message with a click or a tap. Phone connects the same kinds of elements to a number, so a visitor can call with a click or a tap.

The link settings article lists Open in a new tab for a URL, a static page, a Collection page, and a file. It does not list that checkbox on Email or Phone. Leave the new tab decision for links that open another page.

Example: on the contact page, one button reads Email us. Set the type to Email and enter the address your team already answers. A second button reads Call the studio. Set the type to Phone and enter the studio number.

Test a static phone link on a real phone

When the number is the same everywhere, you do not need the CMS. Select the button, choose Phone, and enter that number. Publish, then open the live page on a phone and tap the button.

Webflow's phone field article says phone links only work on devices that place phone calls. A laptop may do nothing useful with the same control. If the tap fails on a phone, check the characters in the number before you restyle the button.

The email button is easier to test from a desktop. Publish, click it, and confirm the draft is addressed to the inbox you entered. If it opens a blank message, the Email type may be set while the address itself is missing or mistyped.

Use a phone field when each item has its own number

A team page or a locations list needs a different number on each item. In Collection settings, click New Field and choose Phone. You can add help text, and you can make the field required, the same way you can with other fields.

The phone field accepts any text you can type. If the value is not a valid phone number, a link to it may not work as intended. Enter the number the way a phone would dial it, then save the item.

On the Collection list or the Collection page, add a link element. In the link settings, choose Phone, select Get phone from, and choose that phone field. You can open those settings from the icon beside the element label, or from the Settings panel.

To print the number as text, add a text element, check Get text from, and choose the phone field. Uncheck Get phone from or Get text from if you need to remove the connection.

Example: each Locations item stores its own front desk number. The card button uses Get phone from that field. You update the item when a number changes. You do not edit the button once per city.

For an address that changes on each item, the link settings article points dynamic email links to an email Collection field. Add that field from Collection settings, alongside Phone, when the button should start an email instead of a call.

Hide the button when the number is empty

A call button with no number is a dead end. You can show or hide an element from the phone field when that element sits inside a Collection list or on a Collection page.

Select the button. Open Element settings, then Visibility. Click the plus icon. Choose the phone field. Set the rule to Is set. Set Visibility to Visible when the rule matches, and set Else to Hidden. Click away from the panel, or press Esc, to save.

An item with a number shows the button. An item with an empty phone field hides it. A color or a class on the button does not read the field. The visibility rule does.

You can also filter a Collection list with this field. The phone field article lists Equals, Does not equal, Is set, and Is not set. Use a filter when the card itself should drop out of the list. Use visibility when the card should stay and only the call button should disappear.

Publish, then send one email and place one call

The Designer will not send the email or place the call for you. Publish the site. Click the email button on the live page and confirm the message is addressed to the right inbox. On a phone, tap the call button and confirm the number.

If one city calls the wrong office, open that Collection item and correct the phone field. Save, publish the item, and tap again. If every city calls the same number, the button is still a static Phone link. Switch it to Get phone from the field, publish, and test one more item.