お問い合わせフォームを作ってみよう その2 ~回答形式 記入回答系~

2017.12.25

このエントリーをはてなブックマークに追加

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

前回のGroopで作ってみよう!の予告通り、今回はお問い合わせフォームの回答形式を紹介します。

 

 

***  回答形式 その1 ~記入回答系~  ***

 

Groopで用意されている回答形式は12種類!

 

   

 

これらの形式を、回答してほしい項目ごとに組み合わせてフォームを作ります( ・ω・)∩

 

 

●記入回答(1行)

記入回答(1行)はテキストボックス形式のフォームです。

文字数、前後の添字、注釈、そして入力チェックの設定が可能です。

 

・サイズ

最大文字数、ピクセル数、パーセントのどれか一つを選び、入力欄の大きさを決められます。

 

・添字

文字を記入すると、入力欄の前後に記入した文字が表示されます。

 

・注釈

注釈を記入すると、入力欄の下にその文章が入ります。

 

・入力チェック

入力チェックは指定の文字しか入力できないようにする項目です。

主にメールアドレスや電話番号など、決まった文字を入れてほしい時に使用します。

 

選べるチェックは5種類。

 

全角文字で入力してほしい項目は「全角文字のみ」(使用例:名前やふりがな等)

アルファベットと数字で入力してほしい項目は「半角英数のみ」(使用例:IDやパスワード等)

数字のみで入力してほしい項目は「半角数字のみ」(使用例:希望の個数や人数等)

メールアドレスと電話番号・郵便番号はそれらを入れて欲しい場合に使用します。

 

下の画像は「全角文字のみ」で設定しているところに半角文字を入力した場合。

 

指定以外の文字を入力すると送信の時に赤文字で確認の文章が出てくるので便利です。

 

 

●記入回答(2行・入力値チェック)

記入回答(2行・入力値チェック)もテキストボックス形式のフォームです。

2行の入力欄に同じ内容を入力してもらい、内容があっているか確認ができます。

 

入力した内容が一致しない場合は赤文字で確認の文章が出てきます。

 

 

メールアドレスなど、間違え易い項目の確認としてよく使用されます。

 

編集画面は記入回答(1行)と同じ内容です。

違う部分は、入力欄が2行になるので添字も2行になっています。

 

 

●記入回答(1行・分割入力)

記入回答(1行・分割入力)は1行の入力枠が分かれているテキストボックス形式のフォームです。

 

フォーム設定の、サイズ、添字、注釈、入力チェックは他と同じ仕様です。

追加されている部分は「分割」と「結合文字」の項目。

 

・分割

分割の項目は「2分割」と「3分割」の2種から選択できます。

 

・結合文字

分割入力された文字を繋げるための文字です。

 

記入回答(1行・分割入力)のわかりやすい使用例は「お名前」の入力欄ですね。

日本語名なら2分割で「苗字」「名前」。

英語名なら3分割で「First name」・「Middle name」・「Last name」など。

分割数と結合文字を上手く組み合せると色々なものに汎用できます。

 

 

●記入回答(複数行)

記入回答(複数行)はテキストエリア形式で複数行の入力ができるフォームです。

お問い合わせ内容など、文章をたくさん入力する可能性がある箇所によく使用されます。

設定できるのは枠サイズと注釈。

注釈はこれまでと同じです。

枠サイズは、行(縦)と列(横)に設定したい最大文字数(半角文字換算)を入れます。

すると、設定した大きさの枠が表示されます。

 

下の画像は「10行・60列」で設定したフォームに半角数字を入力してみました。

きちんと文字数が反映されていることがわかります。

「枠サイズ」は名前のとおり表示する枠のサイズなので、お問い合わせで入力する時はこれよりも長い文章が入ります(≧ω≦)

 

 

 

結構長くなってしまったので、今回は記入回答まで(>ω<;)

回答形式の続きは次回の「Groopで作ってみよう」で紹介します♪

 

 

 

 

 

 ↓↓↓ Groopを試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

コメント

コメントフォーム

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP