ロゴ

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]

「メール」タブから自動返信メールの編集画面に移り、
入力フォームに入力された内容を反映したい箇所にメールタグを配置します。

削除した入力フォームのメールタグを取り除く

不要になり削除した項目は、自動送信メールからも取り除きましょう。

コメントを書く

下記項目すべて入力のうえ、コメントしてください。

関連記事

pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status