こちらの記事は「Caldera Forms」というプラグインのご紹介です。
こちらはフォームを作成する為のプラグインです。
1度しか使用したことがないので基本的な使い方しか把握できていないですが、
今回は、
試しにフォームを1つ作成しながら説明します。
まず、プラグインをインストール後に有効化すると、
管理画面左メニューに「Caldera フォーム」が追加されます。
「フォーム」をクリックします。
↓
下記の画面が立ち上がります。
いくつかのテンプレートが用意されていますが、
一から作成したいので「空のフォーム」を選択します。
↓
「フォーム名」を入力して、「フォーム作成」をクリック
↓
空のフォームが作成されるので、「フィールドの追加」を背景色が白色の部分にドラッグする。
↓
下記の画面が立ち上がります。
ここでは、「一行のテキスト入力」を選択します。
↓
右側の項目を入力します。
まずは、「お名前」という項目を作成してみます。
↓
「名前」「スラッグ」「必須」「プレースホルダー」の項目を設定すると、
↓
続いて「メールアドレス」と「電話番号」の項目も追加しておきます。
↓
続いてプルダウンの項目を追加してみます。
↓
↓
今回は「都道府県」の選択項目を追加します。
↓
右側の入力項目部分をスクロールして下まで移動すると、
「オプションの追加」があるのでクリックします。
※ここでプルダウンでの選択項目を設定します。
取りあえず、3つくらい追加して「東京都」「神奈川県」「千葉県」を設定しておきます。
↓
次は、チェックボックスの項目を追加します。
「チェックボックス」のフィールドを設定します。
↓
今回は「お問合せ内容」という選択項目を追加します。
↓
右側の入力項目部分をスクロールして下まで移動すると、
「オプションの追加」があるのでクリックします。
※ここでチェックボックスの選択項目を設定します。
取りあえず、3つくらい追加して「東京都」「神奈川県」「千葉県」を設定しておきます。
↓
次は、ラジオボタンの項目を追加します。
「ラジオボタン」のフィールドを設定します。
↓
今回は「性別」という選択項目を追加します。
↓
右側の入力項目部分をスクロールして下まで移動すると、
「オプションの追加」があるのでクリックします。
※ここでラジオボタンの選択項目を設定します。
取りあえず、3つくらい追加して「男性」「女性」「中性」を設定しておきます。
↓
次は、ファイルのアップロード機能を設定してみます。
↓
メールにアップロードファイルを添付させたい場合には、
「Attach to Mailer」にチェックを入れて下さい。
↓
最後に送信用のボタンを設定します。
「基本」の中の「ボタン」を選択します。
↓
↓
メールの送信設定を行います。
「メールアドレス」タブを選択して下さい。
「フォームのメールアドレス」「メールに返信」「メールのタイプ」「メール受信者」「メールの件名」「メールのメッセージ」の項目を設定して下さい。
それと、「CSV バージョンを添付する」にチェックを入れておくと、ユーザーの入力内容をCSVにして、メールに添付してくれます。
↓
自動返信メールの設定を行います。
「処理」タブを選択して、「プロセッサーを追加」をクリックして下さい。
↓
「自動返信メール」を選択します。
↓
「フォームのメールアドレス」「Reply To 」「メールの件名」「受信者名」「受信者メールアドレス」「メッセージ」の項目を設定して下さい。
↓
スパム対策の設定を行います。
「Anti-Spam」タブを選択して下さい。
「基本」の「有効化」にチェックを入れて下さい。
これで基本的な設定は完了なので、
「フォームを保存」ボタンをクリックして設定内容を保存します。
↓
ここまできたら、
「フォームをプレビュー」をクリックしてユーザー側の確認を行います。
今回はこのような画面になっていると思います。
このままだと見た目は良くないので、
CSSでデザインを整えて下さい。
必要に応じて独自のクラス（class）の追加も可能なので、
そちらを利用して下さい。
これで一度テストをして問題なくメールが届けば、
設定はOKです。
最後に、
画面上部にある「フォーム設定」をクリックして下さい。
いくつかの設定項目があるので、
必要に応じて設定を行って下さい。
あと、
こちらの画面では「ショートコード（[caldera_form id="xxxxx"]）」も取得できます。
ショートコードを固定ページや投稿記事に貼り付けてフォームの設定を行うことも出来るので、
ぜひそちらも活用して下さい。
WordPressプラグイン「Akismet Anti-Spam (アンチスパム)」でのスパム対策
WordPressプラグイン「EWWW Image Optimizer」で画像をWebP対応
この記事へのコメントはありません。