Customize Style Contact Form 7 on WordPress

Sep 13, 2024

—

コイアイちゃん

in CSS, WordPress

What is this?

I’ve edited the CSS for Contact Form 7, a popular WordPress plugin for creating contact forms.

When implemented, it looks like this:

A small detail I focused on was adding an ease effect to the focus state.

How to Apply Styles to Contact Form 7

First, add Contact Form 7 as a new plugin.

Download Contact Form 7

Once installed and activated, you should see a new “Contact” item in the left sidebar of your WordPress dashboard. Click on it.

When you open it, you’ll likely see a form that has already been added. Open that form.

In the form editor, paste the following code (feel free to copy-paste):

The code is based on the classes and elements from the official Contact Form 7 site. I’ve styled it in a way that minimally changes the default settings upon installation.

タグの使い方

<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>

Once the form setup is complete, navigate to a static page where you want to add the form.

Here’s an example of how it looks when added.

I’ve kept the code minimal, avoiding unnecessary things like titles, background color settings, or size restrictions. Feel free to adjust it to suit your environment.