▲PAGE TOP

2014年4月23日水曜日

お問い合わせフォームを設置する



  1. ページ>新しいページ をクリックする
  2. ページ名に「お問い合せ」(任意)を入力
  3. コンテンツに以下のタグを入力する
  4. CSSを適当に編集する
  5. ボタンを絶対パスに変更する
  6. cgiのアドレスを絶対パスで入力する
  7. 公開をクリックして終了


<style>

/* タイトル部分の各種指定
======================================================= */
#title-table { width:650px; padding:10px; }
/* タイトル文字左のアクセントの幅と色の設定 */
#title-left { width:5px; background-color:#cc0000; }
/* タイトル文字の設定 */
#font-title { font-size:15px ; font-weight:bold ; color:#333333 ; }
/* 罫線hr コメント領域の指定
======================================================= */
hr.header { height:1px; border:none ; border-top:1px #888888 solid ;  }
/* コメント領域のテーブルと文字色の各種指定
======================================================= */
table.coment-table { width:650px ; padding:10px ; }
#font-coment { color:#444444 ; line-height:150% ; }
#font-caution { color:#cc0000 ; line-height:150% ; }
/* 入力フォーム領域のテーブルと文字色の各種指定
======================================================= */
#form-table { width:650px ; padding:10px ; }
/* 入力タイトルの文字色 */
#font-form { color:#777777; }
/* 入力タイトルの文字色 */
#font-needs { color:#cc0000; }
/* 入力フォーム奇数段の背景色 */
#tr-form1 { background-color:#d2d2d2 ; padding:10px ; }
/* 入力フォーム偶数段の背景色 */
#tr-form2 { background-color:#eaeaea ; padding:10px ; }
/* 入力フォームのpadding設定 */
#td-form { padding:10px; }
/* フォーム入力枠内の各種指定
======================================================= */
input,textarea,select{
 border-left:1px solid Dimgray;
 border-right:1px solid Dimgray;
 border-top:1px solid Dimgray;
 border-bottom:1px solid Dimgray;
 font-size:13px;color:Dimgray;background-color:#ffffff
}
/* 罫線hr コメント領域の指定
======================================================= */
hr.footer { height:1px; border:none ; border-top:1px #888888 solid ;  }

/* 著作権表示の設定
======================================================= */
font.credit { font-size:5px ; color:#e6e6e6  ; }
/* ボタン周辺の線を消す
======================================================= */
#button-image input {
    width: auto;
    padding:0;
    margin:0;
    background:none;
    border:0;
    font-size:0;
    line-height:0;
    overflow:visible;
    cursor:pointer;
}

</style>


<!--▼▼メルアド内のコメント・例文の色を変更▼▼-->
<script type="text/javascript"><!--
function cText(obj){
if(obj.value==obj.defaultValue){
obj.value="";
obj.style.color="#000";
}
}
function sText(obj){
if(obj.value==""){
obj.value=obj.defaultValue;
obj.style.color="#999";
}
}
//-->
</script>

<form method="POST" enctype="multipart/form-data" action="http://******/cgi-bin/form/su3_mail.cgi">
<input type="hidden" name="action" value="send_mail" />
<!--▼▼メールの件名をVALUE=""の部分に入力する▼▼-->
<input type="hidden" NAME="Subject" VALUE="★★【至急】★★お問い合わせ/ご質問/ご相談メール">
<center>
<table><tr><Td align=left>
<table id="title-table"><tr><td id="title-left"></td>
<td id="title-right">
<!--▼▼▼▼   表示するタイトル    ▼▼▼▼-->
<font id="font-title">お問い合わせ/ご質問/ご相談を送信してください</font>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</td></tr></table>

<TABLE id="form-table" >

<!--==================================================
★必須にする項目は「 NAME="!名前"」のように項目名の前に「!(半角)」を付ける
★確認のため、一致しているかチェックする場合は、「 NAME="!メールアドレス**1"」
「 NAME="!メールアドレス**2"」のように「**1(半角)」と「**2(半角)」を付ける
=====================================================-->
<tr><td width=150></td><td></td></tr>



<TR id="tr-form2">
<TD id="td-form"><font id="font-form">
会社名 店名 団体名<font id="font-needs"></font>
</font></TD><TD id="td-form">
<INPUT TYPE="text" NAME="会社名 店名 団体名" size=45 maxlength=100>
<font class="form-sample"></font></TD></TR>
<TR id="tr-form1">
<TD id="td-form"><font id="font-form">
氏名 担当者名<font id="font-needs"></font>
</font></TD><TD id="td-form">
<INPUT TYPE="text" NAME="氏名・担当者名" size=45 maxlength=100>
<font class="form-sample"></font></TD></TR>
<TR id="tr-form2">
<TD id="td-form"><font id="font-form">
電話番号<font id="font-needs"></font>
</font></TD><TD id="td-form">
<INPUT TYPE="text" NAME="電話番号" size=20 maxlength=100>
<BR><font class="form-sample">例)03-3367-1234</font></TD></TR>
<TR id="tr-form1">
<TD id="td-form"><font id="font-form">
メールアドレス<font id="font-needs">(必須)</font>
</font></TD><TD id="td-form">
<INPUT TYPE="text" NAME="!メールアドレス**1" size=45 maxlength=100 onFocus="cText(this)" onBlur="sText(this)" value="例)YYYY@gmail.com"><br>
<INPUT TYPE="text" NAME="!メールアドレス**2" size=45 maxlength=100 onFocus="cText(this)" onBlur="sText(this)" value="上と同じメールアドレスを入力してください">
</TD></TR>

<TR id="tr-form2">
<TD id="td-form"><font id="font-form">
お問合せ内容<font id="font-needs">(必須)</font>
</FONT></TD><TD id="td-form">
<TEXTAREA NAME="内容" ROWS="10" COLS="70"></TEXTAREA>
</TD></TR>


<TR id="tr-form1">
<TD id="td-form"><font id="font-form">
添付ファイル
</FONT>
</TD><TD id="td-form">
<font class="form-sample">その写真またはファイルを添付できます</font><bR>
<input class="file" type="file" name="u_file1" SIZE=30><br>
<input class="file" type="file" name="u_file2" SIZE=30><br>
<input class="file" type="file" name="u_file3" SIZE=30>
</TD></TR>
<TR id="tr-form2">
<TD id="td-form"><font id="font-form">
送信内容のコピーを</TD>
</FONT></TD><TD id="td-form">
<input type="checkbox" name="send_copy" value="1" CHECKED>
<font id="font-form">
自分にも送る
</font></TD></TR>

</TABLE>
<HR class="footer">
<br><br>
<div id="button-image" align=center>
<INPUT TYPE="image" src="http://www.hans-huber.com/0102030405/cgi-bin/form/tmpl/button_next.png" >
</div>
</td></FORM></tr></table>
<br><br><br>
</center>








COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)