HP運営ブログ

2017年12月のブログアーカイブ

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

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

中村@新人です。

 

前回の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を試してみたくなった方はこちらからどうぞ ↓↓↓ 

 

 

 

2017.12.11.初心者さんのためのミニWEB語録 *** フォームの種類 ***

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

中村@新人です。

 

前回紹介した「お問い合わせフォームの作り方」

その2の紹介の前に、知っておくと便利なWEB語録を紹介します!

 

 

***  フォームの形式や名前  ***

 

お問い合わせ等のフォームで使用されている部分にも名前が色々あるのです(*´ω`*)

今回はフォームでよく使用されている形式を説明していきます!

 

 

 

●テキストボックス

テキスト形式で文章を「一行だけ」入力できる形式です。

名前や住所、メールアドレスなど、自分で入力する項目で使用します。

基本的に使われる頻度は最も多い形式で、「数字だけ」や「アルファベットだけ」など、指定した文字のみしか入力できないように設定されている場合もあったり、かなり応用の利く形式でもあります。

 

 

●テキストエリア

こちらもテキスト形式で文章を入力できる形式です。

テキストボックスとの違いは、複数行を入力できること(・∀・)っ

改行ができるので、お問い合わせの内容やアンケート内容等の長い文章を入力する時に使用します。

 

 

●ラジオボタン

あらかじめ設定しておいた選択肢を○をクリックして、一つだけ選択してもらう形式です。

良い悪いなどの評価や有無、参加不参加などの項目で使用されることが多いです。

選択肢が多すぎると見づらくなるので、あまり選択肢の数が多くない場合におススメします。

 

 

●セレクトボックス

これも、決まっている内容を一つだけ選んでもらう項目で使用します。

あらかじめ設定しておいた項目がプルダウン(下にぴょこっと出てくる形)で選択できる形式です。

ラジオボタンより、選択肢が多い時に使用することが多いです。

 

 

●チェックボックス

あらかじめ設定した選択肢を、□部分をクリックして複数選べる形式です。

オン・オフの機能がついているので、チェックのついた□部分をクリックするとチェックを外すことができます。

「該当するもの全てにチェックしてください」といったアンケートの複数選択によく使用されます。

 

 

●ファイルボックス

フォームを使用する人が画像などのファイルを投稿(添付)できる機能です。

例えば、求人フォーム等を作って募集をした時、履歴書を添付で送ってもらえると便利ですよね(´∀`)ノ

問い合わせをする人や回答される人に事前に資料を用意してもらいたい場合に使用します。

 

 

 

基本的な形式は上記くらいで、これらの形式を応用して色々な入力の機能がついていく形なのです。

同じ項目でも、ラジオボタンにするかセレクトボックスにするか…などなど、項目×形式の組み合わせは多岐にわたります!

色々な形式を使用して、必要な情報を入力してもらえるフォームをくみ上げましょう(≧ω≦)

 

 

 

無料で今すぐ作ってみる

ブログ内検索

フィード

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

PAGE TOP