うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

contact form7

-2015年07月09日-
150710_01_03 作成したページはこちらです。 下のコードを貼り付けるだけで作成できます。※フリガナコードがおかしいのでそこだけ手打ちで! ・htmlコードはコンタクトフォーム7箇所に ・cssはstyle.cssに書き込みました。
<p>お名前 <span class="wp-cf7-icon">必須</span><br/></p>

<p>フリガナ<br/></p>

<p>メールアドレス<span class="wp-cf7-icon">必須</span><br />
    [email* your-email]</p>

<p>メールアドレス(確認用)<span class="wp-cf7-icon">必須</span><br />
    [email* your-email_confirm] </p>

<p>お問い合わせ題目<span class="wp-cf7-icon">必須</span><br />
     </p>

<p>メッセージ本文<span class="wp-cf7-icon">必須</span><br />
    [textarea* your-message] </p>

<p><label>[acceptance acceptance-430]上記送信内容を確認してチェックを入れてください</label><span class="wp-cf7-icon">必須</span></p>

<div>[submit "送信"]</div>
.wpcf7-form{
	line-height:2.0em;
}


.wp-cf7-icon
{
background-color:#E00024;
color:#ffffff;
border-radius:3px;
font-size:12px;
margin-left:12px;
padding:2px 4px;
}


.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-name-kana"],
.wpcf7 input[name="your-company"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-email_confirm"],
.wpcf7 input[name="your-subject"] {
        width: 80%;
        height: 35px !important;
		font-size:25px;
}
 
.wpcf7 textarea{
		max-width:95%;
        width: 95%;
        min-height: 350px !important;
		font-size:25px;
}


.wpcf7 input[type="submit"],input[type="reset"],input[type="button"]{
padding:8px 25px;
background: #4f4d4d;
background: -moz-linear-gradient(top, #4f4d4d 0%, #2e2c2c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4d4d), color-stop(100%,#2e2c2c));
background: -webkit-linear-gradient(top, #4f4d4d 0%,#2e2c2c 100%);
background: -o-linear-gradient(top, #4f4d4d 0%,#2e2c2c 100%);
background: -ms-linear-gradient(top, #4f4d4d 0%,#2e2c2c 100%);
background: linear-gradient(to bottom, #4f4d4d 0%,#2e2c2c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4d4d', endColorstr='#2e2c2c',GradientType=0 );
border:0;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
line-height:1.5;
font-size:125%;
color:#fff;
margin-left:245px;
}

.wpcf7 input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{
background: #4f4d4d;
background: -moz-linear-gradient(top, #2e2c2c 0%, #4f4d4d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2c2c), color-stop(100%,#4f4d4d));
background: -webkit-linear-gradient(top, #2e2c2c 0%,#4f4d4d 100%);
background: -o-linear-gradient(top, #2e2c2c 0%,#4f4d4d 100%);
background: -ms-linear-gradient(top, #2e2c2c 0%,#4f4d4d 100%);
background: linear-gradient(to bottom, #2e2c2c 0%,#4f4d4d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2c2c', endColorstr='#4f4d4d',GradientType=0 );
}