独自のフォームテンプレートを手作業で作成し、エクスポートしたいですか?カスタムテンプレートを使用すると、独自の「スターター」フォームを作成して使用することができます。フォームに同じフィールドや設定を多用する場合や、WPForms を運用している複数のサイトで同じフォームを使いたい場合、これは非常に時間の節約になります。
このチュートリアルでは、新規または既存のフォームから独自のカスタムフォームテンプレートを作成する方法を紹介します。
この記事で
注:このチュートリアルの手順は、サイトファイルの編集を伴います。もっと簡単な方法をお望みの場合は、カスタムテンプレートの作成に関するガイドをご覧ください。
まず、WPFormsがあなたのサイトにインストールされ、有効になっていることを確認してください。その後、以下のチュートリアルに飛び込むことができます。
テンプレートとして使用するフォームの作成
はじめに、後でテンプレートを作成するためにコピーするフォームが必要です。既存のフォームを使用することも、新しいフォームを作成することもできます。
新しいフォームを作成する場合、空白のフォームから始めるか、既存のテンプレートを使用してカスタマイズするかを選択できます。
Setup ページで、Name Your Formフィールドにテンプレートの名前を入力します。
このタイトルは、カスタム・テンプレートをテンプレート・ライブラリに追加したときに表示されます。
フィールドの追加とカスタマイズ
フォームビルダーの左側にあるパネルでフィールドをクリックするか、プレビューエリアにドラッグ&ドロップすることで、テンプレートフォームにフィールドを追加することができます。
プレビューパネル内のフィールドをクリックすると、そのフィールドのオプションが表示され、カスタマイズすることができます。
注:テンプレートのフィールドの設定についてさらに詳しいガイダンスをお探しですか?適切なフォームフィールドの選択と フィールドオプションのカスタマイズに関するチュートリアルで、利用可能なすべてのオプションについて詳しく学ぶことができます。
また、テンプレートフォームに条件ロジックを追加したり、マルチカラムレイアウトを作成することも検討するとよいでしょう。すべての変更とカスタマイズはテンプレートに引き継がれます。
フォームの設定
また、テンプレートフォームの設定をカスタマイズして、今後このテンプレートを使用するフォームのデフォルト設定を設定することもできます。このフォームをエクスポートしてテンプレートとして使用する場合、設定の変更はすべて引き継がれます。
一般
フォームの一般設定では、テンプレートのタイトルを編集し、説明を追加することができます。
この2つは後でテンプレートライブラリに表示されるので、カスタマイズしておくとよいでしょう。説明文には、テンプレートの使用目的など、テンプレートを使用する人にとって重要な詳細が含まれていることを確認してください。
ここでは、送信ボタンのテキストを編集したり、スパム対策のオン・オフを切り替えたり、必要に応じてカスタムCSSを追加することもできます。
お知らせ
テンプレートフォームの通知設定で、テンプレートのデフォルト通知を1つ以上作成できます。
注:テンプレートの通知のカスタマイズにお困りですか?詳しくは、通知メールの設定に関するチュートリアルをご覧ください。
確認事項
テンプレートのデフォルトの確認は、確認の設定で変更できます。
注意:フォームの確認の作成についてもっと知りたいですか?WPFormsの確認設定のガイドを参照してください。
テンプレートに満足したら、フォームビルダーの右上にある保存ボタンをクリックして変更を保存します。
その後、Xアイコンをクリックしてフォームビルダーを終了します。
フォームコードをエクスポートしてテンプレートを作成する
テンプレートフォームの設定が完了したら、エクスポートしてテンプレートライブラリに追加しましょう。
まず、WPForms"Toolsで Exportタブをクリックしてテンプレートのコードを取得する必要があります。
このページで、「フォームテンプレートのエクスポート」セクションまでスクロールダウンすると、すべてのフォームのドロップダウンリストが表示されます。テンプレートとして使用するために作成したフォームを選択し、[テンプレートのエクスポート] ボタンをクリックします。
テンプレート・コードが生成され、画面に表示されます。
このコードをあなたのサイトファイルにコピー&ペーストすると、フォームビルダーのセットアップページにあるフォームテンプレートライブラリにこのテンプレートが表示されます。
テンプレートコードをサイトに追加する
ここでは、エクスポートしたテンプレートのコードをサイトに追加する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
.そして次のコードを貼り付ける:
これは、次のファイル名のコードを実行するようサイトに指示します。 wpforms-custom-templates.php
.次に、そのファイルを作成する必要がある。必ず /wp-content/themes/YOUR-THEME/
と同じフォルダ)。 functions.php
).
最後に、テンプレートのコードを wpforms-custom-templates.php
ファイルに保存する。
注: を作成する際に wpforms-custom-templates.php
ファイルに <?php
を、エクスポート・ツールによって生成されたテンプレート・コードの上に追加してください。これはファイルが有効であり、この方法が機能するために必要です。
方法3:カスタムプラグインを作成する
将来的にWordPressのテーマを変更する予定がある場合や、複数のサイトで同じテンプレートを使用したい場合に最適なオプションです。
プラグインの作成は複雑に聞こえるかもしれないが、この場合、実際には数ステップで済む。
まず、テキスト・エディターかコード・エディターで新規ファイルを作成し、以下を貼り付ける:
交換 // 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のバリデーションメッセージをカスタマイズする方法をご覧ください。