简介
bootstrap3-contact-form 是一个基于 Bootstrap 3 的联系表单组件,它提供了一个简单易用的 API,让你能够快速地在你的网站上添加一个美观、响应式的联系表单。
安装
在使用之前,请确保已经安装了 Node.js 和 npm。如果没有,请先安装它们。
打开终端或命令行,并进入你的项目目录。
运行以下命令来安装 bootstrap3-contact-form:
--- ------- ----------------------- ------
使用
在 HTML 页面中引入 Bootstrap 的 CSS 文件和 JavaScript 文件:
----- ---------------- -------------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------------
在 HTML 页面中添加一个表单:
----- ---------------- -------------- ---- ------------------- ------ --------------------- ------ ----------- -------------------- --------- ----------- --------- ------ ---- ------------------- ------ ---------------------- ------ ------------ -------------------- ---------- ------------ --------- ------ ---- ------------------- ------ ------------------------ --------- -------------------- ------------ -------------- -------- -------------------- ------ ------- ------------- ---------- ------------------------ -------
在 JavaScript 文件中初始化表单:
----- ----------- - ----------------------------------- ----- ----------- - --- --------------------------- - -- -------- -- --------------- --------- -- -------- ------- -- --------- - -------- ------- -- ---
配置选项:可以通过传入一个对象来配置表单组件的行为。以下是可用的选项:
recipientEmail
:(必须)收件人的电子邮件地址。subject
:邮件主题。messages
:一个对象,包含表单结果消息的自定义文本。默认情况下,其属性值为:{ success: "Your message has been sent." }
。
示例代码
完整的示例代码如下:
--------- ----- ----- ---------- ------ ----- ---------------- ---------------- - ------- ------------ ----- ---------------- -------------------------------------------------------------------------------------------- ------- ------ ---- ------------------ ----------- ------- --------- ---- -- --- ---- ----- -- ---- -- - ------------ ----- ---------------- -------------- ---- ------------------- ------ ----------------------- ------ ----------- -------------------- --------- ----------- --------- ------ ---- ------------------- ------ ------------------------- ------ ------------ -------------------- ---------- ------------ --------- ------ ---- ------------------- ------ ----------------------------- --------- -------------------- ------------ -------------- -------- -------------------- ------ ------- ------------- ---------- ---------------------------- ------- ------ ------- --------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------