コンテンツに飛ぶ | ナビゲーションに飛ぶ

お問い合わせフォームの利用
 

お問い合わせフォームの利用

目次

 

概要

ホームページ閲覧者がWeb画面上から,指定されたメールアドレス宛に「お問い合わせ」などを送信することができます.
「お問い合わせ」フォームの項目については,フォームを任意で作成してください.

なお,お問い合わせフォームは,「グループWebページサービス」,「Webサーバホスティングサービス」のみご利用いただけます.個人Webではご利用いただくことができませんので,ご注意ください.
デザインは統一されており,ほぼ変更することはできません.

 

お問い合わせフォームファイルの作成

テキストエディタ等でhtmlファイルを2つ作成してください.ファイルの名前は任意でかまいません.テキストエディタは後述するように文字コードをUTF8に指定して保存できるものをご利用ください.

    作成するhtmlファイル
    • お問い合わせフォーム本体
    • お問い合わせ受付完了

 

お問い合わせフォームファイルのアップロード

作成したメールフォームファイルを,WinSCP等を用いてWebサーバにアップロードします.

 

HTMLファイルの設定例

以下を参考に,HTMLファイルにお問い合わせフォームの記述を追加してください.
HTMLファイルを保存する時は,文字コードをUTF-8に指定してください.(UTF-8以外の文字コードで保存すると,アップロード後に文字化けをおこします)

 

お問い合わせフォームの基本的な書き方


