Overriding Field Templates

Form Plant lets you replace the output HTML of each field ( text, radio, checkbox, etc. ) simply by copying a template file into your theme directory. You get full control over the markup of your input fields without touching the plugin itself.

Two ways to customize the layout

Form Plant offers two ways to change the layout. Use whichever fits your goal.

Method	What it changes	Where to configure
HTML template	The structure and order of the whole form ( labels, wrapping <div>s, etc. ) , built with short tags such as [fplant_field name="..."]	"Layout Editor" in the admin screen
This page ( template override )	The HTML of each individual input field ( the <input> classes and structure )	Template files inside your theme directory

If you only want to change "how the input fields are arranged," use the HTML template. If you want to change "the output of the <input> itself," a template override is the right choice. You can also use both together.

How overriding works (template lookup order)

When Form Plant renders a field, it looks for a template file in the following order and uses the first one it finds. If a match is found in your theme ( child or parent theme ) , that one takes priority; otherwise it falls back to the default bundled with the plugin.

Priority	Lookup path
1. Child theme	wp-content/themes/your-child-theme/form-plant/form-fields/text.php
2. Parent theme	wp-content/themes/your-theme/form-plant/form-fields/text.php
3. Plugin ( default )	wp-content/plugins/form-plant/templates/form-fields/text.php

Do not include templates/ in the destination

On the plugin side the path is templates/form-fields/text.php, but when you copy it into your theme directory, drop the templates/ part and place it directly under the theme as form-plant/form-fields/text.php. The directory name form-plant/ is fixed.

Steps to override a template

Let's use the text input field ( text.php ) as an example.

1. Copy the original file from the plugin.
   • From: wp-content/plugins/form-plant/templates/form-fields/text.php
   • To: wp-content/themes/your-child-theme/form-plant/form-fields/text.php
2. Edit the copied file to change the output HTML however you like.
3. Once saved, that field type will be rendered with your theme's template from then on.

If you also want to change the confirmation screen, copy confirm-fields/text.php the same way ( the destination is form-plant/confirm-fields/text.php ) .

wp-content/
└── themes/
    └── your-child-theme/
        └── form-plant/
            ├── form-fields/
            │   └── text.php       ← overrides the input screen
            └── confirm-fields/
                └── text.php       ← overrides the confirmation screen

Use a child theme

If you edit the parent theme directly, your changes will be lost when the theme is updated. We recommend placing your templates in a child theme.

List of templates you can override

form-fields/ ( input screen ) and confirm-fields/ ( confirmation screen ) each contain a file with the same name for every field type, paired up. Copy only the files you need to change into your theme.

Input screen (form-fields/)

File	Field type
text.php	Text
textarea.php	Textarea
email.php	Email address
tel.php	Phone number
url.php	URL
number.php	Number
date.php	Date ( calendar )
date_select.php	Date ( dropdown )
time.php	Time
select.php	Select box
radio.php	Radio button
checkbox.php	Checkbox
name_parts.php	Name ( split first/last )
name_kana.php	Phonetic reading ( furigana )
password.php	Password
postal_code.php	Postal code
prefecture.php	Prefecture
address.php	Address
custom_mail_tag.php	Custom mail tag
file.php	File
hidden.php	Hidden field
html.php	HTML ( free text )

Locale-specific template for the address field

The address field ( address ) also ships with a Japanese-only address-ja.php, which takes priority in a Japanese environment. To override the address field on a Japanese site, copy form-plant/form-fields/address-ja.php.

Confirmation screen (confirm-fields/)

Placing files with the same names as the input screen ( text.php, radio.php, … ) in confirm-fields/ lets you override the confirmation screen display. In addition, the following templates render all fields together.

File	Purpose
all_fields.php	Lists all fields ( table format )
all_fields_div.php	Lists all fields ( div format )

Wrappers and embeds

File	Purpose
confirmation.php	Wrapper for the entire confirmation screen
form-wrapper.php	Wrapper for the entire form
embed.php	Entire form for iframe embedding

These go directly under form-plant/ in your theme ( no subdirectory ) . For example: form-plant/confirmation.php.

Variables available in templates

Templates are included directly within the rendering process. The following variables are available.

Input screen fields

Variable	Type	Description
$field	array	Field settings. $field['name'], $field['type'], $field['placeholder'], $field['options'] ( for choice-based fields ) , $field['custom_id'], $field['custom_class'], etc.
$value	string / array	The current input value or default value
$form_id	int	Form ID
$form_settings	array	Form settings

Confirmation screen fields

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

Example custom template (text.php)

<?php
/**
 * Text input field ( theme override version )
 *
 * @var array  $field   Field settings
 * @var string $value   Field value
 * @var int    $form_id Form ID
 */

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

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

Rules you must follow when overriding

The input field HTML is tied to validation and submission processing. Be sure to follow these points.

Contracts you must not break

• Keep the name attribute as $field['name']. This is the key for the submitted data; if it does not match server-side validation, the value won't be picked up. When emitting multiple <input>s for radio buttons or checkboxes, use the same $field['name'] for all of them.
• Output $value ( value="...", checked / selected for radios/selects, etc. ) . This is required to retain values when returning from the confirmation screen or re-entering data.
• Always escape output ( esc_attr() / esc_html() / esc_textarea() ) . This is XSS protection.
• Keep elements that represent "nothing selected," such as the leading empty <option value=""> in a select ( required for required-field validation ) .

Styling error states

If you want to "style an input field only when there is an error," note that you cannot determine whether there is an error inside the template ( PHP ). Validation is done via AJAX, and at the point the template is rendered the error does not yet exist ( only $field / $value and the like are passed to the template; no error information is included ) .

Error states are expressed by JavaScript adding the fplant-field-has-error class to the wrapper .fplant-field-group. In the default layout this wrapper is added automatically, so you can leave your overridden text.php ( etc. ) as is and style the error state with just the following CSS.

.fplant-field-group.fplant-field-has-error .fplant-field {
    border-color: #d63638;
}

When combining with a custom HTML template

If you are using a custom HTML template ( Layout Editor ) , you need to write the .fplant-field-group wrapper yourself. See HTML template → Styling input fields on error for details.

Limitations and notes

• Only supported field types can be overridden. Files for field types that Form Plant does not recognize ( i.e., not on the whitelist ) won't be rendered even if you place them. To add your own field type, register it with the fplant_allowed_field_types / fplant_field_types filters.
• File paths are security-validated ( paths containing .. or disallowed characters, and references outside the theme, are rejected ) .
• If you want to swap the template path programmatically, you can also use the fplant_locate_template filter. See the PHP Hooks Reference for details.

add_filter( 'fplant_locate_template', function ( $template, $template_name, $template_path ) {
    // $template_name example: 'form-fields/text.php'
    if ( 'form-fields/text.php' === $template_name ) {
        $custom = get_stylesheet_directory() . '/my-forms/text.php';
        if ( file_exists( $custom ) ) {
            return $custom;
        }
    }
    return $template;
}, 10, 3 );

• It is not affected by plugin updates. Templates copied into your theme keep being used as is. However, a major plugin update may change the structure of the default templates, so after updating we recommend checking that the display and validation still work as intended.