You can use a formula field to generate dynamic HTML. To render the value of the formula field as HTML, you must go to the Advanced section of the formula field and turn on the Render this field as HTML code toggle. For a list of supported HTML tags, please have a look at this article.
You can set the height allocated for the rendered HTML by setting an HTML Container Height.
Use Case Example
In this example, we'll create a field for your form that displays rendered HTML code. The code will include predefined text, data from other fields from your records, and a clickable image with a hyperlink.
You can try this with your own HTML code. You can write it from scratch in any text editor or use an AI tool like ChatGPT, Claude, or Gemini to generate and polish it. Here's the code we'll use in this example:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
</head>
<body>
<p>Hello ",{Name},",<br><br></p>
<p>This is an example HTML code. You can use tags to polish the text to your liking. Below, you'll find an image with a link to the miniExtensions homepage:<br><br></p>
<p><a href='https://www.miniextensions.com' target='_blank'><center><img src='https://i0.wp.com/miniextensions.com/wp-content/uploads/sites/5/2022/07/smartmockups_l60ivb32.png?resize=1200%2C1177&ssl=1' width='245' alt='Placeholder Image' style='display:block; margin: 10px 0;'></center></a></p>
<p>Best regards,<br>Your Name</p>
</body>
</html>
Create a new Airtable formula field and paste your code inside a
CONCATENATE()function:Use single quotes (') around the HTML attributes inside the
CONCATENATE()function. This way, the function’s double quotes won’t conflict with the quotes in your HTML.You can add as many dynamic fields from your records as you like. Make sure to add them between double quotes so they are recognized as Airtable fields and not as part of the HTML code. For this example, we'll only add
{Name}as part of the first line of text.For the image to be a clickable link, the
<img>tag is placed between an<a>tag with the hyperlink to the miniExtensions homepage.
Here's what the function containing the code and a dynamic {Name} field looks like:
CONCATENATE("
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
</head>
<body>
<p>Hello ",{Name},",<br><br></p>
<p>This is an example HTML code. You can use tags to polish the text to your liking. Below, you'll find an image with a link to the miniExtensions homepage:<br><br></p>
<p><a href='https://www.miniextensions.com' target='_blank'><center><img src='https://i0.wp.com/miniextensions.com/wp-content/uploads/sites/5/2022/07/smartmockups_l60ivb32.png?resize=1200%2C1177&ssl=1' width='245' alt='Placeholder Image' style='display:block; margin: 10px 0;'></center></a></p>
<p>Best regards,<br>Your Name</p>
</body>
</html>
")Go to miniExtensions and add the new formula field to the forms where you want the HTML code displayed. If you have different forms for creating and expanding records, remember to add the field to both of them.
Drag the formula field to the position where you want it to appear in your form, and then click on it.
You can modify the field's shown title in the 'Standard Options' section if you want to. Then head to the 'Advanced' section to turn on 'Render this field as HTML code', as shown at the top of this page. Remember to do this for the field in both the creation and expansion forms if you have them.
If you use the form to edit records, the formula field will display the current data from other fields when opened. If you are creating records or want the field to reflect the new data while edited, you need to enable the 'Save & Continue' mode. Using that mode, the formula will change every time the form is computed to reflect the new data in the fields you are showing.
With this setup, you'll have a formula field capable of showing HTML code with dynamic content and a clickable image that redirects to a URL of your choice. Here's how the code is displayed within a form:
