カスタムテンプレートのエクスポート

独自のフォームテンプレートを手動で作成してエクスポートしますか?カスタムテンプレートを使用すると、独自の「スターター」フォームを作成して使用できます。フォームで同じフィールドや設定を多く使用する傾向がある場合、またはWPFormsを実行している複数のサイトで同じフォームを使用したい場合は、これは大幅な時間節約になります。

このチュートリアルでは、新規または既存のフォームから独自のカスタムフォームテンプレートを作成する方法を説明します。

注意:このチュートリアルの手順には、サイトファイルの編集が含まれます。より簡単な方法をご希望の場合は、カスタムテンプレートの作成に関するガイドをご覧ください。


まず、WPFormsがサイトにインストールされ、有効化されていることを確認してください。その後、以下のチュートリアルに進むことができます。

テンプレートとして使用するフォームの作成

開始するには、後でテンプレート作成のためにコピーするフォームが必要です。既存のフォームを使用するか、新しいフォームを作成してください。

新しいフォームを作成する際は、空白のフォームから開始するか、既存のテンプレートのいずれかを使用してカスタマイズするかを選択できます。

セットアップページで、フォームビルダーの左側にあるパネルのフィールドをクリックするか、プレビューエリアにドラッグアンドドロップしてテンプレートフォームにフィールドを追加できます。

テンプレートとして使用する新しいフォームの名前を付ける

このタイトルは、カスタムテンプレートをテンプレートライブラリに追加すると表示されるため、わかりやすいが長すぎないものにしてください。

フィールドの追加とカスタマイズ

プレビューパネルのいずれかのフィールドをクリックすると、フィールドオプションを開いてカスタマイズできます。

フォームにチェックボックスフィールドを追加する

注意:テンプレートのフィールドの設定に関する詳細情報をお探しですか?適切なフォームフィールドの選択およびフィールドオプションのカスタマイズに関するチュートリアルで、利用可能なすべてのオプションについて詳しく知ることができます。

フォームテンプレートで使用するフィールドオプションのカスタマイズ

また、テンプレートフォームに条件付きロジックを追加したり、複数列レイアウトを作成したりすることも検討してください。すべての変更とカスタマイズは、テンプレートに引き継がれます。

テンプレートフォームの設定をカスタマイズして、このテンプレートを使用する将来のフォームのデフォルト設定を構成することもできます。設定のすべての変更は、このフォームをテンプレートとして使用するためにエクスポートする際に引き継がれます。

フォーム設定の設定

フォームの一般設定では、テンプレートのタイトルを編集し、説明を追加できます。

一般

これらはどちらも後でテンプレートライブラリに表示されるため、カスタマイズすることをお勧めします。説明には、意図された目的など、テンプレートを使用する人々にとって重要な詳細を含めるようにしてください。

カスタムテンプレートフォームの説明をカスタマイズする

ここでは、送信ボタンのテキストを編集したり、スパム防止保護をオンまたはオフに切り替えたり、必要に応じてカスタムCSSを追加したりすることもできます。

テンプレートフォームの通知設定では、テンプレートのデフォルト通知を1つ以上作成できます。

通知

注意:テンプレートの通知のカスタマイズに役立ちますか?詳細については、通知メールの設定に関するチュートリアルをご覧ください。

カスタムテンプレートのデフォルト通知をカスタマイズする

セットアップページで、フォームの名前フィールドにテンプレートの名前を入力します。

確認

テンプレートのデフォルトの確認メッセージは、確認設定で変更できます。

新しいカスタムテンプレートのデフォルト確認をカスタマイズする

注意: フォームの確認メッセージの作成について、さらに詳しく知りたいですか? WPFormsの確認設定に関するガイドをご覧ください。

テンプレートに満足したら、フォームビルダーの右上にある保存ボタンをクリックして変更を保存します。

フォームを保存

次に、Xアイコンをクリックしてフォームビルダーを終了します。

テンプレート作成のためのフォームコードのエクスポート

テンプレートフォームの設定が完了したので、テンプレートライブラリに追加するためにエクスポートできます。

まず、WPForms » ツールに移動し、エクスポートタブをクリックしてテンプレートのコードを取得する必要があります。

WPFormsのエクスポートツールにアクセスする

このページで、フォームテンプレートのエクスポートセクションまでスクロールダウンします。ここには、すべてのフォームのドロップダウンリストが表示されます。テンプレートとして使用するフォームを選択し、テンプレートのエクスポートボタンをクリックします。

カスタムフォームテンプレートのエクスポート

その後、テンプレートコードが生成され、画面に表示されます。

カスタムテンプレートのエクスポートコード

このコードをサイトファイルにコピー&ペーストすると、フォームビルダーのセットアップページにあるフォームテンプレートライブラリにこのテンプレートが表示されます。

サイトへのテンプレートコードの追加

エクスポートしたテンプレートのコードをサイトに追加するための3つの方法について説明します。これらのオプションのいずれについても、まずサイトファイルにアクセスできることを確認する必要があります。

以下のすべてのオプションは、テンプレートをビルドしたのと同じサイトに追加する場合でも、別のサイトに追加する場合でも機能します。

