Caldera Forms

WP(WordPress)

【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」タブを選択して下さい。

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

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

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

ここまできたら、

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

今回はこのような画面になっていると思います。

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

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

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

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

 

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

設定はOKです。

 

最後に、

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

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

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

あと、

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

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

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

WordPress短期学習プログラム

関連記事

  1. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPressの投稿がなぜか予約投稿になってしまいます。。。

    WordPressからの記事投稿時、未来日時にしていないにもかかわ…

  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPress プラグインでサイト改善

    ずっと放置しいてたサイト(WordPressで構築)があったの…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP管理画面にオリジナルのCSSを追加

    カスタム投稿タイプを複数追加すると、管理画面左カラムにメニューが増…

  4. WP:WordPress(ワードプレス)

    WP(WordPress)

    【WordPress】記事タイトルを出力(表示)、または、取得する方法

    WordPressでは、投稿記事のタイトルを出力(表示)す…

  5. Akismet Anti-Spam (アンチスパム)

    WP(WordPress)

    Akismet Anti-Spam (アンチスパム)

    スパム対策で最も有名なプラグインと言えば「Akismet Anti-S…

  6. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPress3.8へアップデートしてみました!!

    今日、既存のWordPressを3.8へアップデートしてみました。…

最近の記事

  1. CakePHP
  2. PHP(ピー・エイチ・ピー)
  3. PHP(ピー・エイチ・ピー)
  4. PHP(ピー・エイチ・ピー)
  5. WP:WordPress(ワードプレス)
  6. WP:WordPress(ワードプレス)
  7. WP:WordPress(ワードプレス)
  8. Security(セキュリティ)
  9. WP:WordPress(ワードプレス)
  10. WP:WordPress(ワードプレス)
PAGE TOP