▲PAGE TOP

2014年4月23日水曜日

サイドバーに送信フォームを設置する


  1. レイアウト>ガジェットを追加 をクリックする
  2. ガジェットに「送信フォーム」(任意)を入力
  3. コンテンツに以下のタグを入力する
  4. CSSを適当に編集する
  5. ボタンを絶対パスに変更する
  6. cgiのアドレスを絶対パスで入力する
  7. 保存して終了


<style>


/* 罫線hr コメント領域の指定
======================================================= */
hr.header { height:1px; border:none ; border-top:1px #888888 solid ;  }

/* 入力フォーム領域のテーブルと文字色の各種指定
======================================================= */
#form-table-sidebar { width:100% ; padding:5px ; }
/* 入力タイトルの文字色 */
#font-form-sidebar { font-size: 12px ; color:#ffffff; }
/* 入力タイトルの文字色 */
#font-needs-sidebar {font-size: 10px ; color:#ffffff; }
/* フォーム入力枠内の各種指定
======================================================= */
input,textarea,select{
 padding: 2px ;
 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-sidebar { height:1px; border:none ; border-top:1px #ecadbe dotted ;  }


/* ボタン周辺の線を消す
======================================================= */
#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="◆◆【重要】◆◆ご予約フォーム" />

<table id="form-table-sidebar" >

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

<tr><td><font id="font-form-sidebar">
お名前<font id="font-needs-sidebar"> 必須</font>
</font>
<input type="text" name="!お名前" size="25" maxlength="100" />
</td></tr>
<tr><td><font id="font-form-sidebar">
お名前(フリガナ)<font id="font-needs-sidebar"> 必須</font>
</font>
<input type="text" name="!フリガナ" size="25" maxlength="100" />
</td></tr>
<tr><td><font id="font-form-sidebar">
電話番号<font id="font-needs-sidebar"> 必須</font>
</font>
<input type="text" name="!電話番号" size="25" maxlength="100" />
</td></tr>
<tr><td><font id="font-form-sidebar">
挙式予定日<font id="font-needs-sidebar"> 必須</font>
</font>
<input type="text" name="!挙式予定日" size="25" maxlength="100" />
</td></tr>

<tr><td><font id="font-form-sidebar">
メールアドレス<font id="font-needs-sidebar"> 必須</font>
</font>
<input type="text" name="!メールアドレス**1" size="25" maxlength="100" onfocus="cText(this)" onblur="sText(this)" value="例)YYYY@gmail.com" /><br />
<input type="text" name="!メールアドレス**2" size="25" maxlength="100" onfocus="cText(this)" onblur="sText(this)" value="上と同じメールアドレスを入力してください" />
<hr id="hr-sidebar" />
</td></tr>
<tr><td><font id="font-form-sidebar">
ご来店希望日と時間<font id="font-needs-sidebar"> 必須</font>
</font>
<table>
<tr><td><font id="font-form-sidebar">(1)</font></td><td><input type="text" name="!ご来店希望日と時間(1)" size="20" maxlength="100" /></td></tr>
<tr><td><font id="font-form-sidebar">(2)</font></td><td><input type="text" name="!ご来店希望日と時間(2)" size="20" maxlength="100" /></td></tr>
<tr><td><font id="font-form-sidebar">(3)</font></td><td><input type="text" name="!ご来店希望日と時間(3)" size="20" maxlength="100" /></td></tr>
</table>
<font id="font-needs-sidebar">ご来店は16時まで受付中</font>
<hr id="hr-sidebar" />
</td></tr>

<tr><td><font id="font-form-sidebar">
試着希望のドレス(商品番号)<font id="font-needs-sidebar">必須</font>
</font>
<textarea name="試着希望ドレス番号" rows="3" cols="22"></textarea>
<font id="font-needs-sidebar">複数入力できます</font>
<hr id="hr-sidebar" />
</td></tr>

<tr><td><font id="font-form-sidebar">
その他のご要望<font id="font-needs"></font>
</font>
<textarea name="その他のご要望" rows="3" cols="22"></textarea>
</td></tr>



<input type="hidden" name="send_copy" value="1" checked />


<!--▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</table>
<div id="button-image" align=center>
<input type="image" src="確認ボタンの絶対パス.png" />
</div>
</form>










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

タイトル

メールアドレス

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