如何使用 Bootstrap 和自己的样式表设置 WP Contact Form 7 插件表单的样式？

Question

我的网站我正在使用 WordPress 联系表格 7 从我的用户那里获取一些信息。该网站是使用 Bootstrap 框架构建的。

现在我想在表单中使用我的自定义 css 样式和 Bootstrap 样式。所以我正在使用以下代码。但它不是造型。

谁能告诉我如何设置这个表单的样式？

这是我在联系表格 7 中使用的内容

<h3>Which Goal You Are Looking To Achieved ?</h3>

<div class="asking-box">

    <h4><strong>Select your Goals</strong></h4>

    <form class="form-horizontal" role="form">

    <div class="form-group">
        <label class="control-label col-sm-6" for="question">Lasting happiness </label>
        <div class="col-sm-12">
            [checkbox checkbox-959 class:"my-check"]
        </div>
     </div>
    <div class="form-group">
        <label class="control-label col-sm-6" for="question">Lasting happiness </label>
        <div class="col-sm-12">
            [checkbox* checkbox-404 class:my-check]
        </div>
     </div>


   </form>
</div> 

Answer 1

在您的标题中添加此链接

 <link href="/css/materialize.min.css" rel="stylesheet" type="text/css">
 <link href="/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">

这是在您的页面中

 <div class="register-box">
       <div class="container">
          <div class="row">
             <div class="inner-srch-pg">
                <div class="bnr-srch-box">
                   <form action=""  method="post" >
                      <div class="rgstr-form-cntnt">
                        <div class="row">
                         <?php echo do_shortcode('[contact-form-7 id="286" title="Contact form 1"]'); ?>
                         </div>
                         </div>
                   </form>
                </div>
             </div>
          </div>
       </div>
    </div>
    </div>

Answer 2

您现在可以使用此plugin 为您的 cf7 表单设计响应式网格布局，从而更轻松地实现这一目标。