联系表格 7 (wordpress) 样式的 hml 邮件模板答案

【问题标题】：contact form 7 (wordpress) style the hml mail template联系表格 7 (wordpress) 样式的 hml 邮件模板
【发布时间】：2012-11-01 07:43:49
【问题描述】：

我正在使用联系表格 7（wordpress、联系表格）作为订单页面为产品。但我对以相同的 3 列样式设置 HTML-Mail-template 的样式很感兴趣如图。有什么简单的方法吗？

【问题讨论】：

编辑插件的style.css 但不推荐这样做。
我觉得你得检查一下插件的HTML消息格式，看能不能修改。我认为这不是一件容易的事，但不知道插件。

标签： wordpress contact-form-7

【解决方案1】：

是的，你可以做到，你需要在现有的主题文件中添加一些 css，因为不建议修改插件文件，我可以看到你已经使用了文本框，你可以这样做

CSS 样式

.wpcf7-text { 宽度:150px !important; }

.wpcf7-text 是联系表格7中的文本框类在表单设置中

你的名字-[text-text-20]

你的地址-[text-text-30]

【讨论】：

这是另一个问题的正确答案，而不是上面问的那个。

【解决方案2】：

有两种方法

(1) 覆盖 Contact Form-7 本身的 CSS。这可以通过 .wpcf7-[inner class] 然后你的 CSS 代码来完成。

[简单的方法]

(2) 您可以使用此插件https://wordpress.org/plugins/contact-form-7-style/ 来设置联系表格 7 的样式。它有多种选择。虽然它并不完美，但肯定是一个解决方案。希望这会有所帮助！

【讨论】：

【解决方案3】：

我认为前两个答案误解了这个问题。 Johny 询问他如何编辑通过联系表格 7 发送给他自己或填写表格的人的 html 电子邮件。

为此，您需要选择“使用 HTML 内容类型”选项才能在电子邮件中使用 html。这是 CF7 的“邮件”部分。

那么，为 html 电子邮件模板设置样式的最简单方法是使用表格。

首先从一个带有 XHTML 文档类型的空白 html 模板开始：

StackOverflow 电子邮件模板
然后你可以添加任何你需要的 html 和信息，让它看起来像你想要的那样：

例如，从没有边距或内边距开始可能更容易，因此您可以在 body 标签中添加一些样式：

<body style="margin: 0; padding: 0;">

然后您需要将所有样式内联添加到表格中，因为您的电子邮件没有发送样式表。您还可以像使用普通 html 一样在该部分中创建内联样式部分。

所以我会为你的例子这样做：

<table align="center" border="0" cellpadding="2" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse: collapse; font-family: Arial,sans-serif; font-size:1em;" >

设置完成后，您需要将单元格添加到表格中。

例如，您的第一行和第二行可能是这样的：

<tbody>
    <tr>    
    <td colspan="6">To: [your-name]</td>
    </tr>
    <tr>
        <td>Falt Utan Flask:</td>
        <td>[Input-One] Back</td>
        <td>Falt Utan Flask:</td>
        <td>[Input-Two] Back</td>
        <td>Set Datum:</td>
        <td>[Date-324]</td>
    </tr>
</tbody>

每个都是一个新行，每个部分都是一个新单元格。然后继续填充和构建您的表格以显示您想要的方式。

您可以根据需要将内联样式添加到或元素中，也可以如前所述在区域中添加内联样式。

这是我需要为使用联系表格 7 插件的网站做的事情。我发现这些教程非常有用。

Tut 1
Tut 2

希望我自己没有误解这个问题，它有点模棱两可，但它是我找到的最接近我正在寻找的问题。

【讨论】：