Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress でカスタマイザーフォームを作成する方法 (簡単な方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトにカスタマイザーフォームを作成したいですか?

WPBeginnerでは、多くのユーザーがWordPressサイトにAirtableフォームをシームレスに統合するお手伝いをしてきました。

Airtable は、カスタムデータドリブンアプリを作成するための強力なツールで、データを効率的に収集・管理することができます。不便なフォームや整理されていないデータとの格闘は、フラストレーションと時間の浪費につながります。

この投稿では、WordPressでAirtableのカスタムフォームをコーディング不要で作成する最も簡単な方法をご紹介します。

how-to-create-a-custom-airtable-form-in-wordpress-og

なぜWordPressでカスタマイザーフォームを作るのか?

お問い合わせフォームやアンケート、カスタマイザーからの問い合わせなど、たくさんのデータが寄せられる忙しいサイトを運営しているとします。これらの情報をすべてトラッキングすることは、すぐに悪夢となります。

メールやスプレッドシート、整理されていないデータの海に迷い込み、すべてを理解しようとして貴重な時間を浪費していることに気づきます。そこでWordPressのカスタマイザーフォームがお役に立ちます。

Airtableは、カスタムデータドリブンアプリを作成できるデータ管理ツールです。これにより、WordPressフォームを使用してサイトで収集したデータをより可視化することができます。

例えば、WordPressのお問い合わせフォームのデータをAirtableのCRM(カスタマイザー)ツールとして利用し、WordPressのフォームで獲得したリードやコンタクトを管理することができます。

ユーザーアンケートのデータをAirtableに保存することもできます。

WordPressでAirtableを使用する他のユースケースをいくつかご紹介します:

  • プロジェクトごとにタスクを整理し、レスポンシブを割り当て、カンバン表示を使ってプロジェクトの進捗を可視化します。
  • ブログのトラフィックを増やすために、コンテンツ用のコンテンツカレンダーを作成し、公開日をトラッキングし、ライターと編集者を割り当てましょう。
  • 在庫項目のデータベースを管理し、オンラインストアの数量を追跡します。

基本的には、WordPressのお問い合わせフォームから収集したデータをAirtableで使用し、ビジネス用のカスタムアプリ、ワークフロー、ツールを作成することができます。

ということで、WordPressでカスタマイザーフォームを簡単に作成する方法を見てみましょう。

WordPressでカスタマイザーフォームを作成する方法

WordPressでカスタムAirtableフォームを作成するために、まずWPFormsを使ってお問い合わせフォームを作成します。

WordPressフォームビルダープラグインの中で最も優れたプラグインであり、ドラッグ&ドロップのシンプルなインターフェースで簡単にフォームを作成することができます。

その後、Zapierというサービスを使ってフォームをAirtableに接続します。

Zapierは、コードなしで2つの異なるアプリを接続するブリッジとして機能する。WPFormsやAirtableを含む数多くのオンラインアプリで使用できる。

準備はいいかい?始めよう

WPFormsでフォームを作成する

まず、WPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

注:WPForms用のZapierアドオンにアクセスするには、Proバージョン以上が必要です。

有効化した後、WPForms ” 設定ページに移動する必要があります。

General’タブでWPFormsサイトのアカウントからライセンスキーを入力し、’Verify Key’をクリックします。

verify key in WPForms

次に、WordPressダッシュボードのWPForms ” 新規追加ページにアクセスする必要があります。1200以上のビルトインテンプレートから選択できます。

フォームに名前をつけて、簡単に参照できるようにしてください。

name your WPForms

このチュートリアルでは、’シンプルお問い合わせフォーム’を使用します。

テンプレートを使用する」をクリックしてください。

Use template for simple contact form

ここからドラッグ&ドロップエディターに移動し、フォームを簡単にカスタマイズすることができます。

B2Bの見込み客からリードを集めるためにお問い合わせフォームを作成するとします。この場合、お問い合わせフォームに’会社名’と’電話番号’を追加します。

会社を追加するには、「個別行テキスト」項目を追加し、要素をクリックしてフィールド名を「会社」に変更する必要があります。

Add company field to WPForms

見込み客に電話番号を提供してもらいたい場合は、フィールドオプション「電話」をエディター上にドラッグするだけです。

あなたのニーズに合う他のフィールドを自由に追加してください。詳しくはWordPress でお問い合わせフォームを作成する方法をご覧ください。

Phone field

フォームを設定したら、WordPressサイトに追加する必要があります。

上部にある「埋め込み」ボタンを押すだけです。

embed button

お問い合わせフォームは、既存のページに埋め込むか、新規ページに埋め込むかを選択できます。

今回は「既存のページを選択」を選ぶ。

Select existing page

お好きなページを選び、「Let’s Go!

そのページのWordPressエディターに移動します。

Embed in a page

左上の「+」ボタンを押すだけでいい。

次に、WFormsウィジェットを見つけて選択し、ページに追加します。

WPforms block

ここから、先ほど作成したお問い合わせフォームを選択することができます。

これで自動的にフォームがページに埋め込まれます。

choose contact form

次に、上部にある『更新』ボタンを押す。

これでWordPressページにフォームが追加されました。

update button

サイトにフォームを追加したら、テストエントリーを作成します。これはWPFormsとAirtableの接続を設定・確認するために使用します。

名前、メール、電話番号、会社名、そしてメッセージ:

Contact form entry

WPForms用Zapierアドオンの有効化

WPFormsとAirtable間のブリッジを構築するためにZapierを使用します。そのためには、WPForms Zapier Addonをインストールして有効化する必要があります。

WordPressダッシュボードで、WPForms ” Addonsページに行き、Zapierアドオンを見つける。そして、先に進み、それをインストールして有効化する。

Zapier addon

次に、WPForms ” Settingsに移動する必要があります。

Integrations’ページでZapierのロゴをクリックすると、Zapier APIキーが表示されます。ZapierをWPFormsアカウントに接続するために必要です。

APIキーを安全な場所にコピーするか、このタブを開いておいてください。

Zapier api

Airtableでベースとテーブルをセットアップする

次に、お問い合わせフォームから収集した情報をすべて保存するためのベースをAirtableに作成する必要があります。

Airtableを初めてお使いになる方は、ベースとテーブルのセットアップ方法がわからないかもしれません。

まずベースとは、情報を整理して保存するための最上位のデータベースのことです。Airtableのテーブルは、スプレッドシートのシートに似ています。

Airtableでアカウントを作成したら、ホームダッシュボードの’ゼロから始める’オプションをクリックしてください。

既存のスプレッドシートをAirtableに移行したい場合は、「クイックアップロード」設定をクリックするだけです。

Start from scratch

ベースとテーブルに名前をつける。

ベースは’Sales CRM’、テーブルは’Contacts’と名付けることにしました。

Rename base and table in Airtable

次に、一番上のカラムラベルをWPFormsで作成したフォームフィールドと一致するように変更します。

今回は、名前、会社名、メール、電話番号のラベルを追加しました。

Change labels

このタブを開いておく。WordPressの自動化が機能しているかどうかを確認するために、後でこのタブを参照することになるからだ。

パーソナル・アクセストークンの作成

ここで、Zapier経由でWPFormsと接続するためにAirtableを準備する必要があります。そのためには、AirtableとZapierを接続するための個人アクセストークンが必要です。

Airtableにナビゲーションし、プロフィールロゴの下にある「アカウント」ボタンをクリックするだけです。

Airtable account

パーソナルアクセストークンを使用すると、Airtableデータベースに保持されている情報へのアクセスを提供する複数のトークンを作成できます。

Overview」タブで「Go to developer hub」ボタンをクリックする。

Go to developer hub

開発者ハブに移動し、Airtableデータと接続するためのトークンを作成できます。

パーソナルアクセストークン」タブで、「トークンを作成」ボタンをクリックします。

Create token

ここから、重要な情報を入力する必要があります。まず、トークンに名前を付け、後で権限を編集したいときに簡単に参照できるようにする必要があります。

Scopes」で、このトークンにアクセスしたユーザーができることを選択しなければならない。今回は、「data.records:write」というオプションを設定し、ユーザーがレコードの作成、編集、削除ができるようにします。

それが完了したら、「トークンを作成」ボタンをクリックするだけです。

Create token from airtable

トークンが作成されたことを知らせるポップアップが外観表示されます。それをコピーして安全な場所に保管してください。

このトークンをZapierに追加して、AirtableのデータベースをWordPressに接続できるようにします。

copy token

サイトのフォームからAirtableにデータを送信するZapを作成する

次に、Zapierのサイトにアクセスする。ここで、無料アカウントを作成するか、既存のアカウントにサインインする必要がある。

Zapierダッシュボードで、左上の「Create a Zap」ボタンをクリックし、設定ウィザードを開始する。

Create a zap

注:Zapierでは、’zap’はトリガーとアクションを持つプロセスです。トリガーは誰かがフォームに入力することで、アクションはAirtableにレコードを作成することです。

画面上部で、ザップに名前を付け、トリガーを設定する必要がある。

Set up name for trigger in Zapier

下にスクロールして「トリガー」ボックスをクリックする。

次に、WPFormsアプリを見つけて選択し、トリガーを開始します。

WPForms zapier trigger

Choose App & Event’ボックスで、検索バーに’WPForms’と入力する。

その後、出てきたWPFormsアイコンをクリックするだけです。

Choose WPForms as your trigger app

画面の右側にサイドバーウィンドウが表示されます。イベント」で、アクションを開始するトリガーとして「新規フォーム入力」を選択します。

そして、「続ける」ボタンを押すだけだ。

New form entry event trigger

次に’Sign In’ボタンをクリックしてWPFormsアカウントにログインします。

これにより、Zapierは新しいフォーム入力データをすべて取得し、Airtableに挿入することができます。

Sign in to WPForms

ポップアップウィンドウが外観されます。

先ほどジェネレータで生成したAPIキーと、あなたのサイトのURL(ドメイン名)を入力する必要があります。

allow zapier access to WPForms

それが済んだら、『Continue』ボタンをクリックして次に進む。

次に、先ほど作成したフォームをドロップダウンリストから選択するよう求められます。

Continue button

お問い合わせフォームを選択したら、先に進んで「続ける」を選択します。

Refresh fields’(フィールドの更新)ボタンで、データを再読み込みし、最新のフォーム入力を反映させることができます。

Add trigger to Zapier

次に、’Test trigger’ボタンをクリックする。

Zapierはあなたの最新のエントリーを見つけ、トリガーが正しく設定されているかどうかを確認します。

Test trigger

すると、Zapierがテストエントリーを見つけたというメッセージが表示されるはずだ。

入力したフォームのデータが画面に表示されます:

Continue with selected record

Continue with selected record(選択した記録で続行)」ボタンをクリックして次に進みます。2つ目のアプリを選択する必要があります。

ドロップダウンに’Airtable’と入力するだけで、アプリが見つかります。次にAirtableウィジェットをクリックします。

Connect airtable to zapier

Airtableがザップに接続されると、アクションイベントを選択するためのドロップダウンが表示されます。

アクションイベントとは、あなたのサイトのフォームに誰かが入力したときに発生させたいイベントです。ここで’レコードを作成’を選択する必要があります。

そして「Continue」ボタンを押す。

Create record

ZapierはAirtableにサインインするよう促します。

サインイン」ボタンをクリックし、ログインしてください。

Sign in to connect airtable

ZapierがAirtableへのアクセスを要求していることを伝える新しいウィンドウが表示されます。基本的に、これによりZapierはフォーム入力データをAirtableの作成されたフィールドに自動的に送信することができます。

必要なのは、「+ Add a base」リンクをクリックすることだけだ。次に、Zapierにアクセスさせたいワークスペースを選択する。希望がなければ、「現在および将来のすべてのワークスペースにある、現在および将来のすべてのベース」というオプションをクリックするだけだ。

選択したら、「アクセスを許可する」ボタンをクリックする。

Grant access

続行」ボタンが表示されます。

これをクリックするだけで、ザップ作りが続けられる。

Continue with making zap

アクション “タブでは、まず “ベース “と “テーブル “をドロップダウンメニューから追加します。

セールス CRM をベースとして、新規コンタクトを Contacts テーブルに追加します。

Add base and table to zap

また、WPFormsフォームのどのフィールドをAirtableテーブルのカラムに対応させるかをZapierに伝える必要があります。

該当するフィールドすべてについて、テストデータを使って正しいフィールドを選択するだけです。以下のようになるはずです:

table fields to add to zap

続けて「Continue」ボタンをクリックする。

Zapierは、テストデータを使用してAirtableにテストレコードを送信するよう促します。

データのプレビューが表示されます。Test step’をクリックするだけです。

Test step

これにより、Airtableの選択したテーブルにテストデータが送信され、新しいレコードが作成されます。

プレビューの記録を確認し、情報が正しいことを確認する。

Test record

レコードがAirtableに正しく追加されていることを再確認してください。

データがAirtableのベースに送られ、情報が適切なフィールドに正しく入力されたことを確認するのは良いアイデアです。

Airtable data

さて、Zapierに戻ろう。

公開する」ボタンをクリックするだけで、ザップの作成が完了します。

Publish zap

ザップが公開されるまで数秒待つ。

画面上部に「オン」ボタンが表示され、ザップがライブであることを示します。

Zap is on

また、フォームエントリーを送信するテーブルやフィールドを変更するなど、Zapを編集する必要がある場合は、ZapierのホームダッシュボードでいつでもZapを見つけることができる。

ザップのタイトルをクリックするだけで編集できます。

Edit zap

これでザップが実行されました。接続されたフォームからの入力はすべて、選択したAirtableテーブルに追加されます。

ボーナス:リードにSMSメッセージを送る方法

この統合が役に立ったのであれば、お問い合わせフォームに入力した人にSMS通知を送ることもできます。

これは、彼らのリクエストの状態を最新に保つ素晴らしい方法です。

例えば、あなたのランディングページを訪問した見込み客がフォームに入力し、あなたのサービスに興味を示したとします。フォームのデータがAirtableに入力される一方で、リードにSMSメッセージを自動的に送信する別の接続が必要になります。

Brevoは、SMSメッセージも送信できるメールマーケティングサービスです。

Brevo website

このソフトウェアを使えば、連絡先をインポートし、テキストメッセージキャンペーンを送信することができます。詳しくは、WordPressユーザーにSMSメッセージを送信する方法のチュートリアルをご覧ください。

この投稿が WordPress でカスタマイザーフォームを作成する方法のお役に立てば幸いです。WordPress フォームから SMS テキストメッセージを取得する方法や、最適なビジネス電話サービスのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

4件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    I have some polls on my blog, but this way is more comfortable for doing sheets with answers an data of users on my blog. This is a good idea how to do it in better way. Thanks a lot.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。