Contact Form 7 の見た目を綺麗にする　HTML CSS コピペOK

9月 13, 2024

—

コイアイちゃん

in CSS, WordPress

これは何？

WordPressの定番のお問い合わせ用プラグインのcontact form 7 のCSSを編集しました。

実装すると以下のようになります。

focus に少しease を入れるのがこだわり

コンタクトフォーム７にスタイルを適応する方法

プラグインからcontact form 7を新規追加します。

ダウンロード

インストールして有効化すると左サイドバーに Contact という項目ができていると思うので、クリックします。

開くと、すでに追加されているフォームがあると思いますので、
そちらを開きます。

開いたら、編集画面になりますので以下のコードを貼り付けます（コピペOK）

コードは contact form 7 の公式サイトを頼りにクラスなどの指定をしました。
なるべくインストール時の標準の状態を崩さずにスタイリングしています。

タグの使い方

<label class="form__label"> 企業名
    [text* your-name class:form__textInput autocomplete:name] </label>

<label class="form__label"> お名前
    [text* your-name class:form__textInput autocomplete:name] </label>

<label class="form__label"> メールアドレス
    [email* your-email class:form__textInput autocomplete:email] </label>


<label class="form__label"> お問い合わせ内容
    [textarea* your-message class:form__textInput] </label>

[submit "Submit"]

<style>
.form__container {
  max-width: 400px;
  margin:0 auto;
}

.form__label {
  display: block;
  margin-top:1.5em;
  color: gray;
  font-size: 0.8em;
}



.form__textInput {
  width: calc(100% - 2.4em);
  border: 1px #c0c0c0 solid;
  border-radius: 2px;
  padding: 1em 1.2em;
  color: 1e1e1f;
}

.form__textInput:focus {
  transition: .3s ease-out;
  outline: 1px skyblue solid;
}

.wpcf7-submit {
  display: block;
  color: white;
  background-color: black;
  padding: 0.8em 2em;
  border-radius: 4px;
  margin: 2em auto;
  border: none;
}

.wpcf7-submit:active {
  background-color: rgb(95, 95, 95);
  /* This style is created by https://coiai.net */
}
</style>

フォームの入力が完了したら、固定ページに移動して追加しました。

次の画像のような感じで追加しています。

コード自体にはタイトルや背景色指定、サイズ制限などの余計なことはなるべくしないようにしました。お使いの場合は適宜環境に合わせてお使いください。