Core Forms
Get Core Forms

Code Editor

The code editor provides direct access to the form's HTML markup. It enables bidirectional sync with the visual builder so changes made in either mode are reflected in the other.

Switching to Code Mode

Click the Visual / Code toggle in the toolbar to switch between modes. The toggle shows the currently active mode. When you switch to Code mode, the canvas and inspector are replaced by a full-width code editor with syntax highlighting.

Switching modes does not discard changes. The current state is preserved and converted between representations.

Editor Interface

The code editor uses a monospace font with HTML syntax highlighting. Line numbers are displayed in the left gutter. The editor supports standard text editing features:

  • Syntax highlighting for HTML tags, attributes, and values
  • Line numbers
  • Auto-indentation
  • Bracket matching
  • Word wrap (enabled by default, toggleable)
  • Find and replace (Ctrl/Cmd + F)

A hint bar sits below the editor showing the current sync status and any parsing messages.

HTML Format

Core Forms uses a simple HTML format. Each field is wrapped in a <p> tag containing a <label> and the input element:

<p>
    <label>Your Name</label>
    <input type="text" name="your-name" required />
</p>

<p>
    <label>Email Address</label>
    <input type="email" name="email-address" required />
</p>

<p>
    <label>Message</label>
    <textarea name="message" rows="5"></textarea>
</p>

<p>
    <input type="submit" value="Send" />
</p>

No Form Tags

Do not include <form>, </form>, or any form-level attributes in the code editor. Core Forms automatically wraps the markup in a <form> element with the correct action, method, nonce, and honeypot fields when rendering on the frontend. Writing <form> tags in the editor will result in nested form elements and broken behavior.

Supported HTML Elements

The code editor accepts any valid HTML that Core Forms can process:

Element Usage
<input> Text, email, number, phone, url, date, time, hidden, password, file, radio, checkbox, submit
<textarea> Multi-line text input
<select> + <option> Dropdown menus
<fieldset> + <legend> Grouped fields with a heading
<div> Generic container for layout
<label> Field labels
<p> Field wrapper
<h2> - <h5> Section headings
<hr> Visual divider
<small> Help text below fields

Attributes

Standard HTML attributes are supported and mapped to the visual builder's inspector settings:

<!-- Required field -->
<input type="text" name="company" required />

<!-- Validation attributes -->
<input type="text" name="username" minlength="3" maxlength="20" pattern="[a-zA-Z0-9]+" />

<!-- Number range -->
<input type="number" name="age" min="18" max="120" />

<!-- Placeholder and default value -->
<input type="text" name="city" placeholder="Enter your city" value="New York" />

<!-- CSS class and help text -->
<p>
    <label>Phone</label>
    <input type="tel" name="phone" class="wide-field" />
    <small>Include country code</small>
</p>

<!-- Conditional visibility -->
<p data-show-if="contact-method" data-show-if-value="phone">
    <label>Phone Number</label>
    <input type="tel" name="phone-number" />
</p>

Bidirectional Sync

The visual builder and code editor maintain a shared state. Changes flow in both directions:

Code to Visual (debounced)

When you edit HTML in the code editor, the parser waits 800 milliseconds after you stop typing before attempting to sync. This debounce period prevents the parser from running on every keystroke, which would cause performance issues and disruptive UI updates while you are mid-edit.

After the debounce period:

  1. The HTML is parsed into a DOM tree.
  2. Each recognized element is converted to a field schema object.
  3. The schema replaces the current visual builder state.
  4. The hint bar shows "Synced" with a green indicator.

If parsing fails, the visual builder state is not updated. See Error Handling below.

Visual to Code (instant)

When you make changes in the visual builder (add a field, change a property, reorder fields), the HTML in the code editor is regenerated immediately from the updated schema. There is no debounce in this direction because schema-to-HTML generation is deterministic and fast.

Sync Status Indicator

The hint bar below the editor shows one of three states:

Indicator Meaning
Green "Synced" Code and visual state are in sync
Yellow "Editing..." You are typing; sync will occur after 800ms of inactivity
Red "Parse error" The HTML could not be parsed; visual state not updated

Error Handling

If the code editor contains HTML that cannot be parsed into the form schema, a red error bar appears below the editor. The error bar displays a brief description of the problem and, when possible, the line number where parsing failed.

Common parse errors include:

  • Malformed HTML -- Unclosed tags, mismatched nesting.
  • Unsupported elements -- Elements that do not map to any Core Forms field type.
  • Missing name attribute -- Input elements without a name attribute cannot be mapped to form fields.
  • Duplicate names -- Two fields with the same name value.

While a parse error is active:

  • The visual builder retains its last valid state.
  • You can continue editing in the code editor to fix the issue.
  • Switching to Visual mode is allowed -- it will show the last successfully parsed state.
  • The Save button remains enabled. Saving while an error is present saves the raw HTML as-is to post_content but does not update the JSON schema in post meta.

Formatting

The code editor auto-formats the HTML when syncing from the visual builder. Each field block is separated by a blank line for readability. Indentation uses 4 spaces. Attributes are kept on a single line unless the element would exceed a reasonable width.

You can write HTML in any formatting style you prefer. The parser is whitespace-agnostic and handles minified, compact, or expanded markup equally.

Tips

  • Use the code editor for bulk operations like duplicating many similar fields -- copy-paste is faster than clicking.
  • The code editor is useful for adding data-show-if conditional attributes that require specific value syntax.
  • If you are comfortable with HTML, the code editor can be faster for building simple forms from scratch.
  • Switching between Visual and Code modes is non-destructive. Your work is preserved across switches.
  • If you paste HTML from an external source, remove any <form> wrapper tags before saving.

Limitations

  • The code editor does not support JavaScript. Any <script> tags are stripped during parsing.
  • Inline styles are preserved in the HTML but not represented in the visual builder's inspector.
  • Comments (<!-- -->) are preserved in the HTML but not visible in the visual builder.
  • The code editor does not validate HTML against the W3C specification. It only checks whether the markup can be parsed into the Core Forms schema.