「Contact Form 7」のフォームのレイアウトを見やすくする
カテゴリー：WordPressプラグインガイド
WordPressで構築したホームページでお問い合わせフォームを設置する際に多くの方は「Contact Form 7」を活用されるでしょう。ただ、フォームのレイアウトがイマイチなのでスッキリさせたいですね。
初期状態でのお問い合わせフォーム
Contact Form 7で新しくフォームを作成したときのフォームは上の画像のようなフォームです。もちろんこのフォームでも送信できるので機能的には問題ありませんがちょっと見た目を整えたいです。最初のお問い合わせフォームの編集画面は以下の画像のようになっています。
テーブルの記述に編集する
フォーム編集でテーブルの記述に修正します。
<table class="contact-form">
<tr>
<td>お名前<span>必須</span></td>
<td>[text* your-name]</td>
</tr>
<tr>
<td>メールアドレス<span>必須</span></td>
<td>[email* your-email]</td>
</tr>
<tr>
<td>題名</td>
<td>[text your-subject]</td>
</tr>
<tr>
<td>メッセージ本文</td>
<td>[textarea your-message]</td>
</tr>
</table>
[submit "送信"]このように記述するとテーブルレイアウトになります。
CSSを編集
さらにCSSでレイアウトを整えます。ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で以下のように記述します。
table.contact-form {
width: 100%;
border-collapse: separate;
border-spacing: 8px;
border: none;
}
table.contact-form td {
border: none;
padding: 0 15px;
}
table.contact-form td:nth-child(1) {
white-space: nowrap;
background: #333333;
color: #FFFFFF;
}
table.contact-form td:nth-child(1) span {
background: #CC0000;
padding: 5px;
font-size: 0.8em;
margin-left: 10px;
}
@media only screen and (max-width:620px) {
table.contact-form td {
display: block;
padding: 15px 0;
text-align: center;
}
}このように記述するとフォームのレイアウトは以下の画像のようになります。
上記CSSでは620ピクセルより幅の小さな画面ではテーブルのレイアウトが変わるようにしています。その時の表示は以下の通りです。
この記事に関連する投稿記事
アップロードと同時に画像をリサイズ「Resize Image After Upload」
WordPressに限ったことではありませんが、Webサイトを運営していれば大抵の場合そのWebサイトには画像を貼り付けるでしょう。Webサイトで使用する画像のサイズは大体どれくらいなのでしょうか？こ... もっと見る
WordPressでパンくずリストを「Breadcrumb NavXT」
「BreadcrumbNavXT」はWordPressで構築したサイトに簡単にパンくずリストを表示させることが出来るプラグインです。パンくずリストとは？このサイトで言えば…オレンジ... もっと見る
ブロックエディターで部分的に文字色を変更したい時「Advanced Rich Text Tools for Gutenberg」
WordPress5から登場した新しいエディターのブロックエディターですが、それ以前のエディターのクラシックエディターを使っていた人だと「どうすりゃいいんだよ！」って思うのが、部分的に文字色を変更した... もっと見る
画像のサイズを一括で再生成してくれる「Regenerate Thumbnails」
過去の投稿で利用した画像サイズを一括で変換WordPressで固定ページや投稿に貼り付ける際に、画像をアップロードしますが、アップロード時に自動的にいくつかのサイズの画像を作成してくれます。作成され... もっと見る
アイキャッチ画像を自動設定してくれる「Easy Add Thumbnail」
結構な確率で設定し忘れるアイキャッチ画像投稿や固定ページの記事内容を分かりやすく表すためのアイキャッチ画像ですが、記事を投稿したときに結構な確率で設定し忘れたりします。記事を公開後、内容を確認するた... もっと見る
こんな記事が良く読まれています
WordPressのインストール後のデザインは？
最近のレンタルサーバーはWordPressのインストールが簡単にできますのでWordPressのインストールまでは誰でも戸惑うことなくできるようになりました。インストール後の基本設定も最低限必要なプラ... もっと見る
WordPressを簡単にインストールできるレンタルサーバー【１】
WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る
ブロガー専用テーマ「ストーク19」
WordPressテーマ「ストーク（STORK）19」はレスポンシブデザインで特にスマホでの閲覧のしやすさを第一に考慮して設計されています。現在多くのウェブサイトではスマホでの閲覧がどんどん伸びていま... もっと見る
お名前.comでドメインを取得しよう
ドメインの取得はレンタルサーバー会社でも取得できますが、一般的に割高であったり、将来サーバーを移転することがあったりした場合手続きが煩雑になる場合もあります。ドメインとサーバーは別々に契約しておくと管... もっと見る
WordPressを簡単にインストールできるレンタルサーバー【２】
WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る
WordPressで作成作業中のWebサイトを見られたくない時にする設定
WordPressをインストールしたらまずは最初にやっておきたい設定がいくつかあります。まずは、WordPressで作成作業中のWebサイトを見られたくないと思ったときにしておく設定です。「制作中&... もっと見る
wp_list_categories( パラメータ )
カテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。その他トップページや固定ページのテンプレートでも... もっと見る
画像の拡大表示をカッコよく「Fancybox for WordPress」
「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか？例えば以下のよう... もっと見る
ブロックエディターでコピペで勝手に半角スペースが入って困るとき
WordPressの新しいエディターブロックエディターを使っていると「おや？」と思うのが…「テキストをコピペするとその前後に半角スペースが勝手に入る」っていうこと。ブロックエディターでコ... もっと見る
こういう人はホームページ公開、運営で失敗しやすい
これまでホームページを公開したことない、運営したことないという方にとって果たしてこれから作成するホームページが効果あるものとなるのかどうかはとても不安に思われることだと思います。実際、ホームページを公... もっと見る
