Input Screen HTML Template

The Form Plant input screen HTML template feature lets you freely customize the form layout.

Overview

By configuring the input screen HTML template on the "Layout Editor" tab of the admin screen, you get complete control over how the form looks.

Enabling the template feature

To use the input screen HTML template, you need to turn ON the "Use HTML template" checkbox.

State	Behavior
Checked ON	The custom HTML template is applied
Checked OFF	The default layout is used ( the template editing area is grayed out )

When the checkbox is OFF, the template editing area is grayed out and cannot be edited. The template content is retained, so turning it ON again uses your previous template as is.

Available short tags

Basic tags

Tag	Description
[fplant_field name="field-name"]	Renders the input element for the specified field
[fplant_field_error name="field-name"]	Renders the error message for the specified field
[fplant_submit text="Submit"]	Renders the submit button ( the text attribute changes the button text )
[fplant_errors]	Renders a list of all form errors
[fplant_success]	Renders the submission success message

Field tag attributes

[fplant_field]

[fplant_field name="field-name" class="extra-class" placeholder="placeholder"]

Attribute	Required	Description
name	○	The field name defined in the field settings
class	-	Additional CSS class
placeholder	-	Placeholder text ( overrides the field setting )

[fplant_field_error]

[fplant_field_error name="field-name" class="extra-class"]

Attribute	Required	Description
name	○	The field name whose error to display
class	-	Additional CSS class

[fplant_submit]

[fplant_submit text="Submit" class="extra-class"]

Attribute	Required	Description
text	-	The button text ( default: Submit )
class	-	Additional CSS class

Error display behavior

Error messages are displayed according to the following priority:

1. If [fplant_field_error name="xxx"] exists → displayed at that position
2. If there is a .fplant-field-error inside .fplant-field-group → displayed at that position
3. If neither exists → automatically added immediately after the input field

About [fplant_errors]

• If you include [fplant_errors] in the template, all errors are shown in a list
• If you do not include it, only per-field errors are shown

Examples

Basic example

<div class="my-form">
    [fplant_errors]

    <div class="form-row">
        <label>Name <span class="required">*</span></label>
        [fplant_field name="fullname"]
        [fplant_field_error name="fullname"]
    </div>

    <div class="form-row">
        <label>Email <span class="required">*</span></label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

    <div class="form-row">
        <label>Message</label>
        [fplant_field name="message"]
        [fplant_field_error name="message"]
    </div>

    [fplant_submit text="Submit"]
    [fplant_success]
</div>

Two-column layout example

<div class="form-container">
    [fplant_errors]

    <div class="form-grid">
        <div class="form-column">
            <div class="field-group">
                <label>Last name</label>
                [fplant_field name="last_name"]
                [fplant_field_error name="last_name"]
            </div>
        </div>
        <div class="form-column">
            <div class="field-group">
                <label>First name</label>
                [fplant_field name="first_name"]
                [fplant_field_error name="first_name"]
            </div>
        </div>
    </div>

    <div class="field-group">
        <label>Email</label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

    <div class="submit-area">
        [fplant_submit text="Submit" class="btn-primary"]
    </div>

    [fplant_success]
</div>

Example: show all errors at the top

<div class="contact-form">
    <div class="error-summary">
        [fplant_errors]
    </div>

    <div class="form-fields">
        <p>
            <label>Name</label><br>
            [fplant_field name="fullname"]
        </p>
        <p>
            <label>Email</label><br>
            [fplant_field name="email"]
        </p>
        <p>
            <label>Message</label><br>
            [fplant_field name="message"]
        </p>
    </div>

    [fplant_submit]
    [fplant_success]
</div>

In this example, since no [fplant_field_error] is placed on the individual fields, errors are shown collectively in [fplant_errors] and also automatically right after each input field.

Example: show only per-field errors

<div class="simple-form">
    <div class="field">
        <label>Name</label>
        [fplant_field name="fullname"]
        [fplant_field_error name="fullname"]
    </div>

    <div class="field">
        <label>Email</label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

    [fplant_submit]
    [fplant_success]
</div>

Since [fplant_errors] is not included, errors are shown only below each field.

CSS classes

Main CSS classes used in the input screen HTML template:

