1.前提・実現したいこと
wordpress のお問い合わせフォームをcontact form 7 というプラグインを使用してでカスタマイズしたいのですが、
textareaのカスタマイズが反映されません。上記の「お名前」入力欄のようにボックスをカスタマイズしたいです。
2.該当のソースコード
html
1<section class="contact full-width"> 2 <!-- フォーム --> 3 <div class="contactForm" id="contactForm"> 4 <div class="contact_item"> 5 <label class="label" for ="name">お名前<span class="label_tag label_must">必須</span></label> 6 [text* your-name placeholder"お名前をご入力ください。"] 7 </div> 8 9 <div class="contact_item"> 10 <label class="label" for="mail">メールアドレス<span class="label_tag label_must">必須</span> 11 </label> 12 [email* your-email placeholder"メールアドレスをご入力ください。"] 13 </div> 14 15 <div class="contact_item"> 16 <label class="label" for="comment">制作したいホームページの商材情報<span class="label_tag label_must">必須</span> 17 </label> 18 [textarea* your-message placeholder"メールアドレスをご入力ください。"] 19 </div> 20 21 <div class="contact_item"> 22 <label class="label" for="comment">参考URL<span class="label_tag label_must">必須</span> 23 </label> 24 [textarea* your-message] 25 </div> 26 27 28 <div class="contact_item"> 29 <label class="label" for="comment">お問い合わせ内容 30 </label> 31 [textarea* your-message] 32 </div> 33 34 <!-- ボタン --> 35 <div class="btnArea">[submit id:formbtn "送信"]</div> 36 </div><!--contactForm--> 37</section><!--End section_contact-->
css
1/* Contact Form7 */ 2/* 全幅指定 */ 3.full-width { 4 margin: 0 calc(50% - 50vw); 5 padding: 5em calc(50vw - 50%); 6} 7/* pタグの余白を削除 */ 8.wpcf7-form p { 9 margin-bottom: 0; 10} 11/* 背景色(お好きな色に) */ 12section.contact { 13 background-color: #white; 14} 15/* フォームの幅(自由に変えてOK) */ 16.contactForm { 17 max-width: 100%; 18 margin: 0 auto; 19} 20/* 各項目の下部余白 */ 21.contact_item { 22 margin-bottom: 20px; 23} 24/* 項目名 */ 25.label { 26 display: block; 27 font-size: 18px; 28 line-height: 0.5px; 29 letter-spacing: 0.5px; 30 margin-bottom: 2px; 31 font-weight: bold; 32 33} 34 35/* 必須タグと任意タグ共通のスタイル */ 36.label_tag { 37 font-size: 10px; 38 color: #ffffff; 39 border-radius: 3px; 40 padding: 5px 10px; 41 margin-left:10px; 42} 43 44/* 必須タグ */ 45.label_must { 46 background-color: #E9444D; 47 48} 49 50/* 名前やメールアドレスなどユーザーが入力する箇所 */ 51.inputs { 52 width: 100%; 53 -webkit-box-sizing: border-box; 54 box-sizing: border-box; 55} 56 57input[type="text"],input[type="email"],input[type="textarea"] { 58 border: solid 1px #CDCDCD; 59 border-radius: 3px; 60 padding: 10px; 61 font-size: 14px; 62 margin-bottom:20px; 63 height: 40px; 64} 65 66/* お問い合わせ内容を入力する箇所 */ 67textarea.form-control { 68 border: solid 1px #707070; 69 padding: .5rem; 70 height: 207px; 71 font-size: 1.8rem; 72} 73 74/* ボタン */ 75.btnArea { 76 text-align: center; 77} 78 79input[type="submit"]{ 80 background-color: #ff7a40; 81 width: 280px; 82 color: #ffffff; 83 text-align: center; 84 font-size: 2.5rem; 85 line-height: 1.3; 86 letter-spacing: .5em; 87 text-indent: .5em; 88 font-weight: bold; 89 padding: 1.4rem 0; 90 margin-top: 2rem; 91 cursor: pointer; 92 border-radius: .3rem; 93 transition: all .3s; 94} 95 96 97/* ボタンにホバーした時 */ 98input[type="submit"]:hover { 99 color: #ff7a40; 100 background-color: #ffffff; 101 border-color: #ff7a40; 102} 103 104/* ローダー */ 105.wpcf7 .ajax-loader { 106 display: block; 107 margin: 0 auto; 108} 109 110 111/* モバイル版 */ 112@media screen and (max-width: 600px) { 113 .contact_item { 114 margin-bottom: 1.6rem; 115 } 116 .label { 117 font-size: 14px; 118 margin-bottom: .4rem; 119 } 120 .label_tag { 121 font-size: 10px; 122 } 123 input[type="text"],input[type="email"] { 124 padding: .4rem; 125 font-size: 14px; 126 } 127 textarea { 128 padding: .4rem; 129 font-size: 14px; 130 } 131 input[type="submit"]{ 132 font-size: 14px; 133 } 134}
3.試したこと
他の仕様のコードをコピペしたり、色々変更してみたのですが、どのコードをいじってもこのtextareaの部分だけ反映されませんでした。初めて知り合いからではなくCW経由でいただいた案件でして、お客様がお望みのデザインを忠実に再現したいため妥協したくありません。初歩的な質問で大変申し訳ないのですが、お手隙でご回答いただけますと幸いです。よろしくお願いいたします。
あなたの回答
tips
プレビュー