Caldera Forms

【WordPress】プラグイン「Caldera Forms」でお問合せフォームを作成

こちらの記事は「Caldera Forms」というプラグインのご紹介です。

 

こちらはフォームを作成する為のプラグインです。

1度しか使用したことがないので基本的な使い方しか把握できていないですが、

今回は、

試しにフォームを1つ作成しながら説明します。

 

まず、プラグインをインストール後に有効化すると、

管理画面左メニューに「Caldera フォーム」が追加されます。
Caldera Forms 左メニュー
「フォーム」をクリックします。

下記の画面が立ち上がります。
Caldera Forms 新規作成

いくつかのテンプレートが用意されていますが、

一から作成したいので「空のフォーム」を選択します。

Caldera Forms 空のフォーム
「フォーム名」を入力して、「フォーム作成」をクリック

空のフォームが作成されるので、「フィールドの追加」を背景色が白色の部分にドラッグする。
Caldera Forms フィールドの追加

下記の画面が立ち上がります。
Caldera Forms 一行のテキスト入力を選択

ここでは、「一行のテキスト入力」を選択します。

右側の項目を入力します。
Caldera Forms テキストボックス

まずは、「お名前」という項目を作成してみます。

「名前」「スラッグ」「必須」「プレースホルダー」の項目を設定すると、

Caldera Forms 一行のテキスト入力を選択02

続いて「メールアドレス」と「電話番号」の項目も追加しておきます。
Caldera Forms 一行のテキスト入力を選択03

続いてプルダウンの項目を追加してみます。

Caldera Forms ドロップダウンを選択

今回は「都道府県」の選択項目を追加します。Caldera Forms ドロップダウン

右側の入力項目部分をスクロールして下まで移動すると、

「オプションの追加」があるのでクリックします。
※ここでプルダウンでの選択項目を設定します。
Caldera Forms ドロップダウンの設定02

取りあえず、3つくらい追加して「東京都」「神奈川県」「千葉県」を設定しておきます。

次は、チェックボックスの項目を追加します。
Caldera Forms チェックボックスを選択
「チェックボックス」のフィールドを設定します。

今回は「お問合せ内容」という選択項目を追加します。
Caldera Forms チェックボックスの設定

右側の入力項目部分をスクロールして下まで移動すると、

「オプションの追加」があるのでクリックします。
※ここでチェックボックスの選択項目を設定します。

Caldera Forms チェックボックスの設定02

取りあえず、3つくらい追加して「東京都」「神奈川県」「千葉県」を設定しておきます。

次は、ラジオボタンの項目を追加します。
Caldera Forms ラジオボタンを選択
「ラジオボタン」のフィールドを設定します。

今回は「性別」という選択項目を追加します。
Caldera Forms ラジオボタンの設定

右側の入力項目部分をスクロールして下まで移動すると、

「オプションの追加」があるのでクリックします。
※ここでラジオボタンの選択項目を設定します。
Caldera Forms ラジオボタンの設定02

取りあえず、3つくらい追加して「男性」「女性」「中性」を設定しておきます。

次は、ファイルのアップロード機能を設定してみます。
Caldera Forms ファイルのアップロード機能を選択

Caldera Forms ファイルのアップロード機能を設定
メールにアップロードファイルを添付させたい場合には、

Attach to Mailer」にチェックを入れて下さい。

最後に送信用のボタンを設定します。

「基本」の中の「ボタン」を選択します。
Caldera Forms 送信ボタンを選択

Caldera Forms 送信ボタンを設定

メールの送信設定を行います。

「メールアドレス」タブを選択して下さい。
Caldera Forms メールアドレスタブ

「フォームのメールアドレス」「メールに返信」「メールのタイプ」「メール受信者」「メールの件名」「メールのメッセージ」の項目を設定して下さい。

それと、「CSV バージョンを添付する」にチェックを入れておくと、ユーザーの入力内容をCSVにして、メールに添付してくれます。

自動返信メールの設定を行います。

「処理」タブを選択して、「プロセッサーを追加」をクリックして下さい。
Caldera Forms 処理タブ

Caldera Forms 自動返信メールの選択

「自動返信メール」を選択します。

自動返信メールの設定

「フォームのメールアドレス」「Reply To 」「メールの件名」「受信者名」「受信者メールアドレス」「メッセージ」の項目を設定して下さい。

スパム対策の設定を行います。

「Anti-Spam」タブを選択して下さい。
「Anti-Spam」タブを選択

「基本」の「有効化」にチェックを入れて下さい。

これで基本的な設定は完了なので、

「フォームを保存」ボタンをクリックして設定内容を保存します。

ここまできたら、

「フォームをプレビュー」をクリックしてユーザー側の確認を行います。

今回はこのような画面になっていると思います。
フォームをプレビュー

このままだと見た目は良くないので、

CSSでデザインを整えて下さい。

必要に応じて独自のクラス(class)の追加も可能なので、

そちらを利用して下さい。

 

これで一度テストをして問題なくメールが届けば、

設定はOKです。

 

最後に、

画面上部にある「フォーム設定」をクリックして下さい。

いくつかの設定項目があるので、

必要に応じて設定を行って下さい。

フォーム設定

あと、

こちらの画面では「ショートコード([caldera_form id="xxxxx"])」も取得できます。

ショートコードを固定ページや投稿記事に貼り付けてフォームの設定を行うことも出来るので、

ぜひそちらも活用して下さい。

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

Twitter

アーカイブ

PAGE TOP