この記事では、Hirameki 7のフォーム機能で利用できる各パーツについて説明しています。既存のヘルプセンターの記事よりも各パーツの細かな設定項目について説明をしていますので、初めての人だけでなく、さらに独自のカスタマイズをしたい方にもお勧めです。

 

 

１．シングルパーツとセットパーツ

Webサイト機能と同様に、フォーム機能でもパーツを選んで追加するだけでアンケートだけでなく、様々なフォームを作成することができます。パーツには２種類あり、入力形式の違いやフォームのレイアウト・デザインに使えるシングルパーツと郵便番号検索機能もついた住所や都道府県、誕生日などの日付を入力できるセットパーツとがあります。どちらも詳細については以下のヘルプセンター記事にてご案内がありますので、ご確認ください。

フォームを作成するセットパーツについて

フォームを作成するシングルパーツについて

 

これらのパーツ類は、フォーム設定画面より簡単に追加・削除を行うことができます。フォーム設定画面を開くには、フォームメニューのフォーム＞フォーム一覧のフォームタイトル、または右に表示される歯車アイコンより「内容を編集する」をクリックして開きます。

 

フォーム設定画面が開いたら、左側にあるパーツメニューよりドラッグ＆ドロップでパーツを追加することでき、追加されたパーツの右側にある「X」ボタンをクリックすることで削除することができます。

 

また、追加したパーツの表示順もドラッグ＆ドロップで入れ替えることができます。

設問の内容などに合わせて、パーツの種類を選んでいきましょう。

 

２．パーツ配置のコツ

Hirameki 7で作成できるフォームは、既存のWebページに埋め込んで利用いただくため、設問数が多くなると縦に長いページとなり、PCで閲覧していると何度もページスクロールをする必要が出て来てしまう場合があります。また、スマートフォンなどのモバイル端末で閲覧ていれば、何度もスワイプして移動しなければならず、途中離脱率が高くなると言われています。せっかく作ったアンケートです、できるだけ多くの人に最後まで回答してもらえるよう、パーツ配置をちょっと工夫してユーザーにストレスの少ないアンケートにしましょう。

 

具体的な例をご案内します。

利用するパーツは、

・ステップ

・質問用パーツ

・改ページ

の３つです。もちろんお好みや必要に応じてテキストパーツや余白パーツなども入れてもらっても構いません。基本となるのは、この３つのパーツとなります。

このようにパーツを並べて作成すると、以下の動画のようにページ遷移（URLの変更なしに）１画面で１問が表示されるアンケートが作成できます。

 

 

もちろん、設問の内容や文字数などによって必ずしも１画面で１問が良いという訳ではありませんので、必ずこうしなければいけないというものではありません。ただ、パーツの配置を工夫するだけで大きく見え方が変わって来ますので、意識して改ページパーツやステップパーツを使って見てください。

 

３．パーツ設定のコツ

Hirameki 7のフォーム機能で使えるパーツにはそれぞれ設定メニューが用意されています。追加されたパーツをクリックすると、設定画面が開いて来て、そこで様々な設定を行うことができます。一例を上げると、チェックボックスパーツの場合は、設定画面を開くとチェックボックスで選んでもらえる選択肢を設定できたりします。

その他にタイトルや注釈など様々な設定項目があり、目に見える設定項目はプレビューを見ながら調整いただくこともできるのですが、設定項目の中にはプレビューには表れないものもいくつかありますので、ここではその設定項目について説明します。

 

ラベルと値

この項目は厳密に言えば、プレビューにも表れる項目でもあるのですが、「値」についてはプレビューには表れない項目です。この「値」というものは、ユーザーが回答したデータ内でどう表示されるかを設定する内容になっています。例えば下記の画像のように値にラベルと同じ内容が入っている場合、回答データを確認すると回答データも「インターネット」などラベルで設定した内容が入ります。

 

一方で、「値」に数字などを設定しておくと、回答データで確認できるデータも数字が入力されます。

 

値に数値を入れる場合は、既にシステムが組み上がっていたり、統計ソフトなどを使う場合などにご利用いただけます。また、回答はCSVファイルとしてダウンロードできますので、その際に扱い易い形を指定いただくと良いでしょう。

 

Id属性とClass属性付加（◯◯属性とパーツ属性）

Id属性は、後ほど説明するフォームのデザイン面などでのカスタマイズで利用できる項目です。Id属性は、既存のWebサイトやHirameki 7で作成したWebサイトに作成したアンケートを埋め込んだ際にアンカーリンク（ページ内リンク）などを設定いただく際に利用できます。また、Class属性はCSSでデザインを調整する際にご利用いただけます。◯◯属性は、追加したパーツの各要素のIdやClassを指定することができます。既存のWebサイトで使われているCSSなどを反映させる場合などはClass属性の内容を変更していただくことでフォントなどの変更が可能です。

 

 

４．デザインのカスタマイズ方法

追加したパーツはClass属性を使いCSSでデザインのカスタマイズをすることができます。フォーム編集画面の上部に表示される「タグ・CSS・Js」をクリックし、更に表示された左上部にある「CSS」をクリックして表示されるコード編集画面に登録されているCSSコードを編集、あるいは指定したClassにCSSを付与することができます。

 

 

例えば、以下のようにラジオボタンを横並びに表示させ、５段階評価で表示させたいという場合には、CSSコードを編集することによって実現が可能です。

 

 

この変更は、以下の手順で変更します。

 

「タグ・CSS・Js」画面より、「CSS」をクリックします。左側のパーツ名をクリックし変更したいCSSのClassを探します。

 

CSSの左側メニューにある「ラジオボタン」をクリックします。右側のコード編集画面にいくつかのコードが表示されますので、その中より以下のコードを探します。

.xhm-radio ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

こちらのコードを以下のように変更します。

.xhm-radio ul li {
display: -webkit-box;
display: -ms-flexbox;
display: inline;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}