Back to Documentation
Field Types

Custom Code Fields

Add custom HTML, CSS, and JavaScript to your forms with the HTML Editor or Smart Code Visual Builder. Create unique layouts and interactive elements.

9 min read
Updated December 2024
Custom Code Field<div className="custom-layout"><h3>Product Features</h3><ul><li>Feature 1</li><li>Feature 2</li></ul></div>HTMLCSSJS

Overview

Custom Code fields allow you to add HTML, CSS, and JavaScript directly to your forms. Perfect for creating unique layouts, adding rich content, embedding media, or building interactive elements that go beyond standard form fields.

HTML Editor Mode

Write raw HTML, CSS, and JavaScript code directly.

  • ✓ Full control over markup
  • ✓ Custom styling with CSS
  • ✓ Interactive JavaScript
  • ✓ Embed external content

Smart Code Visual Builder

Drag-and-drop interface for building custom layouts.

  • ✓ No coding required
  • ✓ Pre-built components
  • ✓ Live preview
  • ✓ Export clean code

HTML Editor Mode

For developers who want complete control, the HTML Editor allows you to write custom HTML, CSS, and JavaScript.

What You Can Build

📋

Custom Layouts

Create multi-column layouts, grids, and unique content structures.

<div class="grid grid-cols-2 gap-4"> <div>Column 1 content</div> <div>Column 2 content</div> </div>
🎨

Styled Content Boxes

Add notices, alerts, feature highlights, and promotional banners.

<div class="notice bg-blue-100 p-4 rounded"> <h4>Special Offer!</h4> <p>Get 20% off with code SAVE20</p> </div>
🖼️

Media Embeds

Embed YouTube videos, image galleries, or product demos.

<iframe width="560" height="315" src="https://youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen> </iframe>
⚡

Interactive Elements

Add tabs, accordions, tooltips, and dynamic content.

<button onclick="showDetails()"> Learn More </button> <div id="details" style="display:none;"> Hidden content here </div>

Security & Sanitization

Woo Form Builder uses WordPress's wp_kses() function to sanitize custom code, ensuring only safe HTML is rendered.

Security Note

Administrators and users with unfiltered_html capability can use any HTML. Other users are restricted to safe tags only. This prevents XSS attacks and malicious code injection.

Allowed HTML Tags

The following tags are allowed for users without unfiltered_html capability:

Structure

<div>
<span>
<p>
<br>
<hr>

Content

<h1-h6>
<ul> <ol> <li>
<table> <tr> <td>
<strong> <em>
<a>

Media

<img>
<video>
<audio>
<iframe>
<svg>

Common Use Cases

1. Product Feature List

Example Output:

Premium Features Included

  • ✓Lifetime updates and support
  • ✓Unlimited form submissions
  • ✓Advanced conditional logic
  • ✓Smart pricing calculations
Show Code
<div class="feature-box"> <h3>Premium Features Included</h3> <ul class="feature-list"> <li>✓ Lifetime updates and support</li> <li>✓ Unlimited form submissions</li> <li>✓ Advanced conditional logic</li> <li>✓ Smart pricing calculations</li> </ul> </div> <style> .feature-box { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 1.5rem; border-radius: 0.5rem; } .feature-list li { margin: 0.5rem 0; color: #1f2937; } </style>

2. Pricing Table

Example Output:

Basic
$29
  • ✓ 1 Website
  • ✓ Basic Support
  • ✓ 1 Year Updates
Pro
$79
  • ✓ 5 Websites
  • ✓ Priority Support
  • ✓ Lifetime Updates
Agency
$199
  • ✓ Unlimited Sites
  • ✓ VIP Support
  • ✓ White Label
Show Code
<div class="pricing-grid"> <div class="pricing-card"> <h3>Basic</h3> <div class="price">$29</div> <ul> <li>✓ 1 Website</li> <li>✓ Basic Support</li> <li>✓ 1 Year Updates</li> </ul> </div> <!-- More cards... --> </div>

3. Image Gallery

Example Output:

1
2
3
4
5
6
Show Code
<div class="image-gallery"> <img src="image1.jpg" alt="Product 1"> <img src="image2.jpg" alt="Product 2"> <img src="image3.jpg" alt="Product 3"> <img src="image4.jpg" alt="Product 4"> </div> <style> .image-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .image-gallery img { width: 100%; border-radius: 0.5rem; } </style>

JavaScript Functionality

Add interactive behavior with JavaScript. Common examples include calculators, dynamic content, and form enhancements.

Example: Price Calculator

<div class="calculator"> <label>Quantity: <input type="number" id="qty" value="1" min="1"> </label> <button onclick="calculate()">Calculate</button> <div id="result"></div> </div> <script> function calculate() { const qty = document.getElementById('qty').value; const price = qty * 25; document.getElementById('result').innerHTML = 'Total: $' + price.toFixed(2); } </script>

Smart Code Visual Builder

For users who prefer not to write code, the Smart Code Visual Builder provides a drag-and-drop interface.

🎨 Canvas Interface

Drag elements onto a visual canvas and see changes in real-time.

  • • Visual layout editor
  • • Property panels
  • • Live preview
  • • Undo/redo support

🧩 Pre-built Components

Choose from dozens of ready-made elements and customize them.

  • • Headings & text blocks
  • • Images & galleries
  • • Buttons & links
  • • Containers & layouts

Learn More About Smart Code

Check out our comprehensive Smart Code System Guide for detailed tutorials, video walkthroughs, and advanced techniques.

Best Practices

💡 Tips for Custom Code Fields

✓
Test Thoroughly: Always preview your custom code to ensure it renders correctly
✓
Responsive Design: Use CSS media queries for mobile-friendly layouts
✓
Avoid Inline Styles: Use CSS classes for better maintainability
✓
Unique IDs: Use unique IDs for JavaScript elements to avoid conflicts
✓
Keep It Simple: Complex JavaScript can slow down page load times

Build Without Code

Try the Smart Code Visual Builder for drag-and-drop custom layouts

Explore Smart Code Builder →

Related Articles

🎨

Smart Code System

📋

Field Types Overview

🖼️

Advanced Image Controls

← All DocumentationNeed Help? Contact Support →