入力画面 HTML テンプレート

Form Plant の入力画面 HTML テンプレート機能を使用すると、フォームのレイアウトを自由にカスタマイズできます。

概要

管理画面の「レイアウト編集」タブで入力画面HTMLテンプレートを設定することで、フォームの見た目を完全にコントロールできます。

テンプレート機能の有効化

入力画面HTMLテンプレートを使用するには、「HTMLテンプレートを利用する」チェックボックスをONにする必要があります。

状態	動作
チェックON	カスタムHTMLテンプレートが適用される
チェックOFF	デフォルトレイアウトが使用される（テンプレート編集エリアはグレーアウト）

チェックがOFFの場合、テンプレート編集エリアはグレーアウトされ編集できません。テンプレートの内容は保持されるため、再度ONにすれば以前のテンプレートがそのまま使用されます。

使用可能なショートタグ

基本タグ

タグ	説明
[fplant_field name="フィールド名"]	指定したフィールドの入力要素を表示
[fplant_field_error name="フィールド名"]	指定したフィールドのエラーメッセージを表示
[fplant_submit text="送信"]	送信ボタンを表示（text属性でボタンテキストを変更可能）
[fplant_errors]	フォーム全体のエラーメッセージ一覧を表示
[fplant_success]	送信成功メッセージを表示

フィールドタグの属性

[fplant_field]

[fplant_field name="フィールド名" class="追加クラス" placeholder="プレースホルダー"]

属性	必須	説明
name	○	フィールド設定で定義したフィールド名
class	-	追加するCSSクラス
placeholder	-	プレースホルダーテキスト（フィールド設定を上書き）

[fplant_field_error]

[fplant_field_error name="フィールド名" class="追加クラス"]

属性	必須	説明
name	○	エラーを表示するフィールド名
class	-	追加するCSSクラス

[fplant_submit]

[fplant_submit text="送信する" class="追加クラス"]

属性	必須	説明
text	-	ボタンのテキスト（デフォルト: 送信）
class	-	追加するCSSクラス

エラー表示の動作

エラーメッセージは以下の優先順位で表示されます：

1. [fplant_field_error name="xxx"] が存在する場合 → その位置に表示
2. .fplant-field-group 内に .fplant-field-error がある場合 → その位置に表示
3. どちらも存在しない場合 → 入力フィールドの直後に自動的に追加

[fplant_errors] について

• [fplant_errors] をテンプレートに含めると、すべてのエラーが一覧で表示されます
• テンプレートに含めない場合、フィールド個別のエラーのみが表示されます

使用例

基本的な例

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

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

    <div class="form-row">
        <label>メールアドレス <span class="required">*</span></label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

    <div class="form-row">
        <label>お問い合わせ内容</label>
        [fplant_field name="message"]
        [fplant_field_error name="message"]
    </div>

    [fplant_submit text="送信する"]
    [fplant_success]
</div>

2カラムレイアウトの例

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

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

    <div class="field-group">
        <label>メールアドレス</label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

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

    [fplant_success]
</div>

エラーをまとめて上部に表示する例

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

    <div class="form-fields">
        <p>
            <label>お名前</label><br>
            [fplant_field name="fullname"]
        </p>
        <p>
            <label>メールアドレス</label><br>
            [fplant_field name="email"]
        </p>
        <p>
            <label>メッセージ</label><br>
            [fplant_field name="message"]
        </p>
    </div>

    [fplant_submit]
    [fplant_success]
</div>

この例では、個別のフィールドに [fplant_field_error] を配置していないため、エラーは [fplant_errors] にまとめて表示され、さらに各入力フィールドの直後にも自動的に表示されます。

フィールド個別エラーのみ表示する例

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

    <div class="field">
        <label>メール</label>
        [fplant_field name="email"]
        [fplant_field_error name="email"]
    </div>

    [fplant_submit]
    [fplant_success]
</div>

[fplant_errors] を含めていないため、各フィールドの下にのみエラーが表示されます。

CSSクラス

入力画面HTMLテンプレートで使用される主なCSSクラス：

クラス	説明
.fplant-field-error	フィールド個別のエラーメッセージ
.fplant-errors	フォーム全体のエラー一覧
.fplant-success	成功メッセージ
.fplant-submit-button	送信ボタン
.fplant-field	各入力フィールド
.fplant-field-has-error	エラーがあるフィールドグループに付与

エラー時に入力欄を装飾する（重要）

「エラーのときだけ入力欄の枠を赤くする」といったスタイルを当てたい場合、押さえておくべき仕組みがあります。

Form Plant のバリデーションは AJAX で行われ、エラー状態を表す fplant-field-has-error クラスは JavaScript が付与します。付与先は入力欄 ( <input> ) ではなく、フィールドを囲む ラッパー .fplant-field-group ( data-field-name 属性つき ) です。

独自 HTML テンプレートではラッパーを自分で書く必要があります

デフォルトレイアウトは各フィールドを .fplant-field-group で自動的に囲みますが、独自 HTML テンプレートで [fplant_field name="..."] だけを置いた場合、このラッパーは付きません。

ラッパーが無いと、エラー時に次の挙動になります。

項目	ラッパーあり	ラッパーなし ( [fplant_field] のみ )
fplant-field-has-error クラスの付与	○ 付く	✗ 付かない
クライアント側のリアルタイム/送信時バリデーション	○ 走る	✗ 走らない ( サーバー側検証は走る )
エラーメッセージの表示	○	○ ( 入力欄の直後に自動表示 )

つまりエラー時に入力欄を装飾したい・即時バリデーションを効かせたい場合は、各フィールドを自分でラッパーで囲んでください。

正しい書き方

<div class="fplant-field-group" data-field-name="email">
    <label>メールアドレス</label>
    [fplant_field name="email"]
    <div class="fplant-field-error" style="display:none;"></div>
</div>

• class="fplant-field-group" と data-field-name="フィールド名" の 両方が必須です。data-field-name の値は [fplant_field name="..."] の name と完全に一致させてください。
• 内側の <div class="fplant-field-error" style="display:none;"></div> は、エラーメッセージを定位置に表示するための枠です ( 省略した場合は入力欄の直後に自動生成されます ) 。

CSS でエラー時のスタイルを当てる

ラッパーにエラークラスが付くので、子孫セレクタで入力欄を狙います ( 入力欄自体に error クラスを足す必要はありません ) 。

/* エラー時に入力欄の枠を赤くする */
.fplant-field-group.fplant-field-has-error .fplant-field {
    border-color: #d63638;
}

.fplant-field は Form Plant の入力欄に付く共通クラスです。プラグイン同梱の CSS にも同等のルールがあるため、見た目を変えたいだけならこのセレクタを上書きするのが簡単です。

入力欄そのものの HTML を変えたい場合

入力欄の HTML ( <input> のクラスや構造 ) 自体を差し替えたい場合は フィールドテンプレートのテーマ上書き を参照してください。なお、テンプレート ( PHP ) 側ではエラー有無を判定できないため、エラー時の装飾は本節と同じく CSS で .fplant-field-group.fplant-field-has-error を狙う方法で行います。

注意事項

• 入力画面HTMLテンプレートが空の場合、デフォルトレイアウトが使用されます
• フィールド名は「フィールド設定」タブで定義したものと一致させてください
• [fplant_success] を含めないと、送信成功時にメッセージが表示されません
• 確認画面を使用する場合は、別途「確認画面のHTMLテンプレート」で設定します

埋め込み方法によるエラー表示の動作

HTMLテンプレートを使用した場合のエラー表示は、以下のすべての埋め込み方法で統一された動作をします。

埋め込み方法	エラー表示位置
サイト内フォーム	入力フィールドの下
iframe埋め込み	入力フィールドの下
JavaScript埋め込み	入力フィールドの下

エラー要素の自動生成

[fplant_field_error] を配置していない場合、JavaScriptが自動的にエラー要素を生成します：

1. 明示的な配置がある場合: [fplant_field_error name="xxx"] の位置にエラーを表示
2. 自動生成: 入力フィールドの直後に .fplant-field-error-dynamic クラス付きの要素を動的に追加

自動生成されたエラー要素は、エラーがクリアされると自動的にDOMから削除されます。

推奨パターン

明示的にエラー表示位置を制御したい場合：

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

自動配置に任せる場合（シンプルな構成向け）：

<div class="form-field">
    <label>お名前</label>
    [fplant_field name="fullname"]
    <!-- エラーは自動的にここに追加される -->
</div>

テーマでのテンプレートオーバーライド

WP Form Plantのテンプレートは、テーマ内に同名のファイルを配置することでオーバーライドできます。

詳しい解説は専用ページへ

入力欄の出力 HTML そのものをテーマで上書きする方法は、フィールドテンプレートのテーマ上書き に対応フィールド型の全一覧・使える変数・注意点をまとめています。以下はその要約です。

オーバーライドの仕組み

プラグインは以下の順序でテンプレートを検索します：

1. 子テーマ: wp-content/themes/your-child-theme/form-plant/
2. 親テーマ: wp-content/themes/your-theme/form-plant/
3. プラグイン: wp-content/plugins/form-plant/templates/

オーバーライド可能なテンプレート

テーマの form-plant/ ディレクトリに以下のファイルを配置してカスタマイズできます：

入力画面テンプレート

ファイルパス	説明
form-fields/text.php	テキスト入力フィールド
form-fields/textarea.php	テキストエリア
form-fields/email.php	メールアドレス入力
form-fields/tel.php	電話番号入力
form-fields/url.php	URL 入力
form-fields/number.php	数値入力
form-fields/select.php	セレクトボックス
form-fields/checkbox.php	チェックボックス
form-fields/radio.php	ラジオボタン
form-fields/file.php	ファイルアップロード
form-fields/date.php	日付入力（カレンダー）
form-fields/date_select.php	日付入力（プルダウン）
form-fields/time.php	時刻入力
form-fields/name_parts.php	氏名フィールド
form-fields/name_kana.php	フリガナフィールド
form-fields/password.php	パスワードフィールド
form-fields/hidden.php	隠しフィールド
form-fields/html.php	HTML コンテンツ

確認画面テンプレート

ファイルパス	説明
confirmation.php	確認画面全体のラッパー
confirm-fields/text.php	テキストの確認表示
confirm-fields/textarea.php	テキストエリアの確認表示
confirm-fields/email.php	メールアドレスの確認表示
confirm-fields/tel.php	電話番号の確認表示
confirm-fields/url.php	URL の確認表示
confirm-fields/number.php	数値の確認表示
confirm-fields/select.php	セレクトボックスの確認表示
confirm-fields/checkbox.php	チェックボックスの確認表示
confirm-fields/radio.php	ラジオボタンの確認表示
confirm-fields/file.php	ファイルの確認表示
confirm-fields/date.php	日付の確認表示
confirm-fields/date_select.php	日付（プルダウン）の確認表示
confirm-fields/time.php	時刻の確認表示
confirm-fields/name_parts.php	氏名の確認表示
confirm-fields/name_kana.php	フリガナの確認表示
confirm-fields/password.php	パスワードの確認表示
confirm-fields/hidden.php	隠しフィールドの確認表示
confirm-fields/html.php	HTML コンテンツの確認表示
confirm-fields/all_fields.php	全フィールド一覧の確認表示

埋め込み用テンプレート

ファイルパス	説明
embed.php	iframe埋め込み用のフォーム全体

オーバーライドの例

テーマでテキスト入力フィールドをカスタマイズする場合：

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

カスタムテンプレートの例（text.php）

<?php
/**
 * Custom text input field template
 *
 * @var array  $field         フィールド設定
 * @var string $value         フィールドの値
 * @var int    $form_id       フォームID
 * @var array  $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>

テンプレートで使用可能な変数

各テンプレートでは以下の変数が使用可能です：

入力フィールドテンプレート

変数	型	説明
$field	array	フィールドの設定（name, label, type, required 等）
$value	string	フィールドの現在値
$form_id	int	フォーム ID
$form_settings	array	フォームの設定

確認画面フィールドテンプレート

変数	型	説明
$field	array	フィールドの設定
$value	mixed	送信された値
$filename	string	ファイルフィールドのファイル名

テンプレートオーバーライドの注意事項

1. プラグイン更新時も維持される: テーマにコピーしたテンプレートはプラグイン更新の影響を受けません
2. 互換性に注意: プラグインのメジャーアップデート時にテンプレート構造が変更される可能性があります
3. 必要なファイルのみ: 変更が必要なテンプレートのみをテーマにコピーしてください
4. 子テーマ推奨: 親テーマの更新時に変更が失われないよう、子テーマにテンプレートを配置することを推奨します

JavaScript埋め込みでの注意事項

CORS設定

JavaScript埋め込み（FPlantEmbed.render()）を使用する場合、フォームの埋め込み設定で「許可するURL」を設定する必要があります。

同一WordPressサイト内でJavaScript埋め込みを使用する場合は、自動的に許可されます。

reCAPTCHA

reCAPTCHAを有効にしている場合、JavaScript埋め込みでも正常に動作します。reCAPTCHAのサイトキーに埋め込み先のドメインが登録されていることを確認してください