We’re currently duplicating the same 10–15 customer contact fields across multiple apps. I know we can surface them via a calculated field, but I’d love to style it more like a true contact card—with clickable phone and email links. Does anyone know how we can achieve that?
You can use HTML and inline CSS in the calculation fields to create the contact card. Here is some code to get you started:
`
<div style="max-width: 24rem; width: 100%; background-color: #ffffff; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); padding: 2rem; margin: 1rem;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="flex-shrink: 0; margin-bottom: 1.5rem;">
<img alt="Profile Picture of Jane Doe" src="https://placehold.co/100x100/a0aec0/ffffff?text=JD" style="height: 6rem; width: 6rem; border-radius: 9999px; object-fit: cover; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
</div>
<div style="text-align: center;">
<h2 style="font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #2d3748;">Jane Doe</h2>
<p style="color: #718096; margin-top: 0.25rem;">Job Position</p>
<div style="margin-top: 1.5rem;">
<div style="display: flex; align-items: center; justify-content: center; color: #4a5568;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" style="width: 1.25rem; height: 1.25rem; margin-right: 0.75rem;"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
<a style="font-weight: 500; letter-spacing: 0.025em; color: inherit; text-decoration: none;" href="tel:+1234567890">+1 (234) 567-890</a>
</div>
<div style="display: flex; align-items: center; justify-content: center; color: #4a5568; margin-top: 0.75rem;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" style="width: 1.25rem; height: 1.25rem; margin-right: 0.75rem;"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
<a style="font-weight: 500; letter-spacing: 0.025em; color: inherit; text-decoration: none;" href="mailto:jane.doe@example.com">jane.doe@example.com</a>
</div>
</div>
</div>
</div>
</div>
`
Keep in mind that the Template literals backtick (``` ) are needed.
Here how it looks like in the calculation:
6 Likes
@luis-galetto this has me thinking of all the possibilities now… worried my dev team is not going to like me. Do you know how custom I can get with this - without it becoming glitchy or not so user friendly? Any advice for ensuring it works for both desktop, tablet, and mobile devices? Do you have any tools you use to mock up these designs to grab the code?
@cguild, @Luis Is really good with his HTML and CSS 
The key is inline styles: Html + css + js - #10 by Jason could be of interest.
I think that the example that Luis has shown leads so nicely into the new forms, imagine a form to create a contact with just the fields needed all laid out in nice sections and then maybe a link at the bottom of Luis’ example ‘Edit this contact’ which opens a prefilled form with the contact data ready to be edited. The contact record could have all fields hidden apart from the calc field and maybe a full name field at the top which would also probably be a calc field.
How custom can you get in a calc field: some of mine have buttons that only appear if certain conditions are met, you can iframe embed just about anything so I and others have embeded Fillout forms inside records to create sub records (before Tape had forms).
You could extract the html from an email and display it, you can build tables with html and JSON in a calculation field:
You can build lists of related records with links to those records, along with components that appear or change based on criteria:
Really you are limited by your imagination rather than the actual calculation field (and the fact we don’t have a plain text multi-line field)
3 Likes