お問い合せフォームの設定
初期設定でお問合せフォームを「ON」にした場合は、下記の説明の通りにフォームの設定を行ってください。
目次
メールの設定
下の画像のように、管理メニューより①「お問い合わせ」を押し、②「お問い合わせフォーム」を押して設定画面を開いてください。
次に設定画面のタブ「メール」を押してください。下の画像のように送信先メールアドレスなどの設定画面が表示されます。
各項目の設定
送信先
あなたが受信できるメールアドレスを半角英数字で入力してください。
【例】info@manage-dstopping-web-com
送信元
メールが送信された際に送信元となるメールアドレスを入力してください。「送信先」のメールアドレスと同じで構いません。
【例】info@manage-dstopping-web-com
題名
メールを受信した際に表示される「件名」を入力してください。
【例】お問い合わせフォームからの送信 など
追加ヘッダー
特に入力する必要はありません。
メッセージ本文
ファームの項目をカスタマイズしない場合は編集する必要はありません。フォームの編集を行った場合は、設定した項目毎にショートタグの編集をする必要があります。
ファイル添付
特に編集する必要はありません。
メール（２）
この項目は、閲覧者がフォームから送信した際に、閲覧者にも同じメールを自動で送信する際に使用しますが、現在自動送信メールはセキュリティ対策として推奨されないためチェックは入れないでください。
「メール」の設定は以上です。設定が完了したら、必ず一番下の「保存」を押して、実際にメールフォームからテストを行ってフォームからメールが届くかチェックしてください。
フォームのカスタマイズ
フォームをカスタマイズする場合は、タブの「フォーム」を選択してください。フォームの編集は、少しプログラム的な文字列になっていて「うっ、、」となるかもしれませんが、予め必要な項目を設定してありますので「フォーム」タブ部分は基本的にそのまま使っても大丈夫です。
タグの説明
タグとは、上の画像の細い赤枠の中にあるプログラム全体を指しています。必要のない項目を追加・削除すればいいのですが、仕組みを理解しておけば自由にカスタマイズできるようになりますので、是非一読してください。
１つのフォームタグを抜粋して解説
初期設定で一番上に設定してある「会社名」のフォームタグを見てみましょう。
上の画像では１つのフォームタグのかたまりが2行のタグで構成されていますが、上は見出し（タイトル）で使用するタグ、下は入力させるフォームなどのタグです。この2行をワンセットで追加・削除すれば反映されます。
上の画像のように、見出しタグは３つの要素に分かれます。１つは<label>～</label>というタグでこれは見出し用のタグを囲む箱のように考えてください。次に<span>～</span>というタグで、これは任意か必須かを表すためのタグです。最後に「会社名」という文字は、まさにフォームの見出しに表示させるテキスト情報になります。
次にフォーム用のタグです。[ ]で囲まれたタグは、青文字のタグの種類と緑文字のタグの名前になります。２つの要素の間には、必ず半角スペースを空ける必要があります。
初期状態で配置されている「会社名」の入力フォームのタグは下記の通りになります。
<label><span class="any">任意</span>会社名</label>
[text your-company] 理解が深まったでしょうか？
では、カスタマイズできる全てのタグを見てみましょう！必要な部分をコピペすればすぐに利用できます。
<label><span class="any">任意</span>会社名</label>
[text your-company]
<label><span class="required">必須</span>お名前</label>
[text* your-name]
<label><span class="required">必須</span>よみがな</label>
[text* your-name-yomi]
<label><span class="required">必須</span>メールアドレス</label>
[email* your-email]
<label><span class="any">任意</span>題名</label>
[text your-subject]
<label><span class="required">必須</span>お問い合わせ内容</label>
[textarea* your-message]
<label><span class="any">任意</span>電話番号</label>
[tel your-tel]
<label><span class="any">任意</span>URL</label>
[url your-url]
<label><span class="any">任意</span>数値</label>
[number number-select]
<label><span class="any">任意</span>数値</label>
[date date min:2022-02-01 max:2022-02-26]
<label><span class="any">任意</span>セレクトボックス</label>
[select* menu-1 include_blank "りんご" "バナナ" "パイナップル"]
<label><span class="any">任意</span>チェックボックス</label>
[checkbox checkbox-1 use_label_element "りんご" "バナナ" "パイナップル"]
<label><span class="any">任意</span>ラジオボタン</label>
[radio radio-1 use_label_element default:1 "りんご" "バナナ" "パイナップル"]
<label><span class="any">任意</span>添付ファイル</label>
[file file]
[acceptance acceptance optional] 個人情報の取扱いに同意します [/acceptance]※フォームをカスタマイズした場合は、「メール」タブの「メッセージ本文」を編集する必要があります。
「メール」タブ「メッセージ本文」の編集
例えば、フォームに下記のタグを追加した場合
<label><span class="any">任意</span>電話番号</label>
[tel your-tel] 「メール」タブの「メッセージ本文」には下記のようにショートタグを挿入する必要があります。
電話番号：[your-tel] 上記のように、はじめに何の情報かわかるように見出しを付け、その後にショートタグを挿入します。
※各項目の使い方、設定の仕方はインターネットブラウザで、Contact Form 7と検索すると数多くの解説記事が出てきますので参考にしてください。順次、本ページ内でも解説を増やしていきます。
必須項目の設定
必須項目と任意項目を設定する場合は、下の画像のようにフォームの種類タグの直後に「*」を付与するかしないかで決める事ができます。また、タイトル部分に「任意」か「必須」の文字を表示させる場合は、<span>～</span>をそれぞれ専用のタグに変えます。
コピペ用
<label><span class="any">任意</span>会社名</label>
[text your-company]
<label><span class="required">必須</span>お名前</label>
[text* your-name] 基本的な問い合わせフォームテンプレート
初期設定ではコーポレートサイトなどで標準的に利用される項目を配置してあります。間違えて削除してしまった場合などは、下記を丸ごとコピペしてください。
<label><span class="any">任意</span>会社名</label>
[text your-company]
<label><span class="required">必須</span>お名前</label>
[text* your-name]
<label><span class="required">必須</span>よみがな</label>
[text* your-name-yomi]
<label><span class="required">必須</span>メールアドレス</label>
[email* your-email]
<label><span class="required">必須</span>お問い合わせ内容</label>
[textarea* your-message]
[response]
[submit "送信"]初期設定では、下の画像のように問い合わせフォームが簡潔になっています。