Class	Description
.fplant-field-error	Per-field error message
.fplant-errors	List of all form errors
.fplant-success	Success message
.fplant-submit-button	Submit button
.fplant-field	Each input field
.fplant-field-has-error	Added to a field group that has an error

Styling input fields on error (important)

If you want to apply a style such as "make the input field's border red only when there is an error," there is a mechanism you need to understand.

Form Plant's validation is done via AJAX, and the fplant-field-has-error class that represents the error state is added by JavaScript. It is added not to the input field ( <input> ) but to the wrapper .fplant-field-group ( which has a data-field-name attribute ) surrounding the field.

With a custom HTML template you must write the wrapper yourself

The default layout automatically wraps each field in .fplant-field-group, but if you place only [fplant_field name="..."] in a custom HTML template, this wrapper is not added.

Without the wrapper, the behavior on error is as follows.

Item	With wrapper	Without wrapper ( [fplant_field] only )
Adding the fplant-field-has-error class	○ Added	✗ Not added
Client-side real-time / on-submit validation	○ Runs	✗ Does not run ( server-side validation still runs )
Error message display	○	○ ( shown automatically right after the input field )

In other words, if you want to style the input field on error or enable instant validation, wrap each field in the wrapper yourself.

The correct way to write it

<div class="fplant-field-group" data-field-name="email">
    <label>Email</label>
    [fplant_field name="email"]
    <div class="fplant-field-error" style="display:none;"></div>
</div>

• Both class="fplant-field-group" and data-field-name="field-name" are required. The value of data-field-name must exactly match the name in [fplant_field name="..."].
• The inner <div class="fplant-field-error" style="display:none;"></div> is the placeholder for showing the error message in a fixed position ( if omitted, it is generated automatically right after the input field ) .

Styling the error state with CSS

Because the error class is added to the wrapper, target the input field with a descendant selector ( there is no need to add an error class to the input field itself ) .

/* Make the input field's border red on error */
.fplant-field-group.fplant-field-has-error .fplant-field {
    border-color: #d63638;
}

.fplant-field is the common class added to Form Plant input fields. The plugin's bundled CSS also has an equivalent rule, so if you only want to change the appearance, overriding this selector is the easiest approach.

If you want to change the input field's HTML itself

If you want to replace the input field's HTML ( the <input> classes and structure ) itself, see Overriding Field Templates. Note that you cannot determine whether there is an error on the template ( PHP ) side, so styling on error is done with CSS targeting .fplant-field-group.fplant-field-has-error, the same as in this section.

Notes

• If the input screen HTML template is empty, the default layout is used
• Make sure field names match those defined on the "Field Settings" tab
• If you do not include [fplant_success], no message is shown on successful submission
• If you use a confirmation screen, configure it separately under "Confirmation screen HTML template"

Error display behavior by embedding method

When using an HTML template, error display behaves consistently across all of the following embedding methods.

Embedding method	Error display position
On-site form	Below the input field
iframe embed	Below the input field
JavaScript embed	Below the input field

Automatic generation of error elements

If you do not place [fplant_field_error], JavaScript automatically generates the error element:

1. When explicitly placed: the error is shown at the position of [fplant_field_error name="xxx"]
2. Auto-generated: an element with the .fplant-field-error-dynamic class is dynamically added right after the input field

Auto-generated error elements are automatically removed from the DOM when the error is cleared.

Recommended patterns

When you want to explicitly control the error display position:

<div class="form-field">
    <label>Name</label>
    [fplant_field name="fullname"]
    [fplant_field_error name="fullname"]
</div>

When you leave it to automatic placement ( for simple structures ) :

<div class="form-field">
    <label>Name</label>
    [fplant_field name="fullname"]
    <!-- The error is added here automatically -->
</div>

Overriding templates in your theme

Form Plant templates can be overridden by placing files with the same names inside your theme.

See the dedicated page for full details

For how to override the input field's output HTML itself in your theme, Overriding Field Templates covers the full list of supported field types, available variables, and notes. The following is a summary.

How overriding works

The plugin searches for templates in the following order:

1. Child theme: wp-content/themes/your-child-theme/form-plant/
2. Parent theme: wp-content/themes/your-theme/form-plant/
3. Plugin: wp-content/plugins/form-plant/templates/

Overridable templates

You can customize the following files by placing them in your theme's form-plant/ directory:

