ACF フロントエンド フォームの作成方法 [コードなし!]

公開: 2022-12-14

WordPress サイトで高度なカスタム フォームを使用したいと考えていますが、コーディング方法がわかりませんか? このガイドは、ACF フロントエンド フォームをすぐに作成するのに役立ちます。

ACF フロントエンド フォームの作成方法

読了時間の目安： 6分

Advanced Custom Fields (ACF) は強力なツールです。

フィールドをカスタマイズし、フォームを思い通りに構築できるため、可能性はほぼ無限です。

しかし、1 つ問題があります。 Web サイトのフロントエンドで ACF フォームを取得するためのコーディング方法を知っておく必要があります。

Formidable Forms は、最高の WordPress Form Builder プラグインです。 無料で手に入れよう！

それともあなたですか？

この投稿では、WordPress でコードなしで簡単に ACF フロントエンド フォームを作成する方法を紹介します。 そして、それはすべて、完璧な ACF フォーム ビルダーであるFormidable Formsを使用して行われます。

それに入りましょう。

高度なカスタム フィールドのフロント エンド フォームを使用することの何が問題になっていますか?

実際、 ACF を使用して高度なカスタム フィールドのフロントエンド フォームを作成することに何の問題もありません。

ACF は強力なツールです。 PHP でコーディングする方法を知っている場合は、独自のフォームをすばやく作成できます。

しかし、コーディングの仕方を知らなければ、目の前の外国語に頭を悩ませていることになります。

以下の ACF フォームのサンプル コードを確認してください。

ACF のフロント エンド フォームにはコーディングの知識が必要です

したがって、次の 2 つのオプションがあります。

  1. ACF を使用してフロントエンド フォームのコーディングと作成を学ぶ
  2. 手ごわいフォームにすべての面倒な作業を任せてください

Formidable には優れた開発者のチームがありますが、そうではないことを想像してください。

したがって、高度なカスタム フィールドのフロントエンド フォームのチュートリアルでは、今日はオプション #2 に焦点を当てます。

FormidableでACFフロントエンドフォームを表示する方法

YouTube でチャンネル登録する

開始するには、いくつかのものが必要です。

  1. 手ごわいフォームビジネスプラン
  2. ACF プラグイン (無料またはプロ)

手ごわいフォームを今すぐ入手！

ACF フロントエンドでより高度なフィールドを使用するには、プロ バージョンが必要です。 ただし、基本的なフィールドについては、無料版を使用できます。

さらに詳しい情報が必要な場合は、ACF ナレッジベースのドキュメントをご覧ください。

したがって、Formidable Forms をインストールしてアクティブ化したら、 Formidable → Add-onsに移動し、 ACF Form WordPress プラグインの[インストール]ボタンをクリックします。

