联系表单7 Wordpress插件无法正确呈现

时间:2015-11-12 18:01:17

标签: css wordpress wordpress-plugin tesseract contact-form-7

我正在使用Contact Form 7插件为wordpress页面创建自定义表单:http://dentclaims.com/contact,单选按钮和复选框显示在单独的行中。我使用以下内容:

Tesseract Wordpress主题v2.1   - Wordpress v4.3.1   - Chrome for Mac版本46.0.2490.80(64位)

以下是CF7表格中的代码:

<p>This appointment is for*:  [text* patient-name] </p><br />
<p>Requested by: [text your-name] </p>

Your email*:  [email* your-email]

<p>Your telephone number*:  [tel* your-tel] </p>

<p>Preferred date (select up to three)
First choice: [date date-first]  Second choice choice:  [date date-second] Third choice:  [date date-third] </p>

Preferred time:[radio radio-time "Any time" "10:00am-Noon" "Noon-2:00pm" "2:00pm-5:00pm"]

<p>Reason for your visit:  [checkbox checkbox-reason "Exam and cleaning" "Consultation" "Previously discussed treatment" "Other"]</p>

<p>Notes for the doctor:<br />
[textarea textarea-notes]</p>

<p>[submit "Request Appointment"]</p>

主题CSS中有.wpcf7类的2个引用:

这里:

.wpcf7-submit{
    float: left;
    clear: both;
    margin-bottom: 20px;

在这里:

/* CONTACT FORM 7 */
.wpcf7-form-control-wrap { width: 50%; }

无论我如何安排表单元素,它们仍然呈现不正确。谁有人建议解决方案?要检查的另一个CSS文件? N00b在这里,努力寻找解决方案。

1 个答案:

答案 0 :(得分:0)

CSS中有一行代码导致所有span元素的宽度为100%:

#content form span {
    width: 100%;
}

使其不那么模糊,以免影响无线电选项标签。