Contact Form 7のスマホでの表示崩れ対策
こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。今回はWordPressの記事ですが、備忘録的な感じで見て頂けると幸いです。
WEBサイトを作成する上でもはや必須となっているのが問合せフォームですが、代表的なプラグインとして
- Contact Form by WPForms
- Contact Form 7
の２つがあります。当サイトではContact Form 7を使用していますが、理由はWPFormsは有料版にしないとカスタマイズ性に乏しいというのが挙げられます。
例えば、WPFormsはHTMLの追加ができないので、当サイトで実装しているような問合せフォーム内にプライバシーポリシーを表示するということができないのです。
ところが、Contact Form 7はデフォルト設定ではスマートフォンで表示した際に下記図のように表示が崩れてしまうという問題が発生します。
ヘッダーの表示幅と比べると、名前やメッセージ本文欄が大幅にはみ出ているのが分かります。そこで、今回はCSSを追加して横幅を調整することで、下記図のように適正なサイズに整えていきます。
なお、プライバシーポリシーが不要な基本的な問合せフォームで良ければ、WPFormsをお勧めします。
実際の記述について
まずはプラグインのフォーム設定画面から下記図のように全ての項目にclass（名前は任意）を追加していきます。
classを追記する場合の注意点としては、全角スペースではなく半角スペースを空けて記入します。
次にショートカットコードを張り付けた固定ページの追加CSS部分に下記図のように記入します。
.ABC部分は任意のclass名を記入します。widthは90％~100％程度で実際の表示を見ながら調整してください。
非常に簡単な記述ですが、きちんと設定をしておかないとスマートフォンでの表示が崩れてしまうので、実装をお勧めします。テーマによっては最初からレスポンシブル化されていることもあるようです。
次回は当サイトのお問合せフォームで実装している、Contact Form 7でプライバシーポリシーを追加する方法を紹介します。
