HRサイトには最初からエントリーフォームが用意されており、全てのページに表示されます。
エントリーフォームの項目は自由に変更することができます。
この記事では、エントリーフォームの項目の編集方法についてご説明します。
エントリーフォームの構造について
エントリーフォームの編集は、サイドメニューの
「エントリーフォーム設定」>「エントリーフォーム編集」から行います。
エントリーフォームのHTMLタグ
エントリーフォームは以下のようにHTMLで形成されています。
<div id="recruit-form"> <dl> <dt>応募種別<span class="required">必須</span></dt> <dd>[radio select use_label_element default:1 "新卒採用" "中途採用" "パート・アルバイト"]</dd> <dt>ご応募内容<span class="required">必須</span></dt> <dd>[checkbox* contents use_label_element default:1 "まずは話を聞いてみたい" "説明会に参加したい" "資料請求" "面接希望"]</dd> . . . <dt>その他</dt> <dd>[textarea other]</dd> </dl> <p class="submit">[submit "送信"]</p> </div>
このうち、<dt>タグと<dd>タグがセットになり1つの入力項目を形成しています。
エントリーフォームの項目を追加したり削除するときは、
この<dt>タグと<dd>タグを編集していきます。
<dt>タグと<dd>タグの意味
HTMLタグ | 意味 | |
---|---|---|
<dt> 項目のタイトル名 </dt> | 項目のタイトルを表します。 | 直下の<dd></dd>タグとセットで書くと横並びになり、一つの項目を形成します。 |
<dd> … </dd> | 項目の入力形式部分を表します。 | 直上の<dt></dt>タグとセットで書くと横並びになり、一つの項目を形成します。 <dd>と</dd>の間には、後述するフォームタグを記述します。 |
エントリーフォームの項目を増やす
1. dtタグとddタグを用意する
以下のコードをコピーしてください。
<dt>項目のタイトル</dt> <dd>ここにフォームタグを入力</dd>
必須項目の場合は、以下のコードをコピーしてください。
<dt>項目のタイトル<span class="required">必須</span></dt> <dd>ここにフォームタグを入力</dd>
コピーしたコードを、<dl>タグと</dl>タグの間の任意の位置に貼り付けてください。
貼り付けたあと、<dt></dt>の間に項目のタイトル名を記入します。
2. フォームタグを選択する
先程、貼り付けたしたコードの、<dd></dd>の間に入れる、フォームタグを選択します。
編集画面上部のボタンから、配置したいフォームタグをクリックして設定画面を開きます。
フォームタグの種類
フォームタグの種類は、入力される情報の内容によって決めましょう。
下記の表を参考にしてください。
ボタン名 | 形式 | フォームタグ |
---|---|---|
テキスト | 単一行の自由入力欄を作成します。 | [text フォームの名前] |
メールアドレス | メールアドレスの入力欄を作成します。 | [email フォームの名前] |
URL | URLの入力欄を作成します。 | [url フォームの名前] |
電話番号 | 電話番号の入力欄を作成します。 | [tel フォームの名前] |
数値 | 数値の入力欄を作成します。数値の下限・上限を設定することができます。 | [number フォームの名前] |
日付 | 日付の入力欄を作成します。カレンダー形式で日付を選ぶ機能が自動で付加されます。 | [date フォームの名前] |
テキストエリア | 複数行の自由入力欄を作成します。 | [textarea フォームの名前] |
ドロップダウンメニュー | 用意した選択肢を選択させるドロップダウンメニューを作成します。 | [select フォームの名前 “項目1” “項目2”] |
チェックボックス | 複数の選択肢を選ぶことのできるチェックボックスを作成します。 | [checkbox フォームの名前 “項目1” “項目2”] |
ラジオボタン | 選択肢の中から一つのみ選択できるラジオボタンを作成します。 | [radio フォームの名前 あらかじめ選択させる項目 “項目1” “項目2”] |
配置したいフォームタグをクリックしたら、設定を行います。
フォームの種類によって設定が異なります。以下を参考に設定をしてください。
共通の設定項目
項目タイプ | チェックを入れるとその項目が必須項目となり、入力されていなかった場合にエラーを表示します。ユーザーの入力漏れを防ぐことができます。 |
---|---|
名前 | 「メールタグ」(後述)で使用する名前を付けます。英数字で |
ID属性 | 入力する必要はありません。 |
クラス属性 | 入力する必要はありません。 |
テキスト・メールアドレス・URL・電話番号の設定・テキストエリア
デフォルト値 | 入力欄にあらかじめ表示するテキストを指定します。 ユーザーに入力してほしい内容を示すことができます。 「プレースホルダーとして使用する」にチェックを入れると、文字の入力と同時に表示が消えるようになります。 |
---|
数値
項目タイプ | スピンボックス:クリックして数字を入力する形式 スライダー:スライダーを動かして数字を入力する形式 |
---|---|
範囲 | 最小の値(下限)と最大の値(上限)を設定することができます。 範囲に該当しない値が入力された際にエラーを表示します。 |
日付
範囲 | 最小の値(下限)と最大の値(上限)を設定することができます。 範囲に該当しない値が入力された際にエラーを表示します。 |
---|
ドロップダウンメニュー
オプション | メニューの選択肢を1項目ずつ改行して入力します。 |
---|---|
複数選択 | チェックを入れると複数選択が可能になります。 |
空の項目を先頭に挿入する | チェックを入れると先頭に空の選択肢「—–」が挿入されます。 |
チェックボックス・ラジオボタン
オプション | メニューの選択肢を1項目ずつ改行して入力します。 |
---|---|
ラベルを前に、チェックボックスを後に配置する | ラベル(オプションで選択した選択肢名)の後ろにチェックボックス・ラジオボタンを配置します。 |
チェックボックスを排他化する | 複数選択が不可能になります(チェックボックスのみ)。 |
送信ボタン
初期状態から送信ボタンが実装されているため、編集する必要はありません。
誤って送信ボタンのタグを削除してしまった場合は、以下のタグを最終行の「</div>」の真上に挿入してください。
<p class="submit">[submit "送信"]</p>
3. フォームタグを配置する
フォームタグの設定が完了したら、フォームタグを配置します。
「タグを挿入」をクリックして、<dd></dd>の間にコードを配置しましょう。
「タグを挿入」ボタンの左に表示されているコードがフォームタグです。
たとえばメールの入力フォームを配置する場合は、以下のように配置します。
<dt>メールアドレス</dt> <dd>[email your-email]</dd>
この例では [email your-email] がフォームタグです。
以上のコードで、「メールアドレス」というタイトルのメールアドレス入力欄が完成します。
以上の手順で、エントリーフォームの入力項目を増やすことができます。
エントリーフォームの不要な項目を削除する
不要な項目を削除したいときは、該当する<dt>~</dt>と<dd>~</dd>をまとめて削除します。
自動返信メールに変更を反映する
エントリーフォームに入力された情報は、自動的にエントリー者と御社に送信されます。
フォームの項目を追加 / 削除した場合、自動送信されるメールの内容を編集する必要があります。
「メールタグ」について
フォームに入力された内容は、「メールタグ」で自動送信メールに反映されます。
メールタグとは以下のものを指します。
たとえば、「your-name」という名前を持つテキストエリアに入力された情報は、
[your-name]というメールタグの配置された箇所に反映されます。
追加した入力フォームのメールタグを配置する
追加した入力フォームの名前は以下の場所で確認できます。
名前を[ ]で囲うことで、メールタグとして使用できます。
[入力フォームの名前] 例) 名前が「your-name」の場合→ [your-name]
「メール」タブから自動返信メールの編集画面に移り、
入力フォームに入力された内容を反映したい箇所にメールタグを配置します。
削除した入力フォームのメールタグを取り除く
不要になり削除した項目は、自動送信メールからも取り除きましょう。