Input screen templates

File path	Description
form-fields/text.php	Text input field
form-fields/textarea.php	Textarea
form-fields/email.php	Email input
form-fields/tel.php	Phone number input
form-fields/url.php	URL input
form-fields/number.php	Number input
form-fields/select.php	Select box
form-fields/checkbox.php	Checkbox
form-fields/radio.php	Radio button
form-fields/file.php	File upload
form-fields/date.php	Date input ( calendar )
form-fields/date_select.php	Date input ( dropdown )
form-fields/time.php	Time input
form-fields/name_parts.php	Name field
form-fields/name_kana.php	Phonetic ( furigana ) field
form-fields/password.php	Password field
form-fields/hidden.php	Hidden field
form-fields/html.php	HTML content

Confirmation screen templates

File path	Description
confirmation.php	Wrapper for the entire confirmation screen
confirm-fields/text.php	Confirmation display for text
confirm-fields/textarea.php	Confirmation display for textarea
confirm-fields/email.php	Confirmation display for email
confirm-fields/tel.php	Confirmation display for phone number
confirm-fields/url.php	Confirmation display for URL
confirm-fields/number.php	Confirmation display for number
confirm-fields/select.php	Confirmation display for select box
confirm-fields/checkbox.php	Confirmation display for checkbox
confirm-fields/radio.php	Confirmation display for radio button
confirm-fields/file.php	Confirmation display for file
confirm-fields/date.php	Confirmation display for date
confirm-fields/date_select.php	Confirmation display for date ( dropdown )
confirm-fields/time.php	Confirmation display for time
confirm-fields/name_parts.php	Confirmation display for name
confirm-fields/name_kana.php	Confirmation display for phonetic reading
confirm-fields/password.php	Confirmation display for password
confirm-fields/hidden.php	Confirmation display for hidden field
confirm-fields/html.php	Confirmation display for HTML content
confirm-fields/all_fields.php	Confirmation display listing all fields

Embedding templates

File path	Description
embed.php	The entire form for iframe embedding

Override example

To customize the text input field in your theme:

wp-content/
└── themes/
    └── your-theme/
        └── form-plant/
            └── form-fields/
                └── text.php

Example custom template (text.php)

<?php
/**
 * Custom text input field template
 *
 * @var array  $field         Field settings
 * @var string $value         Field value
 * @var int    $form_id       Form ID
 * @var array  $form_settings Form settings
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$field_name = $field['name'] ?? '';
$field_id = 'fplant-field-' . esc_attr( $field_name );
$placeholder = $field['placeholder'] ?? '';
$required = ! empty( $field['required'] );
$css_class = 'fplant-field fplant-field-text my-custom-class';
?>
<div class="my-custom-input-wrapper">
    <input
        type="text"
        id="<?php echo esc_attr( $field_id ); ?>"
        name="<?php echo esc_attr( $field_name ); ?>"
        value="<?php echo esc_attr( $value ); ?>"
        placeholder="<?php echo esc_attr( $placeholder ); ?>"
        class="<?php echo esc_attr( $css_class ); ?>"
        <?php echo $required ? 'required' : ''; ?>
    >
</div>

Variables available in templates

The following variables are available in each template:

Input field templates

Variable	Type	Description
$field	array	Field settings ( name, label, type, required, etc. )
$value	string	The field's current value
$form_id	int	Form ID
$form_settings	array	Form settings

Confirmation screen field templates

Variable	Type	Description
$field	array	Field settings
$value	mixed	The submitted value
$filename	string	The file name for a file field

Notes on template overriding

1. Preserved across plugin updates: templates copied into your theme are not affected by plugin updates
2. Mind compatibility: the template structure may change in major plugin updates
3. Only the files you need: copy only the templates you need to change into your theme
4. Child theme recommended: place templates in a child theme so your changes are not lost when the parent theme is updated

Notes for JavaScript embedding

CORS settings

When using JavaScript embedding ( FPlantEmbed.render() ), you need to set the "Allowed URLs" in the form's embed settings.

When using JavaScript embedding within the same WordPress site, it is allowed automatically.

reCAPTCHA

If you have reCAPTCHA enabled, it works correctly with JavaScript embedding too. Make sure the embedding domain is registered with your reCAPTCHA site key.