Contact Form 7をコピペ用CSSでカスタマイズ!(レスポンシブ対応済)

contactform7のデザイン

今回紹介するのは、

  • シンプルデザイン
  • 多機能デザイン

の2種類です。

目次

シンプルデザインのサンプル

PCデザイン
「プライバシーポリシー」にチェックで送信ボタンが押せるようになります。
スマホはこんな感じです

多機能デザイン(チェックボックス・ラジオボタン・プルダウン等)のサンプル

PCデザイン
「プライバシーポリシー」にチェックで送信ボタンが押せるようになります。
スマホはこんな感じです

シンプル・多機能共通CSS

共通CSSはこんな感じです。

シンプルデザインHTML

PCデザイン
「プライバシーポリシー」にチェックで送信ボタンが押せるようになります。
スマホはこんな感じです

フォームに以下のHTMLをコピペしてください。

メールタブはお好みですが、以下のようなものがオススメです。

多機能デザインHTML(チェックボックス・ラジオボタン・プルダウン等)

PCデザイン
「プライバシーポリシー」にチェックで送信ボタンが押せるようになります。
スマホはこんな感じです

フォームに以下のHTMLをコピペしてください。

メールタブはお好みですが、以下のようなものがオススメです。

最後に

CSSがある程度使えるようになれば、エンジニアとしても稼げるようになります。

ちなみに、「Kindle Unlimitedの30日無料体験」であれば、無料でこの本の内容を学べます。

30日以内に解約すればお金はかかりません。

この機会に、お得に学習しちゃいましょう!

\ Kindle Unlimitedはこちら! /

エンジニア独立の記事も書いておりますのでぜひご参照下さい!

contactform7のデザイン

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

シェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次