contactform7をカスタマイズ

コード例

  

    • 送信後のメッセージをカスタマイズする
      自分のテーマ内のスタイルシートからCSSを上書きします。
      入力エラーのダイアログを赤に変更

      .wpcf7 span.wpcf7-not-valid-tip {
      display: block;
      position: static;
      top: 0;
      left: 0;
      border: none;
      color: red;
      }
      

      入力エラーのメッセージのデザインを変更

      .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;
      }
      

      参考文献:http://hijiriworld.com/web/wp-contactform7-customize/

 

  • PCだと出来るがモバイルだとこれができない
    1.送信ボタンを押してもサンクスページに飛ばず
    http://bizvektor.com/plugins/contactform7/
    Ktai-styleにwp_header();とwp_fotter();を入れる必要がある
    wp_head()でCSSとjQueryを、wp_footer()でフォームを制御するjsを読み込んでいる。
    http://snowadays.jp/2014/03/2660
    http://labs.karappo.net/kwdr/index.php?itemid=3042.確認メールを自動送信したいがスマホや携帯には送信できない
    【解決策】プラグインWP Mail SMTPをインストールする。
    contactform7はsendmailなのでプロバイダ側の迷惑メール機能に引っ掛かり送信エラーになる。
    smtpを利用すれば解決できる。Gメールのアカウントを利用して連携させた。
    ただし利用する際にはセキュリティの保護を無効にする必要あり。
    http://coneta.jp/2579.html
    3.テキストエリアの文字が化ける
    4.機種によって文字化け。ドコモはSJIS

 

コード例


<div class=item>
<span class="must">必須</span> お名前
[text* your-name] 
</div>
<div class=item>
<span class="must">必須</span> メールアドレス
[email* your-email]
</div>
<div class=item>
<span class="must">必須</span> お電話番号
[tel* your-tel /18]
</div>
<div class=item>
<span class="free">任意</span> 会社名
[text your-company] 
</div>
<div class=item>
<span class="free">任意</span> 部署名
[text your-section]
</div>
<div class=item>
<span class="free">任意</span> メッセージ本文
[textarea your-message]
</div>
<div class=item>
[submit "送信"]
</div>

メッセージ本文


差出人: [your-name] <&#91;your-email&#93;>
題名: ホームページからのお問い合わせ

差出人:[your-name]
メールアドレス:[your-email]
お電話番号:[your-tel]
会社名:[your-company]
部署名:[your-section]
お問い合わせ内容:[content]
メッセージ本文:
[your-message]


--
このメールは Scripintelligence Japan (http://www.scripintelligence.jp) のお問い合わせフォームから送信されました

スタイルシート

/***** コンタクトフォーム *****/
.item {
	margin: 30px 10px 50px 30px;
}

.must {
	color: #fff;
	padding: 6px 10px;
	background: #b83166;
	border-radius: 20px;
}

.free {
	color: #fff;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

.radio-area {
	width: 70%;
	margin-top: 15px;
	background: white;
	border: 1px solid silver;
}

form p {
	font-weight: 600;
}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 70%;
	margin-top: 15px;
	border: 1px solid silver;
	border-radius: 3px;
}

textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

textarea.wpcf7-form-control.wpcf7-radio {
	height: 200px;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: rgba(255,255,142,0.46);
}

input.wpcf7-submit {
	width: 70%;
	height: 80px;
	background: #b83166;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-left: 20px;
}

input[type="submit"], input[type="reset"], input[type="button"], button {
	cursor: pointer;
}

/* エラーメッセージ */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

/* ここまで */

Posted in plugin.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です