Submitted Fields Block

The Submitted Fields block displays all submitted form fields in a formatted table. This is useful for creating comprehensive form submission summaries, order details, or displaying all entry data in one place.

Adding a Submitted Fields Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Form Submitted Fields” or find it in the “Form Submissions” category
3. Click to insert the block

Table Structure

The block automatically creates a table with:

• Header Row: Optional table header (if configured)
• Data Rows: One row per form field
• Columns: Field label and field value

Color Customization

Heading Colors (if header row is used)

• Heading Text Color: Color of header text
• Custom Heading Text Color: Custom color value
• Heading Background Color: Background color of header row
• Custom Heading Background Color: Custom background color

Label Colors

• Label Text Color: Color of field label text
• Custom Label Text Color: Custom label text color
• Label Background Color: Background color of label cells
• Custom Label Background Color: Custom label background color

Data Colors

• Data Text Color: Color of field value text
• Custom Data Text Color: Custom data text color
• Data Background Color: Background color of data cells
• Custom Data Background Color: Custom data background color

Row Colors (Alternating)

• Odd Row Color: Background color for odd-numbered rows
• Custom Odd Row Color: Custom odd row color
• Even Row Color: Background color for even-numbered rows
• Custom Even Row Color: Custom even row color

Use Case: Alternating row colors improve readability in long tables.

Styling Options

Typography

• Font Size: Control the size of table text
• Font Family: Choose a font family
• Font Weight: Make text bold or regular
• Font Style: Apply italic styling
• Text Transform: Uppercase, lowercase, or capitalize
• Text Decoration: Add underline or other decorations
• Letter Spacing: Adjust spacing between letters
• Line Height: Control vertical spacing

Spacing

• Padding: Add internal spacing around the table

Borders

• Border Color: Choose a border color
• Border Radius: Round the table corners
• Border Style: Solid, dashed, dotted, etc.
• Border Width: Set border thickness

Best Practices

1. Color Contrast: Ensure sufficient contrast between text and background colors
2. Alternating Rows: Use alternating row colors for better readability
3. Consistent Styling: Match table styling with your email template design
4. Mobile-Friendly: Test how tables appear on mobile devices (may stack or scroll)
5. Readable Fonts: Use clear, readable fonts for table data
6. Appropriate Spacing: Add adequate padding for comfortable reading

Examples

Example 1: Simple Table

Goal: Display all fields in a clean, simple table

• Label Background: Light gray (#f5f5f5)
• Data Background: White
• Border: 1px solid #e0e0e0
• Alternating Rows: Enabled (light gray for even rows)

Example 2: Branded Table

Goal: Match table styling with brand colors

• Heading Background: Brand primary color
• Heading Text: White
• Label Background: Light brand color tint
• Data Background: White
• Border: 2px solid brand color

Troubleshooting

Fields Not Displaying

• Verify that form data is available in the email context
• Check that the integration is properly configured
• Ensure the template is being used with actual form submissions

Table Not Styling Correctly

• Some email clients have limited table styling support
• Test in multiple email clients
• Use inline styles when possible
• Avoid complex CSS that may not render

Mobile Display Issues

• Tables may stack or scroll on mobile devices
• Test on actual mobile devices
• Consider using simpler layouts for mobile
• Some email clients may render tables differently

Color Not Applying

• Verify color values are correct
• Check that custom colors are properly set
• Test in multiple email clients
• Some clients may not support all color options