[ SWELL ]「Contact Form 7」で作ったお問合せフォームをカスタマイズ(コピペOK)する方法

WordPressテーマ「SWELL」のお問合せフォーム付きページを「Contact Form 7」で作成したら狭いフォームが左寄りになってみっともない……どうする？とお悩みの方のためにコピペで簡単にカスタマイズできるCSSをシェアします。

目次

SWELL で作った「Contact Form 7」のフォームをCSSでコピペカスタマイズ

当方は自分用のサイトでフォームを作る時は始めから「Contact Form 7」の自作カスタマイズCSSをファイルから引っ張り出してきてペタペタ貼ってしまうので気づいていなかったのですが……。

当方大絶賛のSWELL にも弱点はあったのだということに、最近、お客さまからご依頼を受けて気づいたのです。

まぁ、そういうこともあるさ。

カスタマイズは簡単なので、デメリットと言うほどの事ではないでしょう。

あわせて読みたい

「SWELL」の評判デメリットレビューを斬る 評判が良いSWELLというWordpressテーマは本当に使いやすいのか。 SWELLという有料テーマはアフィリエイトに向いているのか。 SWELLは他のワードプレステーマと比べて使…

ここはめげずに行きたいと思います。

SWELLのコンタクトフォームは狭くて左寄り

SWELL でサイトを作成しているお客様から「ContactForm7で問い合わせフォームを設定してほしい。デザインにはこだわらないのでカスタマイズは要らない」というご依頼を承りました。

フォームの項目が多かったのでそれなりに時間はかかりましたが、「カスタマイズは要らない」ということなので、それは楽だな、と思い、とりあえず出来上がりを見てみたら……。

えっ……どうして、こんなにポッカリ右が空いているのです！？

細いし狭いし送信ボタンは小さいし……。

いくらカスタマイズは要らないと言われたとしても、このまま納品してもいいのか悩む出来です。

テーマ別　基本のコンタクトフォームの初期ビジュアル

プラグイン(ContactForm7)で作った問い合わせフォーム、カスタマイズしなければ、どのテーマでも一緒でしょ？

と思われがちですが、基本のフォームだけでテーマによってだいぶ違います。

左上から「Twenty Twenty-Two」「Cocoon」「STORK」「Simplicity2」「THE THOR」そして「SWELL」です。

ちなみに全て2カラムサイドバー付きのメインカラム部分をスクショしております。

こうやって見ると、Cocoon って無料なのに本当に凄いなぁ……と改めてしみじみ。

SEWLL ならそのまま使えるContact Form カスタマイズCSS(コピペOK)

とりあえず、段階を追って直したい部分だけカスタマイズしていきましょう。

ラベル(テキスト)部分を太字にする

とにかくテキストだけ目立たせたい方へ

/*ラベル(テキスト)部分を太字にする*/

.wpcf7{
	font-weight: bold;
}

フォームの下に余白を入れる

いくら何でも、フォームと下のテキストの間が詰まりすぎだと思うのですよ。

/*ラベル(テキスト)部分を太字にする*/
.wpcf7{
	font-weight: bold;
}

/*フォームの下に余白を入れる*/
.wpcf7 input {
 margin-bottom: 15px;/*ここが余白サイズなので好みで調整*/
}

フォームの幅を広くする(100%)

/*フォームの下に余白を入れる*/
.wpcf7 input {
 margin-bottom: 15px;/*ここが余白サイズなので好みで調整*/
}

/*フォームの幅を広くする(100%)*/
/*テキスト*/
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	        width: 100%;
}
/*テキストエリア*/
.wpcf7-textarea {
	        width: 100%;
}

送信ボタンを大きくする

/*送信ボタンを目立たせる*/
.wpcf7 .wpcf7-submit{
cursor: not-allowed;
    width: 100%;
padding: 15px;
margin: 0 10px 25px 5px;
margin-top: 15px!important;
border-radius: 15px;/*ボタンの角に丸み*/
background-color: #44617b;/*ボタン色*/
color: #fff;/*ボタン文字色*/
font-size: 1.1rem;/*ボタン文字サイズ*/
font-weight: bold;/*ボタン文字を太く*/
}

送信ボタンは大事なので。小さくて目立たず、押す気がしないボタンではお問合せが減ります。また、記事下にSNSボタンを付けている方も多いので、混ざってどれが送信ボタンなのか分からないような雰囲気は避けたいです。

上のコードでは、ボタン自体も大きくし、ボタンの周りにも余白を付けています。ボタンらしさが欲しいので丸みを少し付けました。

以上のCSSを全部貼り付ければ、全て適用されたフォームになります。

/*ラベル(テキスト)部分を太字にする*/
.wpcf7{
	font-weight: bold;
}


