Skip to main content

Create email template with Airtable fields

Video Tutorial​

The contents of this tutorial are available as YouTube video as well. If you prefer, you can watch it here

Pre-requisites​

  • Airtable account with necessary permissions should be connected to FlexiPage. If you're unsure of permissions, you can just disconnect and re-connect airtable in Settings.
  • Sender accounts must be configured. Connect a Gmail/Outlook account in settings.

Create email template​

Click on create button and select the email template. Select the desired base and table.

Adding a header section with logo and title​

We'll use the column component to create the header section. Our header section will have a logo and a title.

  1. Type / in the editor and choose column. Remove the second column.
  2. Inside column, again type / and choose image. Upload the logo. Use toolbar alignment to center the logo.
  3. Add new lines after logo and enter title. Adjust header color.
info

Header color in columns will expand to full width of the email, creating a section effect. Add a header color and send a test email to see the result.

Editor View Editor View Editor View

Bringing in order details from Airtable​

We will use table component to display order details. You can also convert linked records into table rows, by choosing Dynamic Table component.

  1. Type / in the editor and choose table. Keep it to 2 columns, as more columns affect redability in mobile devices.
  2. Inside the table, type @ and choose fields from Airtable table.
  3. Format borders, padding, header colors and text colors to suit your needs.
tip

Column component is responsive. So in mobile devices, columns will stack vertically. But we don't need that for order details table. So we can use Table component instead.

Editor View Editor View

Add an order status tracking button​

We will use button component to add a button to track order status.

  1. Type / in the editor and choose button.
  2. Click on the button, adjust it's background color from right side panel. Text color and fonts can be changed from the toolbar.
  3. Change the button text to track order status. Associate a URL field from Airtable to provide dynamic tracking link. You can also use a static URL.
Editor View

To align images horizontally in footer, we'll use the column component.

  1. Type / in the editor and choose column.
  2. Add images in each column. To make the images centered, add extra columns at the start and end.
  3. Align each image in column to the center, using toolbar alignment.
  4. Upload images and set a static link
Editor View