新しく作成したページ用のメールフォームを作る

「新しいページを作成する」では、既存で用意されているものとは別のページの作成方法を解説しました。今回はこのページに新しく追加するメールフォームの作成方法を解説します。

実際の表示イメージ

図1:イベント告知ページにメールフォームを入れた例

既にある通常のお問合せフォームと体裁が似ていますが、表示項目が一部異なります。
また、新たにフォームを作成することにより、サイト上には複数のフォームが存在することになりますが、どのフォームから来たお問合せなのかは区別することが可能です。

設定手順

準備

「イベント参加申込フォーム_サンプル」というひな形のフォームを用意しています。これを元としてまず複製を作り、フォームを表示したいページに設置してみましょう。

① 管理画面 左側のメニュー「お問合せフォーム編集」から設定を始めます。

「お問合せフォーム編集」をクリックすると、作成済みのフォームの一覧が表示されます。その中に「イベント参加申込フォーム_サンプル」というタイトルがあるので、カーソルを乗せてみましょう。

カーソルを乗せると、タイトルの下にさらにメニューが表示されます。その中の「複製」をクリックします。

図1:「お問合せフォーム編集」をクリック
図2:「イベント参加申込フォーム_サンプル」の
「複製」をクリックしよう

② フォームの複製が作られ、そのまま編集画面に入りました。

複製されたフォームには「イベント参加申込フォーム_サンプル_copy」というタイトルが付いています。タイトルを任意の名前に変更してみましょう。

タイトルを変更したら、画面右側にある「保存」ボタンをクリックします。

図3:タイトルを変更して保存しよう
図4:保存後の画面例

③ 画面左側のメニューからもう一度「お問合せフォームを編集」をクリックします。

コンタクトフォームのリストを見てみると、今タイトルを変更したフォームが追加されているのがわかります。

図5:新しくフォームが追加された

④ 追加されたフォームのタイトルの隣に「ショートコード」という欄があります。これは、ここで作成したフォームを固定ページで表示するために必要なテキストです。

ショートコードをクリックすると、テキストが選択状態になるのでコピーします。

図6:ショートコードをコピー

⑤ フォームを使いたい固定ページを開きます。

管理画面 左側のメニューから「固定ページ」をクリックして、一覧の中からフォームを設置したい固定ページをクリックします。

図7:一覧から、フォームを設置したい固定ページをクリック

⑥ 固定ページの編集画面が開きます。

設置したい場所に「段落」ブロックを作ります。図8では、見出しの下に段落ブロックを作成しています。

段落ブロックができたら、さきほどコピーしたショートコードを貼り付けます。これで該当のフォームが設置されます(図9参照)

図8:見出しの下に段落ブロックを作った例
図9:段落ブロックが
コンタクトフォーム用のブロックに変わった

⑦ プレビュー機能から、フォームが設置された固定ページを見ることができます。

フォームを確認できたら、下書きとして保存しておきましょう。

図10:プレビューから、フォームを設置した様子を確認できる
図11:下書きとして保存しよう

フォームの項目の編集

「参加希望日」の編集

ウェビナーやイベントは数日開催されることも多く、参加希望日を選んでもらう場面が考えられます。
ひな形にある日付のサンプルを編集してみましょう。

① 管理画面 左側のメニュー「お問合せフォーム編集」から設定を始めます。

「お問合せフォーム編集」をクリックすると、作成済みのフォームの一覧が表示されます。その中から、本頁の「準備」で新しく作成したフォームのタイトルをクリックします。

図12:新しく作ったフォームを選ぶ

② フォームの編集画面が開きます。

フォーム」というタブを選ぶと、フォームの内容を編集できる画面が表示されます。この編集欄の上部から「希望参加日」と書かれている項目を探します(図13参照)

図13:「フォーム」タブから「希望参加日」を見つけよう

③ 通常のテキストのほか様々なタグが使用されていますが、編集するのはこの中の一部です。

「参加希望日」はこの項目のタイトルとなります。タイトルを変えたい場合はここを置き換えます。

同じ項目の中に、選択候補となる日時が並んでいます。日時はそれぞれダブルクォーテーション(半角)で囲まれています。ダブルクォーテーションの中を希望の日時に置き換えてみましょう。

置き換えられたら、画面右側にある「保存」ボタンをクリックして保存します。

ひな形では、選択肢を3つ設定しています。選択肢の数は自由に増減できますが、その際はダブルクォーテーション(半角)と必ずセットで設定しましょう。

【選択肢を増やす】
最後の選択肢の後に、ダブルクォーテーションで囲んだ日時を追加します(図17参照)

【選択肢を減らす】
減らしたい選択肢を削除します。その際は、該当の選択肢を囲んでいるダブルクォーテーションも一緒に削除します(図18参照)

図14:タイトルや選択肢を置き換えてみよう
図15:タイトルや日時を変更した例
図16:変更後は「保存」ボタンをクリック
図17:選択肢を増やした例
図18:選択肢を減らした例

編集が終わったら、本頁の「準備」でフォームを設置した固定ページのプレビューで確認してみましょう。

項目の削除

ウェビナーやイベントの開催日が1日だけ等、参加希望日を選ぶ必要がないこともあります。そんな時は「参加希望日」の項目そのものを消去することができます。

① 既にフォームの編集画面を開いている方は②に進んでください。

これから編集画面を開く方は、管理画面 左側のメニュー「お問合せフォーム編集」から設定を始めます。

「お問合せフォーム編集」をクリックすると、作成済みのフォームの一覧が表示されます。その中から、本頁の「準備」で新しく作成したフォームのタイトルをクリックします。

図19:フォームの編集画面を開く

② フォームの編集画面が開きます。

フォーム」タブを選び、フォームの内容を編集できる画面を表示します。この編集欄の上部から「希望参加日」と書かれている項目を探します(図20参照)

図20:「参加希望日」を設定している部分

③ 「参加希望日」に関わる部分だけ削除します(図21参照)

他の項目に係る部分や、フォーム全体に設定されている1行目のテキストを消さないように注意しましょう。

間違って別の場所まで削除してしまったときは、慌てずに管理画面の左側にある「お問合せフォーム編集」メニューをクリックしてリストに戻りましょう。

図21:「参加希望日」に関わるひとかたまりのテキストを削除した

「参加希望日」と同様に、他の項目もそれぞれひとかたまりのテキストで構成されています。不要な項目は同様の手順で削除できますが、図22で示す部分は消さないように注意してください。

図22:ここは消さないように注意

フォームから送信されるメールの編集

今回作成したフォームから送信されるメールは、自社宛て、申込者宛ての2種類があります。自社のメールアドレスや名前の設定は、サイト作成の手引「お問合せフォームを編集する」の記事を参考にしてください。

フォームから不要な項目を削除した場合は、メール本文から該当の項目を削除しておきましょう。

図23:不要な項目は、メール本文からも削除しておく