Styling Contact Form 7 fields

时间:2013-01-18 作者:user26221

我们正在使用wordpress插件联系人表单7,希望指定主题字段的宽度(假设答案适用于设置任何字段的宽度),并将您的电子邮件重新定位到您的姓名字段旁边。结果将是电子邮件和姓名在一行上,主题下方为全宽,您的邮件位于主题下方。谢谢

2 个回复
SO网友:Mayeenul Islam

我不想试试,但你自己试试:

联系人表单7使用如下内容:

<p>Your Name (required)<br />
    [text* your-name] </p>
而不是使用段落标记(<p>) 使用范围(<span>), 还有一些内联CSS,如:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
width: 48% 会让你做一些margin 事情。然后使用<div> 清除float 各方面:

<div style="clear:both;"></div>
然后是其他代码:

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
因此,所有代码将是:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
别忘了改变具体的弹头,如your-email, your-subject 特定于您的联系人表单ID
快乐编码!

SO网友:Travis Pflanz

比前面的答案简单得多:

将类添加到表单生成器中的输入字段-[text* your-name class:your-name]

然后在CSS文件中设置样式。

示例:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - 哪里#wpcf7-f613-p57-o1 是您正在使用的表单的id。

结束
Styling Contact Form 7 fields - 小码农CODE - 行之有效找到问题解决它

Styling Contact Form 7 fields

时间:2013-01-18 作者:user26221

我们正在使用wordpress插件联系人表单7,希望指定主题字段的宽度(假设答案适用于设置任何字段的宽度),并将您的电子邮件重新定位到您的姓名字段旁边。结果将是电子邮件和姓名在一行上,主题下方为全宽,您的邮件位于主题下方。谢谢

2 个回复
SO网友:Mayeenul Islam

我不想试试,但你自己试试:

联系人表单7使用如下内容:

<p>Your Name (required)<br />
    [text* your-name] </p>
而不是使用段落标记(<p>) 使用范围(<span>), 还有一些内联CSS,如:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
width: 48% 会让你做一些margin 事情。然后使用<div> 清除float 各方面:

<div style="clear:both;"></div>
然后是其他代码:

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
因此,所有代码将是:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
别忘了改变具体的弹头,如your-email, your-subject 特定于您的联系人表单ID
快乐编码!

SO网友:Travis Pflanz

比前面的答案简单得多:

将类添加到表单生成器中的输入字段-[text* your-name class:your-name]

然后在CSS文件中设置样式。

示例:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - 哪里#wpcf7-f613-p57-o1 是您正在使用的表单的id。

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s