質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Q&A

0回答

317閲覧

WP お問い合わせフォームカスタマイズについて(contact form 7 )

hk120222

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

0グッド

1クリップ

投稿2022/01/20 15:36

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経由でいただいた案件でして、お客様がお望みのデザインを忠実に再現したいため妥協したくありません。初歩的な質問で大変申し訳ないのですが、お手隙でご回答いただけますと幸いです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問