”コンタクトフォーム７”の活用方法

<p>社名<span>（任意）</span><br />
  [text your-company watermark ""] </p>

<p>お名前<span class="required" >（必須）</span><br />
  [text* your-name watermark ""] </p>

<p> メールアドレス<span class="required" >（必須）</span><br />
  [email* your-email watermark ""] </p>

<p>電話番号(携帯番号)<span class="required" >（必須）</span><br />
  [tel* your-tel]</p>

<p>住所<span>（任意）</span><br />
  [text your-zyuusyo watermark ""] </p>

<p>ご用件<span>（件名選択）</span class="required" ><br />
  [radio radio-268 use_label_element default:1 "お問い合わせ" "製品の購入について" "開発提案について" "防災について"]</p>

<p>お問い合わせ内容<span class="required" >（必須）</span><br />
  [textarea* your-message watermark "こちらにお問い合わせ内容をご記入ください。"]</p>

<!-- Really Simple CAPTCHA -->
<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
  [captchac captcha-170]
  [captchar captcha-170 4/4]

[response]
 
<p>[submit "送信"]</p>

<p>社名<span>（任意）</span><br />
  [text your-company watermark ""] </p>

<p>お名前<span class="required" >（必須）</span><br />
  [text* your-name watermark ""] </p>

<p> メールアドレス<span class="required" >（必須）</span><br />
  [email* your-email watermark ""] </p>

<p>電話番号(携帯番号)<span class="required" >（必須）</span><br />
  [tel* your-tel]</p>

<p>住所<span>（任意）</span><br />
  [text your-zyuusyo watermark ""] </p>

<p>ご用件<span>（件名選択）</span class="required" ><br />
  [radio radio-268 use_label_element default:1 "お問い合わせ" "製品の購入について" "開発提案について" "防災について"]</p>

<p>お問い合わせ内容<span class="required" >（必須）</span><br />
  [textarea* your-message watermark "こちらにお問い合わせ内容をご記入ください。"]</p>

<!-- Really Simple CAPTCHA -->
<p>こちらの文字列を入力してください。 <span class="required" >(必須)</span></p>
  [captchac captcha-170]
  [captchar captcha-170 4/4]

[response]
 
<p>[submit "送信"]</p>

スパム回避のため「Really Simple CAPTCHA」のプラグインを入れてセキュリティ対策を行う

題名：お問い合わせページからのお問い合わせ

差出人: [your-name]様より下記、お問い合わせよりお問い合わせがありました。
– – – – – – – – – – – □■□　お問い合わせ内容　□■□ – – – – – – – – – – –
社名：[your-company]
名前：[your-name]
メール：[your-email]
お電話番号：[your-tel]
ご住所：[your-zyuusyo]
ご用件：[radio-268]
お問い合わせ内容：
[your-message]
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

/* デザインカスタマイズ */
div.wpcf7 { background:#fafafa; border:1px solid #ddd; padding:0px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:0 0 30px 0; }
div.wpcf7 p { padding:20px 20px 0; margin:0; font-size:14px; }
div.wpcf7 input, .wpcf7 textarea { border:1px solid #ccc; padding:8px; font-size:14px; }
div.wpcf7 textarea { width:97.5%; height:300px; }
div.wpcf7 input.wpcf7-submit {
   cursor:pointer; color:#fff; font-weight:bold; font-size:14px; width:200px; height:45px; margin:0 auto; display:block;
   -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
   background:#333; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #808080; border:1px solid #666;
}
div.wpcf7 input.wpcf7-submit:hover { background:#006080; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #007ea8; border:1px solid #006080; }
.wpcf7 input.wpcf7-submit:active { box-shadow:none; bottom:-2px; position:relative; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
.wpcf7-captchac { border:1px solid #ccc; }
 
 
/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid { background: #ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip {font-size: 80%;}
.wpcf7 .wpcf7-response-output {margin: 10px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.wpcf7 .wpcf7-validation-errors {color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7;}
.wpcf7 .wpcf7-mail-sent-ok {color: #3A87AD; background-color: #D9EDF7; border: 1px solid #BCE8F1;}
 
/* 必須赤色表示 */
.wpcf7 .required { color: #f00;}
/* 任意緑色表示 */
.wpcf7 .any{ color: #080;}

/* flame - 囲み枠 */
.well { margin-bottom: 30px; padding: 1.1em 2em; background-color: #fafafa; border: 1px solid #ddd; border-radius: 6px; }

.well2 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px solid #ddd; }

.well3 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px dashed #ddd; background: #fafafa; }

.wl_red { background-color: #f2dede; border-color: #ebccd1; color: #a94442; }

.wl_yellow { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }

.wl_blue { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; }

.wl_green { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; }

@media screen and (max-width: 767px) { .well, .well2, .well3 { padding: .9em .8em .9em 1em; } }

.well a:hover {
    color: #f00;
    text-decoration: none;
    font-weight: bold;
}

html/css