将错误消息放在匹配输入WordPress下面

Question

就像我在标题中所说，我想在匹配输入下方显示错误消息。

我正在使用WordPress 4.7.5和Contact Form 7插件。

现在我得到了这个：

通常我的表单如下：

这是我的HTML（联系表单7插件）：

<div class="inp-form">[text* your-name class:obligatoire placeholder "Nom*"]</div>
<div class="inp-form">[text* your-name class:obligatoire placeholder "Prénom*"]</div>
<div class="inp-form">[email* your-email class:obligatoire placeholder "Email*"]</div>
<div class="inp-form">[tel* tel id:tel class:obligatoire  placeholder "Téléphone*"]</div>

我只向你展示了4个输入，它应该是：）

我的SCSS：

 form.wpcf7-form{
> .inp-form{
  display: inline;
  width: auto;

  input[type=text], input[type=email], input[type=number], input[type=tel]{
    width: calc( 50% - 5px );
  }

  &:nth-child(odd){
    input{
      float: right;
    }
  }
}

input[type=text], input[type=email], input[type=number], input[type=tel], textarea{
  color: #999;
  background-color: #eee;
  padding: 16px;
  border: 0;
  margin-bottom: 10px;
  height: auto;
  border-radius: 0;
}

.radio-first{
  display: inline;
  padding: 10px 0;
  float: left;
}

.radio-last{
  display: inline;
  padding: 10px 0;
  float: right;
}

textarea{
  width: 100%;
}

input[type=submit]{
  float: right;
}

.wpcf7-mail-sent-ok{
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 5px;
  border-radius: 3px;
}

.wpcf7-not-valid-tip {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 5px;
  border-radius: 3px;
  width: calc( 50% - 5px );
  display: none;
}

.wpcf7-validation-errors{
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  padding: 5px;
  margin: 20px 0 0;
  border-radius: 3px;
  display: none;
}

}

您必须知道生成的HTMl是：

希望你有个主意......