Email field

Use the email field to specify an email address for a Collection item.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The email field is a Collection field that lets you specify an email address for a Collection item. The email addresses specified in this field can be displayed in Collection List or a Collection Page as text. And just like a link field, an email field can be used as a link so visitors can send an email with a click or a tap. You can also use the email field to filter a collection list or set conditional visibility on elements in collection lists and pages.

Common uses
  • Email address of a team member, customer service, departments, etc.
  • Link to these email addresses on the website
In this lesson
  • Creating an email field
  • Adding content to an email field
  • Connecting email fields to text
  • Connecting email fields to email links
  • Filtering a Collection list using the email field
  • Setting conditional visibility using the email field

Creating an email field

An Email field can be added to a new or existing Collection. In Collection settings, click New Field and then choose the Email field.

Adding content to an email field

You can type in any valid email address in this field.

Pro Tip
You can also add inline email links with the rich text field.

Connecting email fields to text

You can connect an email to any text element in a Collection list or a Collection page:

  1. Add a text element in your collection list or page
  2. Check the Get text from checkbox in the Inner Text Settings that appears
  3. Select the email field from the field dropdown

You can also access the inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).

Connecting email fields to email links

You can also connect an email to any link element, including a button. This link will trigger an Email using the Email address for the corresponding collection item. To create a dynamic email link:

  1. Add a link element in your collection list or page
  2. Choose Email in the Link Settings that appears
  3. Select Get email from
  4. Select the email field from the field dropdown
 

You can also access the Link Settings by selecting the link element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).

You can remove any of these connections by unchecking the option checkbox.

Need to know
When a link is connected to the dynamic email field, any email address in the email field in the link settings will be overwritten by the dynamic email address specified for collection items.

Filtering a Collection list using the email field

You can filter a Collection list using the email field by specifying either of the following rules: Equals, Does not equal, Is set, Is not set.

  1. Select the Collection list you want to filter
  2. Go to the Settings panel (D)
  3. Add a Filter under Collection List Settings
  4. Select your email field in the first dropdown
  5. Choose a rule in the second field
  6. Set a value if the option is available
  7. Click Save

The filter rules that you can use with the email field and values are:

  • Equals - looks for Collection items with an email address equal to the value you specify for this rule
  • Does Not Equal - looks for Collection items with an email address that isn’t equal to the value you specify for this rule
  • Is Set - looks for Collection items that have an email address set for this email field
  • Is Not Set - looks for Collection items that don’t have an email address set for this email field

Learn more about filters

Setting conditional visibility using the email field

You can set a conditional visibility rule on an email button in your Collection list or page. This can ensure that this button will be visible only when an email address is set in the email field for that Collection item.

  1. Select the email button that is connected to the email field
  2. Go to the Settings panel (D)
  3. Add a Condition (when this element is visible) under Conditional visibility
  4. Select your email field in the first dropdown
  5. Choose Is set in the second dropdown
  6. Click Save
 

Learn more about conditional visibility.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top