ホームページ制作(有料テーマ使用時のContact Form7のカスタマイズ)
ホームページ制作初心者です。
wordpressの有料テーマ「Luminous」をdigipressで購入しテーマとして使用しております。
お問い合わせフォームのプラグインContact Form7をカスタマイズしたく
見た目の良いデザインのCSSをwebで探し
CSSをコピーしました。
拾ったCSS
.form-style-7 { background-image: url('https://wpbeaveraddons.com/wp-content/uploads/2016/07/explore-unsplash.jpg'); background-repeat: no-repeat; background-size: cover; padding: 50px; position: relative; } .form-style-7:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); } .form-style-7 .fl-input-group { margin-bottom: 30px; width: 33.33%; float: left; padding-right: 20px; } .form-style-7 .fl-phone { padding-right: 0px; } .form-style-7 .fl-input-group.fl-message { width: 100%; float: none; padding-right: 0; clear: both; } .form-style-7 .fl-input-group input, .form-style-7 .fl-input-group textarea { border-radius: 0; padding: 12px 15px; height: auto; background: transparent; color: #222; border: 2px solid #fff; font-weight: 300; font-size: 15px; text-transform: uppercase; } .form-style-7 .fl-input-group input::-webkit-input-placeholder { color: #fff; } .form-style-7 .fl-input-group textarea::-webkit-input-placeholder { color: #fff; } .form-style-7 .fl-input-group input:focus, .form-style-7 .fl-input-group textarea:focus { border: 2px solid #e66322; background: transparent; } .form-style-7 .fl-button-wrap { position: relative; } .form-style-7 label { display: none; } @media only screen and (max-width: 768px) { .form-style-7 .fl-input-group { width: 100%; float: none; clear: both; padding-right: 0; } }
拾ったサイト
https://wpbeaveraddons.com/free-contact-form-module-presets-beaver-builder/
wordpressのどこにペーストしたらいいかわからない
検索しましたがよくわからず、上記のCSSをどこにペーストしたらよろしいでしょうか?
試してダメだったこと
1. コンタクトフォーム→その他の設定内に記入→反映されない 2. 固定ページ記入→反映されない
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。