contact form 7定制

最新推荐文章于 2024-10-09 11:44:48 发布

原创最新推荐文章于 2024-10-09 11:44:48 发布 · 2k 阅读

CC 4.0 BY-SA版权

本文介绍如何配置ContactForm7 (CF7) 使用SMTP发送邮件，并通过安装WPMailSMTP插件实现外部SMTP服务集成。此外，还详细展示了如何在WooCommerce产品页面中嵌入CF7表单以及定制其样式。

cf7需要所在主机的域名相同的email地址smtp发送邮件，,如果需要使用一个外部smtp发送email,需要安装 WP Mail SMTP插件， 否则不发送邮件。 (Easy WP SMTP 设置更简单，国内的qq.com 开启授权方式很好）

contact form 7在woocommerce 的每一个产品详情页中出现，只需要在页面中加入 contact form 7:

在woocommerce中加入： wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php

<?php

endif;

echo do_shortcode('[contact-form-7 id="161" title="Contact form 1"]');

在ocean wp模板中，如果在endif前，会不显示。

用css 定制contact form 7:

div.wpcf7 {

background-color: #fbefde;

border: 1px solid #f28f27;

padding:20px;

}

.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea {

background:#725f4c;

color:#FFF;

font-family:lora, sans-serif;

font-style:italic;

}

.wpcf7 input[type="submit"],.wpcf7 input[type="button"] {

background-color:#725f4c;

width:100%;

text-align:center;

text-transform:uppercase;

}

----------------------------------------------------

contact form 7 在页面中的html:

<div role="form" class="wpcf7" id="wpcf7-f161-p29-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/?product=magnolia-dress#wpcf7-f161-p29-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="161" />
<input type="hidden" name="_wpcf7_version" value="5.0.3" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f161-p29-o1" />
<input type="hidden" name="_wpcf7_container_post" value="29" />
</div>
<p><label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40"
   class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40"
   class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
   aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40"
   class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40"
   rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>

<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none">
</div>
</form>
</div>