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

挿絵

SSL標準装備の無料メールフォーム作成・管理ツール | フォームメーラーのFree(無料)版で、一言メールフォームを作ります。(CGI不可のときお奨め)

*1 詳しくは、自身所有のドメイン(別のサーバー)内に、フォームメーラーを設置できますか。へ。

長いのでまとめから

あとは何とかなります!

最小限の設定で作る

最小限の設定で話しを進めます。実際はお好みで設定してください。※説明のため画像加工しています

簡単な流れ

  1. ログインする
  2. フォームの素を作る
  3. 一言入力欄を作る
  4. 公開・外部サイト設置をチェック
  5. 自分のページにコードを貼る

*メッセージ

Powered by FormMailer.

(1)ログインする

(2)フォームの素を作る

※無料版は5個まで

1.フォーム作成画面の右上[一般フォームを作成]ボタンをクリックする
※ウィンドウサイズが小さい場合、右に隠れています。
f1.png(8328 byte)

2.「フォーム名:一言メール」「テンプレート選択:使わない」で、設定を保存する
1_80.png(23461 byte)

3.一言メールができたら、その[入力項目編集]をクリック
f3.png(8414 byte)

(3)入力項目編集を行う

※無料版は7項目まで

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

2.作ったテキストエリアにカーソルを合わせダブルクリックか、カーソルを合わせると出現する鉛筆をクリックする
opo.png(3163 byte)

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

※表示設定:表示しない にしておくと後でコード改変の箇所が少なくなって楽です。
uhkhk.png(8657 byte)

次の環境設定へ。

(4)環境設定を行う

1.[入力項目編集]の横、[環境設定]タブをクリック
kankyou.png(11659 byte)

2.公開設定で[公開する]をチェック。
56546.png(19195 byte)

ページ下の[設定を保存する]をクリック。
hozon.png(3637 byte)

3.[各種画面設定]の入力画面設定にある[外部サイトに設置する]にチェック。
4-3.png(8595 byte)

ページ下の[設定を保存する]をクリック。
hozon.png(3637 byte)

(5)コード表示

次に、[コード表示]タブをクリック。
5-0.png(4851 byte)

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

5-1.png(9488 byte)

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

  1. 自分で用意したHTMLファイルのソースを表示する
  2. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">を、<head>よりあと<title>より前、日本語の出現前*2に挿入する
    (下記例の場合、キーワードが日本語なので、それより前。)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="キーワード*2">
<title>ページタイトル</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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

※文字コード宣言をShift_JISにして、HTMLファイル保存を別の文字コードにすると、文字化けの原因になります。

(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>

*は必須項目です

<!-- textarea -->
<p>*メッセージ</p>
<p>
<textarea name="field_******" cols="30" rows="1"></textarea>

</p>



<!-- charset -->
<!-- charset -->
<!-- paypal no confirm alert -->

<!-- paypal no confirm alert -->
<p>
<input name="submit" type="submit" value="確認画面へ"></p>
<!-- PayPal Logo -->

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

補足

<h1>一言メール</h1> *は必須項目ですは、フォームの動作には関係ないので消しました。入力項目編集で表示設定:表示しないにしておくと元々非表示になります。

改変で特に重要なこと

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

完成予想図

*メッセージ

Powered by FormMailer.

上記フォームの設定

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

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

設定を変更したら必ずコードを貼りなおしてください。複数フォームを作れますので、稼動中と作成中のフォームは別にできます。

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

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

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

5_80.png(6532 byte)

環境設定の項目(無料版の場合)

公開設定
各種画面設定
各種メール設定
フィルタリング設定
トラッキングコード設定
その他表示設定

画面確認・デザイン変更

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

※フォームメーラーの送信確認画面と、送信完了画面は、デザイン変更が反映されます。

確認画面と送信完了画面は自作できる?

送信完了画面は、自分のサイトに完了画面ページを作って、そこをリダイレクトURLに設定する方法で変更できます。

確認画面は非表示にできますが、自作ページは使えません。

※フォームメーラー管理画面のデザイン変更で、背景の変更等はできます。

送信テスト

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

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


旧フォームメーラーページ(現在は使用できません)