ドラッグアンドドロップで問い合わせフォーム等が作れる:Contact Form by WPForms

2019年3月10日

ドラッグアンドドロップで、問い合わせフォーム等が作れる WordPress 用プラグインの紹介です。
それは「Contact Form by WPForms」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

Contact Form by WPForms

Screenshot of wordpress.org

Contact Form by WPForms は、ドラッグアンドドロップで、問い合わせフォーム等が作れます。

作成したフォームは、ショートコードを貼り付けることで設置できます。
もしくは、Gutenberg エディターのブロックからも簡単に設置できます。

Contact Form 7/ Ninja Forms/ Pirate Forms で作成したフォームをインポートすることもできます。
日本語化対応もされています。

記事を作成もしくは更新時点でのバージョン:v 1.5.1.1
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに専用ブロックが追加されます。

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Contact Form by WPForms – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Contact Form by WPForms」と入力します。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Contact Form by WPForms は、日本語化対応がされているので、有効化するだけで日本語化されます。
日本語化されない場合には、日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

有効化すると

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

ウェルカム画面が表示されます。
ガイド付きセットアップウィザードを起動できます。

専用メニュー

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

ダッシュボードの「コメント」メニューの下に追加されています。

管理画面

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

作成済みのフォーム一覧画面。

使い方

フォームを作成するには「新規追加」ボタンをクリックします。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フォーム名を入力して、フォームテンプレートを選択します。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フォーム編集画面が開きます。
保存するには「保存」ボタンをクリックします。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

「埋め込む」ボタンをクリックするとショートコードが表示されます。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

テンプレートで「問い合わせフォーム」を選択したときのデフォルトフォーム。
各フィールドの複製・削除とドラッグアンドドロップで順番を入れ替えることができます。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

Lite 版で使用できる標準フィールド一覧です。
フィールドを選択して、フォーム上にドラッグアンドドロップすると配置できます。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フォームに配置している各フィールドを選択すると、
各フィールドの設定画面が開きます。
※フィールドによって設定項目は異なります。

フォーム毎の設定

全般

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

通知

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

確認

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

マーケティング

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

支払い

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フォームの設置

作成したフォームを投稿や固定ページに設置するには色々と方法があります。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

クラシックエディターの場合には、ショートコードを貼り付けるか、
「フォームを追加」ボタンが追加されているので、
ボタンをクリックしてフォームを選択します。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

Gutenberg エディターの場合には、専用ブロックを追加してフォームを選択します。

もしくは、ショートコードブロックを追加して、ショートコードを貼り付けます。
下記の記事にて詳しく解説していますので、御覧ください。

https://www.hiskip.com/wp/notes/9402.html

設定(プラグイン全体)

全般

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

Lite 版として使うには、ライセンスキーは不要です。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

  • フォームスタイルを含める
    サイトに読み込む CSS ファイルを選択します。
  • 資産をグローバルにロード
    サイト全体に WPForms のインクルードするファイル読み込む場合にはチェックを付けます。
  • GDPR 強化
    GDPR 関連の機能と機能拡張をオンにするかどうか。

メール

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

メール通知の際に使用するメールのテンプレート形式を選択します。

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

  • ヘッダー画像
    メールの上部に表示されるロゴを設定できます。
  • 背景色
    HTML メールの背景色を選択できます。
  • カーボンコピー
    フォームの通知設定で「CC」を設定できるようにするかどうか。

reCAPTCHA

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

  • タイプ
    reCAPTCHA のタイプを選択します。
  • サイトキー
    reCAPTCHA のサイトキーを入力します。
  • 秘密鍵
    reCAPTCHA のシークレットキーを入力します。
  • 無競合モード
    競合を防ぐために他の reCAPTCHA 機能を強制的に削除するかどうか。

検証

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フィールドに入力された値をチェックした際にエラー時にエラーメッセージを設定できます。

  • 必須
    必須項目に値が入力されていない場合のエラーメッセージ。
  • Web サイトの URL
    URL が誤っている場合のエラーメッセージ。
  • メール
    メールが誤っている場合のエラーメッセージ。
  • 番号
    入力された番号が数値でない場合のエラーメッセージ。
  • 値を確認
    値が一致しない場合のエラーメッセージ。

統合

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

その他

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

  • お知らせを隠す
    このプラグインからの通知を非表示するかどうか。
  • WPFormsをアンインストールします
    このプラグインをアンインストールする際に、このプラグインの全てのデータを削除するかどうか。

ツール

インポート

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

WPForms エクスポートファイルと、
サードパーティ製の問い合わせフォームのインポートができます。

エクスポート

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

フォームとフォームテンプレートをエクスポートできます。

システム情報

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

WordPressプラグイン「Contact Form by WPForms」のスクリーンショット

システム情報の確認と SSL 接続テストを行えます。

URL

Contact Form by WPForms – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

WPForms

Posted by 管理人