次に、いくつかの簡単な手順を実行します。

  1. ACF フォーム フィールドの作成
  2. Formidable で ACF フロントエンド フォームを作成する
  3. フィールドをマッピングする

    始めましょう。

    手ごわいフォームプロプラン

    ステップ 1: ACF フォーム フィールドを作成する

    この例では、 Here Birdie Birdieという名前の野鳥観察ブログがあります。

    バーディー バーディーのサンプルウェブサイトはこちら

    ユーザーがバードウォッチングの投稿をブログにカスタム投稿タイプとして自動的に表示する方法が必要です。

    そこで、ユーザーが情報を入力するためのフィールドをいくつか作成します。

    1. 名前
    2. 日にち
    3. 時間
    4. バードソー一覧
    5. 追加コメント

    そのため、最初に ACF にアクセスしてフィールドをカスタマイズします。 幸いなことに、Formidable は 19 の異なる ACF フィールド タイプのマッピングをサポートしています。 だから、たくさんのオプションがあります。

    これを行うには、 [カスタム フィールド] → [フィールド グループ]に移動し、 [新規追加]をクリックします。

    [新規追加] ボタンをクリックして、ACF フィールドを作成します

    次に、 [フィールドの追加]ボタンをクリックして、フィールドを追加できます。

    したがって、上記のフィールドを作成し、ニーズに合わせてカスタマイズします。

    ACF のフィールド例

    ACF Repeaterフィールドを使用して、訪問者が見たすべての鳥を簡単に表示できるようにします。 リピーター フィールドを使用すると、ユーザーは必要な数のエントリを追加または削除できます。

    これらのフィールドでドロップダウン(ACF では選択) フィールドを使用して、訪問者が鳥のリストから選択できるようにします。 また、数値フィールドを追加して、各鳥を見た時間を入力します。

    ACF 選択メニューの例

    これを自分のニーズに合わせて自由にカスタマイズしてください。 ただし、より高度な機能 (リピーターなど) を取得するには、ACF Pro を購入する必要があります。

    完了したら、 [変更を保存]をクリックします。

    ステップ 2: Formidable で ACF フロントエンド フォームを作成する

    次に、Web サイトのフロント エンドに表示されるフォームを作成します。

    それで、WordPress管理パネルのFormidable→Formsに行きます。

    次に、ページの上部にある[新規追加]をクリックし、空白のフォームまたは Formidable のテンプレートのいずれかから開始することを選択します。

    新規追加をクリックして、新しいフォームを作成します

    状況に最適なオプションを自由に選択してください。 空白のフォームから始めて、好みに合わせてカスタマイズします。

    次に、フォームに名前を付けて、 [作成]をクリックします。

    プラグインは、フォーム要素を追加できる Formidable のドラッグ アンド ドロップ フォーム ビルダーに移動します。 名前、メールアドレス、電話番号、住所など、なんでもここにあります。

    Formidable のドラッグ アンド ドロップ フォーム ビルダー

    ACF で既にフォーム フィールドを作成しているので、一致するフィールドを追加して、それらを簡単に接続できるようにするだけです。

    バードウォッチング フォームの例

    上部にフィールドを追加したので、ユーザーはブログ投稿に名前を付けて一意にすることができます!

    フォームの作成が完了したら、 [更新]をクリックして変更を保存します。

    保存しなかったために作成したすべてのものを失うことほど、90 年代を思い出させるものはありません。

    ステップ 3: フィールドをマッピングする

    フォームを作成したので、ACF フィールド マッピングを有効にする必要があります。

    そのため、ページの上部にある[設定]タブをクリックして、 [アクションと通知]に移動します。

    次に、[投稿を作成]アクションを選択して、フォーム フィールドの表示方法をカスタマイズします。

    「投稿フォームを作成」アクションをクリックします

    Create Post form アクションで、Custom Fields セクションまで下にスクロールし、 Map form fields to Advanced Custom Fieldsトグルをクリックします。

    ACF フォーム機能の切り替え

    ドロップダウンから ACF フィールド グループを選択し、 [追加]をクリックしてカスタム フィールドとフォーミダブル フィールドのマッピングを開始します。

    ACF フィールドを手ごわいフィールドにマッピングする

    また、リピーター フィールドを使用する場合は、リピーターとサブフィールドを正しく一致させる必要があります。

    フィールドをマッピングしたら、 [更新]をクリックして変更を保存します。

    以上です！ ユーザーは自分のエントリを WordPress ACF フロントエンド フォームに送信できるようになり、ACF フィールドと Formidable Forms フィールドがマッピングされ、情報が送信されます。

    ここから、ビューを使用してフロントエンドに情報を表示するか、ACF をサポートするテーマを使用して、投稿、投稿タイトル、コンテンツなどを編集できます。

    この ACF フロントエンド フォーム プラグインは他に何ができますか?

    手ごわいフォームのバナー

    Formidable は、ACF の単純なフォーム ビルダーのように見えるかもしれませんが、それだけではありません。

    数十の ACF フォーム関数、テンプレート ファイル、およびすべてのトップ テーマ (Elementor を含む) との互換性により、Formidable はすべてを実行します。

    また、フォームを強化するための追加機能とオプションがたくさんあります。

    • マルチステップ フォーム、クイズ、会話型フォーム
    • 複数のスパム対策オプション
    • 組み込みのビジュアル フォーム スタイラー
    • 100 以上のフォーム テンプレート
    • 手ごわい景色

    これらは、得られる機能のほんの一部です。 そして、私たちがそう言うなら、彼らはかなり素晴らしいです.

    では、ACF フォームをフロントエンドに配置するのがどれほど簡単で、豊富な機能を利用できるのに、何を待っているのでしょうか?

    手ごわいは、今日あなたのウェブサイトをワンランク上のものにする準備ができています.

    ACFフロントフォームを作る準備はできましたか?

    「フロントエンドに ACF フィールドを追加するにはどうすればよいですか?」 これで答えがわかりました。

    Formidable のシンプルなノーコード ソリューションを使用すると、数分で起動して実行できます。 そして、この投稿では、その方法を正確に示しました。

    WordPress ACF pro と無料版のどちらを使用していても、Formidable は完璧なパートナー プラグインです。

    したがって、開始する準備ができている場合は、今すぐ Formidable Forms を入手して、Web サイトで入手してください。

    今すぐ ACF フロント エンド フォームを入手してください。

    Facebook、Twitter、YouTube でフォローして、さらに素晴らしい WordPress のヒントやコツを入手してください。

    WordPressフォームについてもっと読む！

    • WordPressでフォーム送信後にリダイレクトする方法 WordPressでフォーム送信後にリダイレクトする方法[3ステップ！]
      続きを読む
      WordPressでボタンをフォームにリンクする方法 WordPressでボタンをフォームにリンクする方法[簡単な方法!]
      続きを読む
      WordPress ブロックの背景色を変更する方法 WordPress ブロックの背景色を変更する方法
      続きを読む