我正在使用 Cockpit 和 React JS 开发一个网站。
在这个项目中,有一个非常简单的联系表格(姓名、电子邮件、消息)。
我通过 Forms 模块在 Cockpit 中创建了一个表单,并在 Cockpit (config/config.yaml) 中添加了一个配置文件:
mailer:
from: no-reply@***.com
transport: smtp
host: smtp.ionos.fr
user: bonjour@***.com
password: ***
port: 587
auth: true
encryption:
表单模块被配置为在 Cockpit 中记录数据,但也会在添加新记录后立即向我发送电子邮件(用简单的语言,只要用户单击表单上的提交按钮)。这就是我必须使用这些信息创建 config/config.yaml 文件的原因。
一切都很完美。数据很好地记录在 Cockpit 中,我收到了电子邮件。
但我有一个问题。
我想更改电子邮件的主题。目前,当我收到一封电子邮件时,主题是:“新表单数据:联系人”。
在 modules/Forms/bootstrap.php 文件的第 325 行...我发现了这个:
$response = $this->app->mailer->mail($frm['email_forward'], $options['subject'] ?? "New form data for: {$formname}", $body, $options);
因此,在此文件中管理电子邮件的主题。因此,理论上,可以传递一个选项来修改电子邮件的主题。
问题是,我不知道应该如何发送这些信息。
我尝试将信息添加到 config/config.yaml 文件中,但它不起作用。像这样 :
mailer:
from: no-reply@***.com
subject: test /* <= I added this information */
transport: smtp
host: smtp.ionos.fr
user: bonjour@***.com
password: ***
port: 587
auth: true
encryption:
在此页面上,表明有必要创建一个名为“__mailsubject”的隐藏字段,并将所需主题作为值。问题是我使用的是 React JS(+ axios)而不是 PHP(无法访问:$_REQUEST,$_POST,...)。
这是我的 React 组件的代码
import React, { Component } from "react";
import axios from "axios";
class Form extends Component {
constructor(props) {
super(props);
this.onChangeName = this.onChange.bind(this);
this.onChangeEmail = this.onChange.bind(this);
this.onChangeMessage = this.onChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
this.state = {
name: '',
email: '',
message: ''
}
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
onSubmitForm(e) {
e.preventDefault()
const dataForm = {
"form": {
name: this.state.name,
email: this.state.email,
message: this.state.message
}
};
axios
.post('http://dev.site.com/api/forms/submit/contact?token=XXX', dataForm)
.then((res) => {console.log(res.data)} )
.catch((error) => {console.log(error)} );
this.setState({
name: '',
email: '',
message: ''
})
}
render() {
return (
<>
<div className="form">
<div className="title">{this.props.title}</div>
<div className="content">
<form onSubmit={this.onSubmitForm}>
<label htmlFor="name">Your name :</label>
<input name="name" value={this.state.name} onChange={this.onChangeName} type="text" />
<label htmlFor="email">Your email :</label>
<input name="email" value={this.state.email} onChange={this.onChangeEmail} type="text" />
<label htmlFor="message">Your message :</label>
<textarea name="message" value={this.state.message} onChange={this.onChangeMessage}></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</>
);
}
}
export default Form;
我试过这个。但它不起作用:
const dataForm = {
"form": {
__mailsubject: "test",
name: this.state.name,
email: this.state.email,
message: this.state.message
}
};
PS:稍后我将使用 Formik 和 Yup 来创建和验证表单。
除了直接更改 modules/Forms/bootstrap.php 文件之外,我看不到如何实现我想要的!但这不是一个好的解决方案,因为它会在更新期间给我带来问题!
唯一的解决方案是使用表单模板,比如这里?
一个主意 ?