方法1:テンプレートコードをfunctions.phpにコピー&ペーストする

カスタムテンプレートをサイトに追加するための最も簡単で最速のソリューションが必要な場合は、この方法をお勧めします。

サイトのファイルで/wp-content/themes/YOUR-THEME/functions.phpに移動して、サイトのfunctions.phpファイルを開きます。

次に、テンプレートコードを直接functions.phpにコピー&ペーストできます。完了したらファイルを保存します。

注意: functions.phpのカスタムコードは、テーマを更新すると消える可能性があることに注意してください。これを回避するには、子テーマを作成するか、以下で説明するカスタムプラグインを使用します。

方法2:テンプレートコードを新しいPHPファイルに貼り付け、functions.phpに含める

この方法は、最初に説明した方法と非常によく似ていますが、テンプレートコードを独自のファイルに配置する点が異なります。これにより、誤って変更されるのを防ぎ、サイトのコードをより整理された状態に保つことができます。

このオプションを選択した場合は、まず/wp-content/themes/YOUR-THEME/functions.phpでサイトのfunctions.phpファイルを開く必要があります。次に、次のコードを貼り付けます。

// Add Custom Template File
include_once( get_stylesheet_directory() . '/wpforms-custom-templates.php' );

これにより、サイトはwpforms-custom-templates.phpという名前のファイルでコードを実行するようになります。次に、そのファイルを作成する必要があります。必ずfunctions.phpと同じディレクトリ(/wp-content/themes/YOUR-THEME/)に作成してください。

最後に、テンプレートコードをwpforms-custom-templates.phpファイルに貼り付けて保存する必要があります。

注意: wpforms-custom-templates.php ファイルを作成する際は、エクスポートツールによって生成されたテンプレートコードの上に、ファイルの先頭に必ず <?php を追加してください。これは、ファイルを有効にし、この方法を機能させるために必要です。

方法3:カスタムプラグインの作成

将来的に WordPress のテーマを変更する可能性がある場合や、同じテンプレートを複数のサイトで使用したい場合に最適なオプションです。

プラグインの作成は複雑に聞こえるかもしれませんが、この場合は実際には数ステップで済みます。

まず、テキストエディタまたはコードエディタで新しいファイルを作成し、以下を貼り付けます。

/**
 * Plugin Name: WPForms Custom Templates
 * Description: This plugin loads custom form templates.
 * Version:     1.0.0
 */
 
/**
 * Load the templates.
 */
function wpf_load_custom_templates() {
 
    // Template code here
 
}
add_action( 'wpforms_loaded', 'wpf_load_custom_templates' );

上記のコードをコピーする際は、エクスポートツールによって生成されたテンプレートコードの上に、ファイルの先頭に必ず <?php を追加してください。これは、ファイルを有効にし、この方法を機能させるために必要です。

// Template code here をエクスポートツールから生成されたコードに置き換え、ファイルを wpforms-custom-templates.php として保存します。

次に、サイトのファイルを開き、/wp-content/plugins/ に移動します。作成した wpforms-custom-templates.php ファイルをこのフォルダに移動して、サイトにプラグインをインストールする必要があります。

ファイルを移動した後、WordPress の管理画面にログインし、プラグインページを開きます。WPForms Custom Templates という名前のプラグインが表示されているはずです。有効化をクリックしてプラグインを有効化してください。

カスタムテンプレートコードをサイトに追加するカスタムプラグインを有効にする

新しいカスタムテンプレートの使用

上記で説明した 3 つの方法のいずれかを完了すると、テンプレートの準備が整います!

すべてが機能していることを確認するには、WPForms » 新規追加 に移動します。テンプレートライブラリの左側のメニューで、カスタムテンプレートをクリックします。

フォームテンプレートライブラリのカスタムテンプレートカテゴリにアクセスする

ここに、以前追加したフォームのタイトルと説明を含むカスタムテンプレートが表示されるはずです。

カスタムフォームテンプレートの使用

他のどのフォームテンプレートと同じように使用できます。

元のフォームテンプレートの削除(オプション)

最後に、必要であれば最初のステップで作成したフォームを削除できます。テンプレートは元のフォームに依存しないため、必要な関連エントリがある場合のみ保持する必要があります。

フォームを削除するには、WPForms » すべてのフォーム に移動し、フォームの行にカーソルを合わせて、削除をクリックします。

元のテンプレートフォームを削除する

よくある質問

これらは、カスタムフォームテンプレートに関してよく受ける質問の一部です。

コードを使用せずにカスタムテンプレートを作成できますか?

はい。サイトファイルを更新することに自信がない場合は、フォームビルダーの組み込みテンプレートジェネレーターを使用できます。詳細については、カスタムフォームテンプレートの作成に関するガイドを確認してください。

注意: あなたのテンプレートが私たちのテンプレートライブラリに含まれるべきだと思いますか?お気軽にご提案をお送りください。ぜひお聞かせください!

これで完了です!WPForms で独自のカスタムフォームテンプレートを作成して、時間を節約できるようになりました。

フォームをさらにパーソナライズしたいですか?WPForms の検証メッセージをカスタマイズする方法に関するガイドをご覧ください。

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。