/*フォームの下に余白を入れる*/
.wpcf7 input {
 margin-bottom: 15px;/*ここが余白サイズなので好みで調整*/
}

/*フォームの幅を広くする(100%)*/
/*テキスト*/
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	        width: 100%;
}
/*テキストエリア*/
.wpcf7-textarea {
	        width: 100%;
}

/*送信ボタンを目立たせる*/
.wpcf7 .wpcf7-submit{
cursor: not-allowed;
    width: 100%;
padding: 15px;
margin: 0 10px 25px 5px;
margin-top: 20px!important;
border-radius: 15px;/*ボタンの角に丸み*/
background-color: #44617b;/*ボタン色*/
color: #fff;/*ボタン文字色*/
font-size: 1.1rem;/*ボタン文字サイズ*/
font-weight: bold;/*ボタン文字を太く*/
}

もう少しデザイニングされた「Contact Form 7」カスタマイズCSS

デザイニングされた……と言っても当方が勝手に作っているだけなので。お気に召したら色々と改変しながら使ってみてください。(どのテーマでも使えます)

こんな感じになります。

<div class="ichikidou">
<p><label> お名前 <span class="pink-l">必須</span>
[text* text-31]
</label></p>
<p><label> メールアドレス <span class="pink-l">必須</span>
[email* email-679]
</label></p>
<p><label>項目1 <span class="pink-l">必須</span>
[text* text-31]
</label></p>
<p><label>年齢 <span class="pink-l">必須</span>
<div class="age">[number* number-698 min:0 max:20]
</label></p></div>

<p><label>項目2テキスト任意<span class="gre-l">任意</span>
[text text-782]
</label></p>

<p><label>お問い合わせ内容 <span class="pink-l">必須</span>
</label>
[checkbox* checkbox-787 use_label_element "お申込み" "お教室へのご質問" "お教室の感想" "お仕事のご依頼" "その他"]</p>
<p><label> メッセージ内容 <span class="pink-l">必須</span>
[textarea textarea-342]
</label></p>

[acceptance acceptance-611] 送信前にチェックをお願いいたします [/acceptance]

<div class="blue-bu">[submit "送信"]</div></div>

「フォーム」の隣の「メール」タブも編集

お問合せを頂いて気づいたのですが(ありがとうございました！)、ここも編集しないとContactForm にエラーが出ます。

「フォーム」横のタブ「メール」を開いてください。

ここに記載された内容がサイトオーナーに届きます。ですが、デフォルトではContactForm の既存の記述になっています。

例えば、上記のHTMLでは「お名前」は「text-31」、「メールアドレス」は「email-679」に編集してあるのですが(項目をたくさん作るためです)、送信されてくるメールの設定は「お名前」は「your-name」、「メールアドレス」は「your-email」のままになってしまっています。

これをこのままにしておくと「追加ヘッダー」辺りにエラーが出ます。また、せっかく頂いたメールも内容がさっぱり分からない[your message]しか記述の無いメールが届きます。つらいです。

この受信メール設定の欄には、上部に表示された項目コード(このフォームの場合は「text-31」「email-679」「number-698」など)しか記入できません。なので、書き直します。

以下編集個所、コピペで大丈夫(なはず)です。

これで、お客様から頂いた内容が全て受信でき、フォームのエラーも無くなるはずです。

/*新しいフォーム*/

/*「必須」*/
.pink-l{
	font-size:.9em;
	padding: 5px;
	background: #c97586;
	color: #fff;
	border-radius: 50%;
	margin-left:1em;
	margin-bottom:1em;
}

/*「任意」*/
.gre-l{
	font-size:.9em;
	padding: 5px;
	background: #556b2f;
	color: #fff;
	border-radius: 50%;
	margin-left:1em;
	margin-bottom:1em;
}

.age{
width:20%;
}

.wpcf7 .ichikidou input[type=date], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
border-radius:10px;
}

.ichikidou {
	  position: relative;
    background: #fbfaf5;/*背景色*/
  box-shadow:0 0 5px rgba(0,0,0,.2);  padding: 1em;
  width: 100%;
    margin: 2em 0;
    color: #2c2c2f;
}

.ichikidou p {
  color: #65513f;
  padding: 10px;
}

.wpcf7 input {
 margin-bottom: 15px;
}

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	        width: 100%;
}

.wpcf7-textarea {
	        width: 100%;
}

.wpcf7 .wpcf7-submit{
	cursor: not-allowed;
    width: 100%;
padding: 15px;
margin: 0 10px 25px 5px;
margin-top: 20px!important;
border-radius: 15px;
background-color: #44617b;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
}

border-radius: 〇〇%

background: #色コード

上手く行かなかったらご依頼ください。