一言メールフォーム設置 -レンタルCGI編-その２

フォームメーラーFree(無料)版で、投票機能付き（集計グラフ表示）の一言メールフォームを作ります。

挿し絵

※フォームメーラーは、埋め込みにも対応*1していますが、HTMLコード改変は、動作保証・サポート外です。
（当サイトでもサポートしておりません）

*1 詳しくは、FAQ よくあるご質問の「機能について」の「Q.自身所有のドメイン（別のサーバー）内に、フォームメーラーを設置できますか。」へ。

最小限の設定で作る

最小限の設定で話しを進めます。実際はお好みで設定してください。 無料版の投票フォームは1つまで（アンケート１問[10選択]＋名前やメッセージなど通常の項目が７まで）です。

簡単な流れ

  1. ログインする
  2. 投票フォームの素を作る
  3. アンケート項目を作る
  4. テキストフィールドを作る
  5. 公開・外部サイト設置をチェック
  6. 自分のページにコードを貼る

*好きな果物は？ メッセージ

Powered by FormMailer.


（1）ログインする

（2）投票フォームの素を作る

※無料版は1個まで

1.フォーム作成の画面右上にある[投票フォームを作成]ボタンをクリックする
※一般フォームとはボタンが別です。
※ウィンドウサイズが小さい場合、右に隠れています。

2.「フォーム名：投票フォーム」で、設定を保存する
1_80.png(23461 byte)

3.投票フォームができたら、その[入力項目編集]をクリック
2_80.png(14338 byte)

（3）入力項目編集を行う

※無料版は7項目まで

1.画面右側のアンケート項目に、カーソルを合わせダブルクリックか、鉛筆をクリックする。
r5.png(8521 byte)

3. 項目名 選択肢 項目タイプを決めて、設定を保存する
r5.png(8521 byte)

※アンケート項目は入力必須。

※項目タイプ
「選択肢が少ない→ラジオボタン、
選択肢が多い→リストメニュー、
複数選択可→チェックボックス」がおすすめです。

今回の例では、省スペースで楽という理由でリストメニューを選びました 。


※１行あたりの配置数
項目タイプがリストメニューの場合は関係ありません。

1.[テキストエリア]を画面右側へドラッグ＆ドロップする ※[テキストフィールド]でもOK
3_80.png(36239 byte)

2.作られたテキストエリアにカーソルを合わせダブルクリックか、鉛筆をクリックする
4_80.png(5970 byte)

3.「項目名：メッセージ」「入力必須をチェック」「行数1」で、設定を保存する
5_80.png(23953 byte)
※文字制約は、例えば半角数字に設定すると、半角数字以外の入力は送信エラーになる機能。「確実に半角で入力して！」というときに便利。簡易スパムチェックになるかも。

次の環境設定へ。

（4）環境設定を行う

1.[入力項目編集]の横、[環境設定]タブをクリック。

2.公開設定で[公開する]をチェック。ページ下の[設定を保存する]をクリック。

3.次に、環境設定ページの左側メニュー[各種画面設定]をクリック。

4.入力画面設定の[外部サイトに設置する]にチェック。[設定を保存する]をクリック。

（5）コード表示

次に、[コード表示]タブをクリック。

  1. HTMLコードの[form要素のみのコード]をクリック
  2. コードをコピーして、自分で用意したページに貼る

7_80.png(60493 byte)

文字化け対策　（Free版のHTMLコードを使うページのみ）

  1. 自分で用意したHTMLファイルのソースを表示する
  2. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">を、<head>よりあと<title>より前に挿入する
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>

※head内に以下の記述がある場合は消しておく
※Free版の文字コードはShift_JIS
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

（5-2）コード改変

発行されたコードはp（段落）で整っていますが、気になる場合はコードを改変してください。

例えばコードが以下の場合、紫字の箇所を消すと、一行フォームに見えます。
※実際に発行されるコードとは異なります。 

<form action="https://ssl.form-mailer.jp/fm/service/Forms/confirm" method="post" name="form1" ENCTYPE="multipart/form-data">
<input type="hidden" name="key" value="************" >
<h1>投票フォーム</h1>

*は必須項目です

<!-- vote -->

<p>*好きな果物は？</p>
<p><select name="vote_field">
<option value="">------</option>
<option value="0">みかん</option>
<option value="1">りんご</option>
<option value="2">いちご</option>
<option value="3">もも</option>
<option value="4">ぶどう</option>
<option value="5">内緒</option>
</select>
</p>

<!-- vote -->
<!-- textarea -->
<p>メッセージ</p>
<p>

<textarea name="field_*****" cols="30" rows="1"></textarea>

</p>



<!-- charset -->
<!-- charset -->
<p><input name="submit" type="submit" value="確認画面へ">

</p>
<p><a href="http://www.form-mailer.jp/" target="_blank" id="powered" align="">Powered by FormMailer.</a></p>
</form>

補足

<h1>一言メール</h1> *は必須項目ですは、フォームの動作には関係ないので消しました。

改変で特に重要なこと

その他・詳しくはFAQ よくあるご質問｜フォームメーラーへ。

完成予想図

*好きな果物は？ メッセージ

Powered by FormMailer.

上記フォームの設定

投票フォームのアンケート項目は、必須項目になります。

あとからフォームの設定変更をする場合

  1. フォームメーラーにログインして、入力項目編集・環境設定する
  2. 前に貼ったコードをすべて消す。新しいコードを貼る。

設定を変更したら必ずコードを貼りなおしてください。

入力項目編集：テキストフィールド

入力文字数を決める
  • 「文字数制限」に数字を入力する
  • 「注釈」に【○文字まで】と書いておく
サイズを変更する
  • 「サイズ」の数値を変える。

文字を入力しておく
  • 「初期値」に文字を入力。

 5_80.png(6532 byte)

環境設定の項目

公開設定
各種画面設定
メール設定
フィルタリング設定
その他表示設定

画面確認・デザイン変更

一言メールフォームは、[form要素のみのコード]で作成するため、デザインを選択しても影響しません 。

送信テスト

自分の元にメールが届くかテストしてください。

「現在受け付けておりません」となった場合、環境設定で[公開する]にしたか・送信制限をしていないか、確認してください。

円グラフはログインしてレポートを確認してください。