简介
bootstrap3-contact-form 是一个基于 Bootstrap 3 的联系表单组件，它提供了一个简单易用的 API，让你能够快速地在你的网站上添加一个美观、响应式的联系表单。
安装
在使用之前，请确保已经安装了 Node.js 和 npm。如果没有，请先安装它们。
打开终端或命令行，并进入你的项目目录。
运行以下命令来安装 bootstrap3-contact-form：
npm install bootstrap3-contact-form --save
使用
在 HTML 页面中引入 Bootstrap 的 CSS 文件和 JavaScript 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
在 HTML 页面中添加一个表单：
-- -------------------- ---- ------- ----- ---------------- -------------- ---- ------------------- ------ --------------------- ------ ----------- -------------------- --------- ----------- --------- ------ ---- ------------------- ------ ---------------------- ------ ------------ -------------------- ---------- ------------ --------- ------ ---- ------------------- ------ ------------------------ --------- -------------------- ------------ -------------- -------- -------------------- ------ ------- ------------- ---------- ------------------------ -------
展开代码在 JavaScript 文件中初始化表单：
const ContactForm = require("bootstrap3-contact-form"); const contactForm = new ContactForm("#contactForm", { // 配置选项，例如： // recipientEmail: "你的邮箱地址", // subject: "联系表单", // messages: { success: "发送成功！" }, });
配置选项：可以通过传入一个对象来配置表单组件的行为。以下是可用的选项：
recipientEmail：（必须）收件人的电子邮件地址。subject：邮件主题。messages：一个对象，包含表单结果消息的自定义文本。默认情况下，其属性值为：{ success: "Your message has been sent." }。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- - ------- ------------ ----- ---------------- -------------------------------------------------------------------------------------------- ------- ------ ---- ------------------ ----------- ------- --------- ---- -- --- ---- ----- -- ---- -- - ------------ ----- ---------------- -------------- ---- ------------------- ------ ----------------------- ------ ----------- -------------------- --------- ----------- --------- ------ ---- ------------------- ------ ------------------------- ------ ------------ -------------------- ---------- ------------ --------- ------ ---- ------------------- ------ ----------------------------- --------- -------------------- ------------ -------------- -------- -------------------- ------ ------- ------------- ---------- ---------------------------- ------- ------ ------- --------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
