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

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

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

YouTube video

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


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

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

はじめに、後でテンプレートを作成するためにコピーするフォームが必要です。既存のフォームを使用することも、新しいフォームを作成することもできます。

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

Setup ページで、Name Your Formフィールドにテンプレートの名前を入力します。

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

このタイトルは、カスタム・テンプレートをテンプレート・ライブラリに追加したときに表示されます。

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

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

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

プレビューパネル内のフィールドをクリックすると、そのフィールドのオプションが表示され、カスタマイズすることができます。

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

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

また、テンプレートフォームに条件ロジックを追加したり、マルチカラムレイアウトを作成することも検討するとよいでしょう。すべての変更とカスタマイズはテンプレートに引き継がれます。

フォームの設定

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

一般

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

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

この2つは後でテンプレートライブラリに表示されるので、カスタマイズしておくとよいでしょう。説明文には、テンプレートの使用目的など、テンプレートを使用する人にとって重要な詳細が含まれていることを確認してください。

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

お知らせ

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

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

注:テンプレートの通知のカスタマイズにお困りですか?詳しくは、通知メールの設定に関するチュートリアルをご覧ください。

確認事項

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

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

注意:フォームの確認の作成についてもっと知りたいですか?WPFormsの確認設定のガイドを参照してください。

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

フォームを保存する

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

フォームコードをエクスポートしてテンプレートを作成する

テンプレートフォームの設定が完了したら、エクスポートしてテンプレートライブラリに追加しましょう。

まず、WPForms"Toolsで Exportタブをクリックしてテンプレートのコードを取得する必要があります。

WPFormsエクスポートツールへのアクセス

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

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

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

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

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

テンプレートコードをサイトに追加する

ここでは、エクスポートしたテンプレートのコードをサイトに追加する3つの方法について説明します。どの方法も、まずサイトのファイルにアクセスできるようにしておく必要があります。

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

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

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

あなたのサイトの functions.php ファイルにアクセスする。 /wp-content/themes/YOUR-THEME/functions.php をあなたのサイトのファイルに追加してください。

次に、テンプレートコードをコピーして直接 functions.php.終わったらファイルを保存する。

:のカスタムコードは functions.php は、テーマを更新すると消えてしまう可能性があります。これを避けるには 子テーマの作成 または、以下に説明するカスタムプラグインを使用する。

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

この方法は、最初に説明した方法と非常によく似ていますが、テンプレートのコードを独自のファイルに入れる点が異なります。こうすることで、偶発的な変更から保護し、サイトのコードをより整理しておくことができます。

このオプションを選択した場合、まずサイトの functions.php ファイル /wp-content/themes/YOUR-THEME/functions.php.そして次のコードを貼り付ける:

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

これは、次のファイル名のコードを実行するようサイトに指示します。 wpforms-custom-templates.php.次に、そのファイルを作成する必要がある。必ず /wp-content/themes/YOUR-THEME/ と同じフォルダ)。 functions.php).

最後に、テンプレートのコードを 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' );

When copying the above code, you must add <?php at the top of the file above the template code generated by the export tool. This is required for the file to be valid and for this method to work.

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

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

ファイルを移動したら、WordPressの管理エリアにログインし、 プラグインページを開きます。WPForms Custom Templatesというプラグインがあるはずです。Activateをクリックしてプラグインを有効にしてください。

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

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

上記の3つの方法のいずれかが完了すれば、テンプレートの準備は完了です!

すべてが機能していることを確認するには、WPForms"Add Newに進みます。テンプレートライブラリの左側のメニューで、カスタムテンプレートをクリックします。

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

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

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

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

オリジナルフォームテンプレートの削除(オプション)

最後に、最初のステップで作成したフォームを削除してもかまいません。テンプレートは元のフォームには一切依存しないので、必要な関連項目がある場合のみ残しておく必要があります。

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

オリジナルのテンプレートフォームを削除する

よくある質問

カスタムフォームテンプレートに関するよくある質問です。

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

サイトファイルを更新する自信がない場合は、フォームビルダーの組み込みテンプレートジェネレーターをご利用ください。詳しくはカスタムフォームテンプレートの作成ガイドをご覧ください。

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

以上です!これでWPFormsで独自のカスタムフォームテンプレートを作成する時間を節約できます。

フォームをもっとパーソナライズしたいですか?WPFormsのバリデーションメッセージをカスタマイズする方法をご覧ください。

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

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。