初心者ブロガー　SWELL　Contact Form 7お問合せフォームの改良

2022 8/18

2021年12月21日 2022年8月18日

当サイトでは、WordPressの有料テーマ「SWELL」を使用しています。
ブログにお問合せフォームは必須。
そこでプラグイン「Contact Form 7」を使ってお問合せフォームを作りました。

参考サイト：hitodeblog
↑ありがとうございます(^^)

でも、各項目の幅が狭く、何だか書き込みにくい印象。
そこで、CSSでカスタマイズして使いやすくしました。

超初心者ブロガーでも出来ます！

参考サイト：PC-crea
↑ありがとうございます(^^)

それでは具体的な手順を手順を見て行きましよう！

固定ページで作ったお問合せページを編集する

手順としては、
固定ページに作った「お問合せ」の記事下部にある、
カスタムCSSにコードをコピー＆ペーストします。

①固定ページの「お問合せ」の編集

まずは
[固定ページ]＞[固定ページ一覧]
をクリック

ここで、あらかじめ作っておいた
[お問合せ]＞[編集]
をクリック。

これで編集画面が出てきます。
左下部の
『カスタムCSS＆JS』
『CSS』
に注目です。

下部の欄に「カスタムCSS」が書き込めるようになっています。

ここに以下のコードをコピー＆ペーストします。

.wpcf7 input [name=”your-name”],
.wpcf7 input [name=”your-email”],
.wpcf7 input [name=”your-subject”] {
width: 100%
height: 35px !important;
background: #fff;
}

.wpcf7 textarea[name=”youra-message”] {
width: 100%
height: 300px !important;
background: #fff;
}

そして、さら以下のコードをコピー＆ペーストします。

.wpcf7 input[type=”submit”{
width:50%
padding:10px;
margin-top:30px;
margin-left:25%
color: #fff;
borde-radius:10px;
-wekbkit-border-radius: 0px;
-moz-border-radius: 0px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #D89CA6;
tansition: 0.3s;
}
.wpcf7-submit:hover {
background: #a4dd6c;
tansform: tandlate3d(0px, 3px, 1px);
-webkit-transforms: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}