最少構成:返信先メールアドレスだけを入力し,送信する,シンプルなメールフォームです.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ※1
    </head>

    <body>
    <form method="post" action="https://cgi.center.kobe-u.ac.jp/cgi-bin/mailform/mailform.cgi"> ※2
    <input type="hidden" name="_sendto" value="xxxx&#64;port.kobe-u.ac.jp"> ※3
    <input type="hidden" name="_subject" value="ホームページよりお問い合わせがありました"> ※4
    <input type="hidden" name="_redirect" value="http://www.research.kobe-u.ac.jp/istc-xxx/thankyou.html"> ※5
    メールアドレス:<input type="text" name="email" size="30"><br> ※6
    <input type="submit" value="送信する"> ※7
    </form>
    </body>
    </html>

    【解説】
    ※1アップロード後,文字化けをおこさないための文字コード指定タグです.このまま記述してください.
    ※2 動かすCGIサーバの記述です.入力した内容を暗号化して送信します.このまま記入してください.
    ※3 入力されたお問い合わせ内容を受け取るメールアドレスを記述してください.ロボットの自動アドレス収集による迷惑メール防止対策として,アットマークを数値文字で書く方法があります(半角で&#64;と記載するとWeb画面ではアットマークとして表示さます)
    ※4 お問い合わせフォームを受け取るメールの件名です.赤字部分に件名で表示したい文字を入力してください
    ※5 ユーザがお問い合わせ内容を入力後,送信ボタンを押した後に移動し表示されるWebページです.赤字部分に表示したいWebページのURLを記入してください
    ※6 ユーザが画面で入力する部分です.太字部分のname="email"は固定変更できません
    ※7 お問い合わせフォームを入力後,送信するボタンの部分です.赤字部分に表示したい文字を入力してください.

    ※5で送信ボタンを押した後に移動し表示されるWebページ(例 /thankyou.html)

    <html>
    <body>
    <center>
    <h2>お問い合わせを受け付けました</h2><br>
    折り返し,確認のメールをお送りします.確認のメールが届かない場合には,お手数ですがxxxまでお問い合わせください.<p>
    情報基盤センター<br>
    </center>
    </body>
    </html>

     

    ※ 送信フォームの不具合で問い合わせが消失することを避けるために,以下の運用をお薦めします.

    • 完了画面には「お問い合わせを受け付けました.折り返し,確認のメールを送信します.確認のメールが届かない場合には,お手数ですがxxxまでお問い合わせください.」などの文言を入れる.
    • お問い合わせフォームからのメールが配信されたら,折り返し,確認メールを送信する.

       

 

少し項目を増やしたお問い合わせフォームの書き方(例)


最少項目のフォームに,いくつかの項目を増やしたフォームです.用件欄は,右側の▼(選択)ボタンをクリックすると,いくつかの項目から選択することができるようになっています.増やしたい項目は,任意でフォームを作成してください.
HTMLファイルを保存する時は,文字コードをUTF-8に指定してください.(UTF-8以外の文字コードで保存すると,アップロード後に文字化けをおこします)


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

    <body>
    <form method="post" action="https://cgi.center.kobe-u.ac.jp/cgi-bin/mailform/mailform.cgi">
    <input type="hidden" name="_sendto" value="××××&#64;port.kobe-u.ac.jp">
    <input type="hidden" name="_subject" value="ホームページよりお問い合わせがありました">
    <input type="hidden" name="_redirect" value="http://www.research.kobe-u.ac.jp/istc-xxx/thankyou.html">
    お名前 : <input type="text" name="お名前" size="25"><br>
    所属 : <input type="text" name="所属" size="50"><br>
    内線番号 : <input type="text" name="内線番号" size="25"><br>
    用件 :
    <select name="用件">
    <option selected value="">未入力
    <option value="問い合わせ">問い合わせ
    <option value="その他">その他
    </select>
    メールアドレス : <input type="text" name="email" size="30"><br>
    質問内容 : <textarea name="質問内容" rows="5" cols="50">具体的に記入してください.</textarea><br>
    <input type="submit" value="送信する"><input type="reset" value="リセット">
    </form>
    </body>
    </html>

 

フォーム例

 

inputではじまるタグ
type="text" 1行テキストボックスをつくります.通常のテキストを入力するフィールドです.2行以上にわたる長い文章を入力させたい場合には,<TEXTAREA>~</TEXTAREA>を使用します.
type="checkbox" チェックボックスをつくります.チェックボックスは複数選択が可能です.checked属性を指定すると,その項目についてはあらかじめチェックの付いた状態となります.
type="radio" ラジオボタンをつくります.複数の中から一つしか選択できない点がチェックボックスと異なります.複数を一つのグループとして認識させるには,name属性で同じ名前を付けてください.checked属性を指定すると,その項目についてはあらかじめチェックの付いた状態となります.
type="hidden" 隠しデータをサーバに送信する際に使用します.このタイプのデータは,画面上には表示されませんが,value属性で指定した値がサーバへ送信されます.
type="submit" 送信ボタンをつくります.
type="reset" リセットボタンをつくります.このボタンを押すと,それまでに入力した情報をキャンセルして初期状態に戻します.
type="button" 汎用ボタンをつくります.
type="image"

画像のボタンをつくります.使用する画像ファイルはsrc属性で指定してください.またalt属性が必須となります.

 

selectではじまるタグ

フォームでセレクトボックスを作成することができます.size属性を指定して,2以上になった場合は,リストボックス形式のメニューになります.selectタグはメニューを定義し,optionタグはで項目を適宜します.

    size=”(指定行数の数字)”
    セレクトボックスの行数を指定することができます.
    name=”(セレクトボックス名)”
    セレクトボックスの名前を指定することができます
    multiple
    複数の項目を選択可能にします

 

textareaではじまるタグ

<textarea 属性="値">~</textarea>の~部分に文章を記入しておくと,あらかじめ入力された形で表示されます.「入力してください」などのテキストを記述しておくことでガイド的な使い方が可能です.テキストは複数行にわたって入力することができます.なお,textarea要素内は,テキストのみと仕様で定められているため,HTMLソースを入れる時はタグの<>などは文字参照に変換して書かなければなりません.

    cols="(数値)" 横の長さを指定する
    rows="(数値)"
    行数を指定する
    name="(名前)" フィールド名

 

動作確認

実際にメールフォームが正確に設定されているかどうかを確認するために,Safari などのブラウザでお問い合わせフォームを設定したURLにアクセスし,テスト送信してください.

 

フォームの暗号化について

フォームのCGIサーバにはサーバ証明書を導入しています.入力フォーム(http://)にデータ入力後,送信ボタンを押すと暗号化通信(https://)されます.