如何在我自己的 HTML 中使用 Wordpress Contact Form 7？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18339500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Wordpress Contact Form 7 in my own HTML?
提问by javier_el_bene
I want to use Wordpress Contact Form 7 on my website, but I already have an HTML/CSS layout for it. So, I want to modify the plugin to use it with that custom HTML code.
我想在我的网站上使用 Wordpress Contact Form 7，但我已经有了一个 HTML/CSS 布局。因此，我想修改插件以将其与该自定义 HTML 代码一起使用。
<form id="contact_form" action="" method="post">
<div>
<label for="contact_name">Nombre</label>
<input id="contact_name" type="text" required aria-required="true" placeholder="Nombre">
</div>
<div>
<label for="contact_email">Email</label>
<input id="contact_email" type="mail" name="email" required aria-required="true" placeholder="[email protected]">
</div>
<div id="area_message">
<label for="contact_message">Mensaje</label>
<textarea id="contact_message" type="mail" required aria-required="true" placeholder="Mensaje"></textarea>
<input id="contact_btn" type="submit" value="enviar">
</div>
</form>
My question is: do I have to modify this code with some Contact Form 7 code or should I include this into the plugin administration?
我的问题是：我是否必须使用一些 Contact Form 7 代码修改此代码，还是应该将其包含在插件管理中？
采纳答案by Chris Ferdinandi
No need to modify anything. Contact Form 7 supports this out of the box. Have you tried using it or looked at the documentation yet? If so, what is or isn't working for you?
不需要修改任何东西。联系表格 7 支持开箱即用。您是否尝试过使用它或查看过文档？如果是这样，什么适合或不适合您？
Update based on comments below
根据以下评论更新
Contact Form 7 gives you a shortcode for each field you generated. You can wrap the shortcode in HTML in the "Form" section. Using the example you provided in your question, that would look like this:
联系表格 7 为您生成的每个字段提供一个简码。您可以在“表单”部分的 HTML 中包装短代码。使用您在问题中提供的示例，如下所示：
<div>
<label for="contact_name">Nombre</label>
[text* your-name 20/40 class:required "John Smith"]
</div>
You don't need to wrap this in a <form>tags - Contact Form 7 does that already (and assigns an ID).
您不需要将其包装在<form>标签中 - Contact Form 7 已经做到了（并分配了一个 ID）。
In your WordPress text editor, use the form shortcode provided at the top of the Contact Form 7 interface to display your final output. If you'd prefer to put this in a PHP template, use this:
在您的 WordPress 文本编辑器中，使用 Contact Form 7 界面顶部提供的表单简码来显示您的最终输出。如果您更愿意将其放在 PHP 模板中，请使用以下命令：
<?php echo do_shortcode("SHORTCODE GOES HERE"); ?>
Contact Form 7 also has a section for mail, where you would identify who the mail should go to and come from. Some hosting providers (Dream Host, for example), require the FROM email to be the same domain as the site itself (a form on http://example.comwould need to send emails from [email protected], or a similar address). To make sure you can still reply to the right address, you would add a replyto header like this:
联系表 7 也有一个邮件部分，您可以在其中确定邮件应该发送给谁和来自谁。某些托管服务提供商（例如 Dream Host）要求 FROM 电子邮件与站点本身具有相同的域（http://example.com上的表单需要从 [email protected] 或类似的地址发送电子邮件）地址）。为了确保您仍然可以回复正确的地址，您可以添加一个回复标题，如下所示：
Reply-To: [email]
Only change [email]to match whatever the outputted shortcode for your email field was.
仅更改[email]以匹配您的电子邮件字段的输出短代码。
But seriously, this stuff is ALL in the documentation for Contact Form 7: http://contactform7.com/docs/
但说真的，这些东西都在联系表格 7 的文档中：http: //contactform7.com/docs/
回答by KenKey
You can also use the wordpress plugin called Contact Form 7 Element Converter. All you have to do is copy and paste your html form into contact form 7 and it converts your elements into shortcodes. It speeds up alot of my projects.
您还可以使用名为 Contact Form 7 Element Converter 的 wordpress 插件。您所要做的就是将您的 html 表单复制并粘贴到联系表单 7 中，它会将您的元素转换为短代码。它加快了我的许多项目。
Here is the link: https://wordpress.org/plugins/cf7-element-converter/
