HTML Field

The HTML field displays custom content within your form. It's not an input, users don't interact with it. Use it for instructions, headings, disclaimers, or any formatted content.

When to use

• Section headings within long forms
• Instructions or guidance
• Legal disclaimers
• Links to external resources
• Custom formatted content
• Images or icons

Settings

Content

The HTML to display. Supports:

• Paragraphs and line breaks
• Headings (h2, h3, etc.)
• Lists (ul, ol)
• Links
• Images
• Basic formatting (bold, italic)
• Custom CSS classes

Label (admin only)

Name for your reference in the builder. Not displayed to users.

Content examples

Section heading

<h3>Contact Information</h3>
<p>Please provide your contact details below.</p>

Instructions

<div class="form-instructions">
  <strong>Before you begin:</strong>
  <ul>
    <li>Have your order number ready</li>
    <li>Prepare a description of the issue</li>
    <li>Gather any relevant screenshots</li>
  </ul>
</div>

Disclaimer

<p class="disclaimer">
  By submitting this form, you agree to our
  <a href="/terms" target="_blank">Terms of Service</a> and
  <a href="/privacy" target="_blank">Privacy Policy</a>.
</p>

Alert/Notice

<div style="background: #fff3cd; border: 1px solid #ffc107; padding: 12px; border-radius: 4px; margin-bottom: 16px;">
  <strong>Note:</strong> Response times may be longer during holidays.
</div>

Image

<img src="/wp-content/uploads/form-guide.png" alt="How to fill this form" style="max-width: 100%;">

Allowed HTML

For security, these tags are allowed:

Text: p, span, strong, em, b, i, u, br, hr

Structure: div, h1-h6, blockquote

Lists: ul, ol, li

Links: a (with href, target, rel)

Media: img (with src, alt, width, height, style)

Tables: table, thead, tbody, tr, th, td

Scripts and iframes are not allowed for security.

Styling

HTML fields render inside a wrapper:

<div class="fodo-field fodo-field-html">
  <!-- your content here -->
</div>

Adding custom styles

Include inline styles or reference your theme's CSS:

<style>
  .my-form-header {
    color: #333;
    border-bottom: 2px solid #0066cc;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
</style>

<h2 class="my-form-header">Get in Touch</h2>

Or use inline styles:

<h2 style="color: #333; border-bottom: 2px solid #0066cc; padding-bottom: 8px;">
  Get in Touch
</h2>

Conditional display (Pro)

HTML fields support conditional logic. Show different content based on user selections:

Example: Show different instructions based on inquiry type:

Condition: inquiry_type is "support"
Action: Show support-instructions HTML field

Best practices

1. Use for section breaks in long forms
2. Keep text concise - users skim forms
3. Highlight important info - deadlines, requirements
4. Test on mobile - ensure content fits small screens
5. Maintain accessibility - use semantic HTML, alt text for images