（ホームページ教室）お問い合わせフォームの作成

お問合せフォームの作成

Contact Form 7をインストールして有効化すると、ワードプレスの管理画面のサイドバーに「お問い合わせ」というメニューが表示されるようになります。このメニューがお問い合わせフォームを編集する機能になります。

サンプルお問い合わせが作成されていますので、そのコードを適当な固定ページにHTMLボックスを使用して貼り付け、ページ更新し、表示されたページで確認してみましょう。

ウェブ屋行政書士のトップページのフォームの例

HTML

<div class="table">

<div class="tr">
<div class="td">
<label> <b>氏名</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[text* your_name] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>氏名フリガナ</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[text* your_name_furigana] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>住所</b><u class="nini">任意</u> </label>
</div>
<div class="td">都道府県<br>[select your_todohuken include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]<br>住所<br>[text your_jyusyo]</div></div>


<div class="tr">
<div class="td">
<label> <b>電話番号</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[tel* your_denwa] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>メールアドレス</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[email* your_email] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>お問い合わせに対する<br>ご希望の連絡方法</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[radio your_renraku use_label_element default:1 "電話にて" "メールにて"]
電話にてご連絡する場合の希望時間<br>（例：いつでも、平日午前中、○日18:00以降など）
[text your_renrakujikan]
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>お問い合せ内容</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[textarea* your_naiyou]
</div>
</div>

<div class="tr">
<div class="td">
<div class="center">（メール暗号化(SSL)によって安全に送信されます）</div><div class="center">（個人情報保護法に従い送信された情報は大切に保管します）</div>[submit "送信"]
</div>
</div>

</div>

CSS

/************************************
** フォームのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}
/* ボタン */
input[type="submit"] {
	display:block;
  background-color: #bf0000;
  color:#fff;
  font-weight:bold;
  text-align:center;
  margin: 0 auto;
  width: 80%;
}

/************************************
** テーブルのデザイン
************************************/
.table{
	font-size:0.9em;
	  border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}

メール

お問い合わせが送信されました。
対応お願いいたします。

（氏名） 
[your_name]

（氏名フリガナ）
[your_name_furigana]

（住所）
[your_todohuken]
[your_jyusyo]

（電話番号）
[your_denwa]

（メールアドレス）
[your_email]

（連絡方法）
[your_renraku]
[your_renrakujikan]

（お問い合せ内容）
[your_naiyou]

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました