如何在WordPress 5.8.1中通过Contact Form 7实现自定义HTML联系表单

一、适配Contact Form 7表单格式 #

你不需要修改原有表单的结构，只需要把原生HTML标签替换为Contact Form 7对应的短代码即可，所有类名、ID、占位符都保留，和原有CSS完全匹配。直接复制以下代码粘贴到Contact Form 7的表单编辑区即可：

<h1>Elegant Contact Form</h1>
<div class="half left cf">
  [text* input-name id:input-name placeholder "Name"]
  [email* input-email id:input-email placeholder "Email address"]
  [text input-subject id:input-subject placeholder "Subject"]
</div>
<div class="half right cf">
  [textarea* input-message id:input-message placeholder "Message"]
</div>  
[submit id:input-submit "Submit"]

注：短代码里的*代表该字段为必填项，可根据实际需求调整。

二、CSS加载失效修复 #

你提供的原始代码是SCSS格式，无法直接在WordPress中生效，下方是编译完成的纯CSS代码，直接使用即可：

@import url(https://fonts.googleapis.com/css?family=Merriweather);

*,
*:before,
*:after {
  box-sizing: border-box;
}

html, body {
  background: #f1f1f1;
  font-family: 'Merriweather', sans-serif;
  padding: 1em;
}

h1 {
  text-align: center;
  color: #a8a8a8;
  text-shadow: 1px 1px 0 rgba(255,255,255, 1);
}

form {
  max-width: 600px;
  text-align: center;
  margin: 20px auto;
}

form input, form textarea {
  border: 0;
  outline: 0;
  padding: 1em;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 1em;
  font-family: 'Merriweather', sans-serif;
  box-shadow: 0 1px 1px rgba(0,0,0, 0.1);
  resize: none;
}

form input:focus, form textarea:focus {
  box-shadow: 0 0px 2px rgba(231, 76, 60, 1)!important;
}

form #input-submit {
  color: white; 
  background: #e74c3c;
  cursor: pointer;
}

form #input-submit:hover {
  box-shadow: 0 1px 1px 1px rgba(170,170,170, 0.6); 
}

form textarea {
  height: 126px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%; 
}

@media (max-width: 480px) {
  .half {
     width: 100%; 
     float: none;
     margin-bottom: 0; 
  }
}

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

CSS部署优先选以下两种方式，不会被页面构建器拦截：

• 进入WordPress后台→外观→自定义→额外CSS，粘贴上述代码后保存，全站生效
• 若仅需作用于当前表单页面，直接在页面构建器的当前页面自定义CSS区块粘贴代码即可

三、最终部署步骤 #

1. 保存Contact Form 7表单后，复制生成的短代码（格式类似[contact-form-7 id="xxx" title="联系表单"]）
2. 在目标页面添加短代码区块，粘贴上述短代码
3. 发布页面即可生效
   最终效果预览：
   

内容的提问来源于stack exchange，提问作者Kusumakar Pant