How To: Split Field Values into Individual Cells

Split field text into fixed-width cells for forms and character boxes.

Use toCells when a form needs one character per box.

Problem

You need to display each character of a field in its own table cell.

Solution

Basic implementation:

<table>
  <tr>
    <td>{{!Opportunity.Product_Code__c toCells="5,codeCell"}}</td>
  </tr>
</table>

Input: ABC12 Output: |A|B|C|1|2|

With Custom Styling

<style>
.codeCell {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
  width: 40px;
  font-family: monospace;
  font-size: 16px;
}
</style>

<table style="border-collapse: separate; border-spacing: 5px;">
  <tr>
    <td colspan="5"><strong>Enter Code:</strong></td>
  </tr>
  <tr>
    <td>{{!Opportunity.Verification_Code__c toCells="5,codeCell"}}</td>
  </tr>
</table>

Practical Example: ZIP Code

<style>
.zipCell {
  border: 2px solid #333;
  padding: 10px;
  text-align: center;
  width: 35px;
  font-weight: bold;
  background-color: #f9f9f9;
}
</style>

<p>ZIP Code:</p>
<table style="border-collapse: collapse;">
  <tr>
    <td>{{!Account.BillingPostalCode toCells="5,zipCell"}}</td>
  </tr>
</table>

Tips

• Use this inside <td> tags.
• The first parameter is the number of cells.
• The second parameter is the CSS class name.
• Short values leave blank cells.
• Long values are truncated.
• This is useful for postal codes, serial numbers, and verification codes.