Contact Cards

[Alejandro]

Here's a quick example to get you started:

Copy the json schema to the formbuilder field settings and click to update the form.

{
    "title": "Contacts",
    "type": "table",
    "items": {
        "type": "object",
        "title": "Person",
        "format": "grid",
        "properties": {
            "full_name": {
                "title": "Full Name",
                "type": "string"
            },
            "job_title": {
                "title": "Job Title",
                "type": "string"
            },
            "phone_number": {
                "title": "Phone Number",
                "type": "string"
            },
            "email_address": {
                "title": "E-mail Address",
                "type": "string"
            }
        }
    }
}

In the field's PHP Based Formatting, in the input with the Theme Filename placeholder, enter contacts.

Create a fields_phpformat\contacts.thtml in your custom theme and clear the file registry.

<?php
$data = json_decode($text, true);

if (empty($data))
{
   return;
}
?>

<ul class="fwd-list-none fwd-w-full fwd-grid sm:fwd-grid-auto-rows fwd-gap-4 sm:fwd-grid-cols-fill-lg fwd-bg-gray-50 fwd-py-6 fwd-px-4 fwd-rounded">
   
<?php foreach ($data AS $row):?>

<li class="fwd-col-span-1 fwd-bg-white fwd-rounded-lg fwd-shadow">
    <div class="fwd-w-full fwd-flex fwd-items-center fwd-justify-between fwd-px-6 fwd-pt-6 fwd-pb-2 fwd-space-x-6">
      <div class="fwd-flex-1 fwd-truncate">
        <div class="fwd-flex fwd-items-center fwd-space-x-3">
          <span class="fwd-text-gray-900 fwd-text-sm fwd-leading-5 fwd-font-medium fwd-truncate"><?php echo $row['full_name'];?></span>
        </div>
        <p class="fwd-mt-1 fwd-text-gray-500 fwd-text-sm fwd-leading-5 fwd-truncate"><?php echo $row['job_title'];?></p>
      </div>
    </div>
    <?php if (!empty($row['email_address']) || !empty($row['phone_number'])): ?>

    <div class="fwd-border-gray-200" style="border-top-width: 1px; border-top-style: solid;">
      <div class="fwd--mt-1 fwd-flex">
        <div class="fwd-w-0 fwd-flex-1 fwd-flex fwd-border-gray-200" style="border-right-width: 1px; border-right-style: solid;">
          
          <?php if ( !empty($row['email_address'])): ?>

            <a href="mailto:<?php echo $row['email_address']; ?>" class="fwd-relative fwd--mr-1 fwd-w-0 fwd-flex-1 fwd-inline-flex fwd-items-center fwd-justify-center fwd-py-4 fwd-text-sm fwd-leading-5 fwd-text-gray-700 fwd-font-medium fwd-rounded-bl-lg">
              <svg class="fwd-flex-none fwd-w-5 fwd-h-5 fwd-text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
              </svg>
              <span class="fwd-ml-3">E-mail</span>
            </a>

          <?php endif; ?>

        </div>
        <div class="fwd--ml-1 fwd-w-0 fwd-flex-1 fwd-flex">

          <?php if ( !empty($row['phone_number'])): ?>

            <a href="tel:<?php echo str_replace(['-','(',')',' '],'',$row['phone_number']); ?>" class="fwd-relative fwd-w-0 fwd-flex-1 fwd-inline-flex fwd-items-center fwd-justify-center fwd-py-4 fwd-text-sm fwd-leading-5 fwd-text-gray-700">
              <svg class="fwd-w-5 fwd-h-5 fwd-text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
              </svg>
              <span class="fwd-ml-3"><?php echo $row['phone_number']; ?></span>
            </a>
          
          <?php endif; ?>

        </div>
      </div>
    </div>

    <?php endif; ?>
  </li>   

<?php endforeach;?>
</ul>

The result looks like this: