入力画面 HTML テンプレート

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

概要

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

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

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

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

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

使用可能なショートタグ

基本タグ

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

フィールドタグの属性

`[fplant_field]`

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

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

`[fplant_field_error]`

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

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

`[fplant_submit]`

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

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

エラー表示の動作

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

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

`[fplant_errors]` について

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

使用例

基本的な例

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

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

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

    <div class="form-row">
        <label>お問い合わせ内容</label>
        [fplant_fieldname="message"]
        [fplant_field_errorname="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_fieldname="last_name"]
                [fplant_field_errorname="last_name"]
            </div>
        </div>
        <div class="form-column">
            <div class="field-group">
                <label>名</label>
                [fplant_fieldname="first_name"]
                [fplant_field_errorname="first_name"]
            </div>
        </div>
    </div>

    <div class="field-group">
        <label>メールアドレス</label>
        [fplant_fieldname="email"]
        [fplant_field_errorname="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_fieldname="fullname"]
        </p>
        <p>
            <label>メールアドレス</label><br>
            [fplant_fieldname="email"]
        </p>
        <p>
            <label>メッセージ</label><br>
            [fplant_fieldname="message"]
        </p>
    </div>

    [fplant_submit]
    [fplant_success]
</div>

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

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

<div class="simple-form">
    <div class="field">
        <label>お名前</label>
        [fplant_fieldname="fullname"]
        [fplant_field_errorname="fullname"]
    </div>

    <div class="field">
        <label>メール</label>
        [fplant_fieldname="email"]
        [fplant_field_errorname="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`	エラーがあるフィールドグループに付与

注意事項

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

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

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

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

エラー要素の自動生成

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

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

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

推奨パターン

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

<div class="form-field">
    <label>お名前</label>
    [fplant_fieldname="fullname"]
    [fplant_field_errorname="fullname"]
</div>

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

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

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

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

オーバーライドの仕組み

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

子テーマ: wp-content/themes/your-child-theme/form-plant/
親テーマ: wp-content/themes/your-theme/form-plant/
プラグイン: 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	ファイルフィールドのファイル名

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

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

JavaScript埋め込みでの注意事項

CORS設定

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

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

reCAPTCHA

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

概要​

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

使用可能なショートタグ​

基本タグ​

フィールドタグの属性​

[fplant_field]​

[fplant_field_error]​

[fplant_submit]​

エラー表示の動作​

[fplant_errors] について​

使用例​

基本的な例​

2カラムレイアウトの例​

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

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

CSSクラス​

注意事項​

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

エラー要素の自動生成​

推奨パターン​

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

オーバーライドの仕組み​

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

入力画面テンプレート​

確認画面テンプレート​

埋め込み用テンプレート​

オーバーライドの例​

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

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

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

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

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

JavaScript埋め込みでの注意事項​

CORS設定​

reCAPTCHA​

概要