Question

我使用联系表格7（wordpress，联系表格）作为订单页面对于产品。但我有兴趣以相同的3列样式设置HTML-Mail模板的样式如图。有没有简单的方法呢？ enter image description here

Answer 1

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

要执行此操作，您需要选择＆＃34;使用HTML内容类型＆＃34;为了在电子邮件中使用html。这是关于＆＃34; mail＆＃34; CF7部分。

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

首先使用带有XHTML doctype的空白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

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

Answer 2

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

css style

.wpcf7-text {width：150px！important; }

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

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

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

Answer 3

有两种方式

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

[简单方法]

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

联系表格7（wordpress）样式的hml邮件模板

3 个答案: