README

轻量级前端联系表单插件。受另一个OctoberCMS插件的启发。

它主要为了个人使用，因为其他插件并不总是符合我的需求。

欢迎您使用它，并且可以自由地提出关于插件的任何建议或意见。

优点

• 可翻译的内容
• 文件上传作为电子邮件附件
• 自动回复选项

要求

• 为了处理表单请求，必须在您的布局/页面上包含Ajax 框架。
• 配置您的邮件设置，以确保您的服务器可以发送电子邮件。

可选

• 如果您想包含多语言内容，请使用Translate插件。
• 如果您想启用自动订阅到邮件列表，请使用MailgunSubscribe。
• 如果您想启用人类验证测试并保护您的网站免受垃圾邮件和滥用，请设置reCaptcha。

设置

此插件创建了一个设置菜单项，可以通过导航到 设置 > 营销 > 联系表单 来找到。此页面允许设置验证码验证、确认消息、输入标签、按钮文本或启用文件上传以附加和自动回复。

如果启用了Translate，自动回复电子邮件、按钮文本和标签将是可翻译的。

用法

您可以将联系表单放在任何前端页面上。将 contactForm 组件添加到页面或布局中。

添加联系表单的最简单方法是使用组件的默认部分和 {% component %} 标签。将其添加到您希望显示表单的页面或布局中

{% component 'contactForm' %}

如果默认部分不适合您的网站，请用自定义代码替换组件标签，例如

<div class="confirm-contact-container">
</div>
<form id="contact-form"
  data-request="{{ __SELF__ }}::onMailSend"
  data-request-update="'{{ __SELF__ }}::confirm': '.confirm-contact-container'"
  {% if __SELF__.enableFileUpload %}
  data-request-files
  {% endif %}
  >
  <div class="form-group">
    <label for="name">
      {{label.name}}
    </label>
    <input type="text" name="name" class="form-control">
  </div>
  <div class="form-group">
    <label for="email">
      {{label.email}}
    </label>
    <input type="text" name="email" class="form-control">
  </div>
  {% if __SELF__.enableFileUpload %}
  <div class="form-group">
    <label for="attachment">{{label.attachment}}</label>
    <input type="file" name="attachment" class="form-control">
  </div>
  {% endif %}
  <div class="form-group">
    <label for="message">
      {{label.message}}
    </label>
    <textarea rows="5" name="message_content" class="form-control"></textarea>
  </div>
  {% if __SELF__.enableCaptcha %}
    <div class="form-group">
      <label for="g-recaptcha">
        {{label.captcha}}
      </label>
      <div class="g-recaptcha" data-sitekey="{{ __SELF__.captchaSiteKey }}"></div>
    </div>
  {% endif %}
  {% if __SELF__.mailgunSubscribeExist %}
    <div class="form-group">
      <div class="checkbox">
        <label><input type="checkbox" name="maillist_subscribe" checked>{{label.maillist}}</label>
        <input type="hidden" name="confirm_subscribe" value="true">
      </div>
    </div>
  {% endif %}
  <button class="btn btn-primary btn-lg pull-right mt-4">
    {{label.button_text}}
  </button>
</form>

该示例使用标准部分 {{ __SELF__ }}::confirm 来显示联系确认消息。确认消息将在 .confirm-contact-container 中显示。默认部分位于 plugins/grofgraf/contactme/components/contactform/confirm.htm。

联系和自动回复的电子邮件模板可以在 设置 > 邮件 > 邮件模板 下自定义

作者

• GrofGraf

许可

MIT 许可证 (MIT)

版权所有 © 2017 GrofGraf

本软件及其相关文档文件（以下简称“软件”）的使用权在此免费授予任何人，任何获得软件副本的人可以无限制地使用软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许将软件提供给他人以进行上述操作，但需遵守以下条件

上述版权声明和本许可声明应包含在软件的所有副本或主要部分中。

软件按“现状”提供，不提供任何形式的保证，无论是明示的还是隐含的，包括但不限于适销性、特定用途的适用性和非侵权性。在任何情况下，作者或版权所有者不对任何索赔、损害或其他责任负责，无论这些责任是在合同行为、侵权行为或其他情况下产生的，无论这些责任是否与软件或软件的使用或其他操作有关。