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

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

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

お問合せ

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

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

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

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

目次

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

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

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

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

固定ページ>固定ページ一覧
固定ページ

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

お問合せ

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

に注目です。

お問合せ編集画面

下部の欄に「カスタム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);
}

コピペができたら、画面右上の更新ボタンをクリックして更新します。

②完成!

このようになります。

入力項目の幅が広がり、丁度良い感じになってます

「お問合せ」の編集画面から[プレビュー]>[新しいタブでプレビュー]で完成画面のプレビューが見れます。

もちろん、サイトから確認しても良いです。

まとめ

初心者ブロガーがSWELLでContact Form 7お問合せフォームの改良するには?

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

これだけです。
でも、いまだにブログ初めて約6ヶ月の私でも、これが出来ませんでした。
自分で調べて試行錯誤。結果がこの方法でした。
まだまだ、勉強中!
ブログ初心者の方の参考になれば幸いです。


この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる