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の短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. WordPress(ワードプレス)

    WP(WordPress)

    WP 記事の更新日を取得

    今日は久しぶりにWordPressを使った開発案件を担当しました。…

  2. WordPress(ワードプレス)

    WP(WordPress)

    WP デフォルトの投稿画面を非表示

    WordPressをCMSとして使用していると、デフォルトの投稿画…

  3. Security(セキュリティ)
  4. WordPress(ワードプレス)

    PHP

    WPの記事インポートで画像のサムネイルが作成されない!!

    WordPressに記事をインポートしてみたのですが、どうも記事の…

  5. WordPress(ワードプレス)

    WP(WordPress)

    add_image_size()と「WP Image Size Selection」はセットで

    add_image_size()で画像サイズを追加した場合、地味に…

  6. WP(WordPress)

    WPのカテゴリーをドロップボックス形式で表示

    カテゴリーをプルダウン形式(ドロップボックス)で表示させたい時、w…

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. SONY 広角レンズ「SEL1018」
  3. PHP(ピー・エイチ・ピー)
  4. 俺流塩ラーメン
  5. SEO(エスイーオー)
  6. Linux(リナックス)
  7. Linux(リナックス)
  8. PHP(ピー・エイチ・ピー)
  9. バージョンアップ
  10. Google Search(グーグル検索)
PAGE TOP