带有联系表格布局的问题

Question

我的网站上的联系表格存在问题：my website。

如您所见，它根本没有格式化，应该看起来像这样：theme website。

我进入了源代码，可以看到表单之间有很多区别。

我一直在给表单自定义CSS，但是似乎没有任何效果：wordpress screenshot。

这里是主题站点代码，用于引用我的表单应具有的外观：

<div class="vc_col-sm-8 contact-page-form ">
<div role="form" class="wpcf7" id="wpcf7-f187-p491-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form action="/dustrialwp/contact-us/#wpcf7-f187-p491-o1" method="post" class="wpcf7-form" novalidate="novalidate">
        <div style="display: none;">
            <input type="hidden" name="_wpcf7" value="187" />
            <input type="hidden" name="_wpcf7_version" value="5.1.3" />
            <input type="hidden" name="_wpcf7_locale" value="en_US" />
            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f187-p491-o1" />
            <input type="hidden" name="_wpcf7_container_post" value="491" />
        </div>
        <div class="contact-feedback-block">
            <div class="form-row">
                <div class="form-group col-md-6 pr-lg-3"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control rounded-0" aria-required="true" aria-invalid="false" placeholder="First Name*" /></span></div>
                <div class="form-group col-md-6">
                    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control rounded-0" aria-required="true" aria-invalid="false" placeholder="Last Name*" /></span></div>
                <div class="form-group col-md-6 pr-lg-3">
                    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control rounded-0" aria-required="true" aria-invalid="false" placeholder="Email Address" /></span></div>
                <div class="form-group col-md-6">
                    <span class="wpcf7-form-control-wrap your-phone"><input type="text" name="your-phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control rounded-0" aria-required="true" aria-invalid="false" placeholder="Phone" /></span></div>
            </div>
            <div class="form-group">
                <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="80" rows="5" class="wpcf7-form-control wpcf7-textarea form-control rounded-0" aria-invalid="false" placeholder="How can we help?"></textarea></span></div>
            <p>
                <button type="submit" class="get_quote_btn">send message</button>
        </div>
        <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
</div>

请，你能告诉我我要去哪里错吗？提前非常感谢。

Answer 1

使用您的WP联系人表格7引导网格内的短代码。参见下面的示例：

<div class="form-row">
    <div class="form-group col-md-6 pr-lg-3">
      <label>Your Name</label>
       [text* your-name]
    </div>
    <div class="form-group col-md-6 pr-lg-3">
      <label>Your Email</label>
       [email* your-email]
    </div>
 ....
</div
 <div class="form-group">[TEXTAREA SHORTCODE HERE]</div>