英文:
Custom form to send on outlook email through spring using freemarker (ftl template)
问题
我想要通过邮件向最终用户发送带有表单元素的电子邮件。因此，最终用户可以在电子邮件中填写表单详细信息并提交。
我已经创建了一个ftl模板：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table>
<tr>
<td>
This e-mail is for project approval :<br/>
<a href="">${projectName}</a><br/><br/>
<form action="" method="post" id="projectApprovalFrm">
Status Reason:<br>
<textarea name="statusReason"></textarea><br><br>
</form>
<input type="button" value="Reject" id="reject" />
<input type="button" value="Approve" id="approve" />
</td>
</tr>
</table>
<script>
$("#approve").click(function() {
$("#projectApproveFrm").attr("action", "http://localhost:8080/projectApproval");
$("#projectApproveFrm").submit();
});
$("#reject").click(function() {
$("#projectApproveFrm").attr("action", "http://localhost:8080/projectReject");
$("#projectApproveFrm").submit();
});
</script>
</body>
</html>
Spring邮件发送代码：
Mail mail = new Mail(); // 创建POJO类以保存电子邮件属性
mail.setFrom("mail@outlook.id"); // 发件人邮件地址
mail.setTo("user@domain.com"); // 收件人邮件地址
mail.setSubject("Test Email");
MimeMessage message = javaMailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message,
MimeMessageHelper.MULTIPART_MODE_MIXED_RELATED, StandardCharsets.UTF_8.name());
Template t = freemarkerConfig.getTemplate("email-project-approval-template.ftl");
String html = FreeMarkerTemplateUtils.processTemplateIntoString(t, mail.getModel());
helper.setTo(mail.getTo());
helper.setText(html, true);
helper.setSubject(mail.getSubject());
helper.setFrom(mail.getFrom());
javaMailSender.send(message);
电子邮件已发送给最终用户。然而，在Outlook中，表单元素是可见的。
我还通过浏览器上的Webmail进行了验证，在那里元素是可见的，但是表单没有被提交。
如何解决这个问题？是否需要更新任何Java代码或ftl文件中是否需要进行任何更改？是否有人有任何想法？
或者是否有其他方法可以使用JAVA在电子邮件中发送HTML表单？
英文:
I want to send email with form elements to end users. So, End users can fill up the form details within email and submit it.
I have created a ftl template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table>
<tr>
<td>
This e-mail is for project approval :<br/>
<a href="">${projectName}</a><br/>
<br/>
<form action="" method="post" id="projectApprovalFrm">
Status Reason:<br>
<textarea name="statusReason"></textarea><br><br>
</form>
<input type="button" value="Reject" id="reject" />
<input type="button" value="Approve" id="approve" />
</td>
</tr>
</table>
<script>
$( "#approve" ).click(function() {
$("#projectApproveFrm").action( "http://localhost:8080/projectApproval" );
$("#projectApproveFrm").submit();
});
$( "#reject" ).click(function() {
$("#projectApproveFrm").action( "http://localhost:8080/projectReject" );
$("#projectApproveFrm").submit();
});
</script>
</body>
</html>
Spring code to sent email:
Mail mail = new Mail(); // Created POJO class to hold email properties
mail.setFrom("mail@outlook.id"); //Outlook mail id from mail sent
mail.setTo("user@domain.com"); //receiver mail id
mail.setSubject("Test Email");
MimeMessage message = javaMailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message,
MimeMessageHelper.MULTIPART_MODE_MIXED_RELATED,StandardCharsets.UTF_8.name());
Template t = freemarkerConfig.getTemplate("email-project-approval-template.ftl");
String html = FreeMarkerTemplateUtils.processTemplateIntoString(t, mail.getModel());
helper.setTo(mail.getTo());
helper.setText(html, true);
helper.setSubject(mail.getSubject());
helper.setFrom(mail.getFrom());
javaMailSender.send(message);
Mails are been sent to end user. However, Form elements are visible in outlook
I also verified by webmail on browser where elements are visible but form is not getting submitted.
What should be done to overcome this issue? Is there any Java code needs to update or any changes needs to in ftl file. Does anyone have any ideas?
Or Is there any other way to send HTML form in email using JAVA?
答案1
得分: 1
这可能与Java无关，但与表单仅适用于特定电子邮件环境有关，而Outlook不在其中之列。请参阅https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email/以获取2020年的测试结果。
您仍然可以通过电子邮件发送表单，但对于Outlook，您需要提供备用方案（例如，链接到带有表单的网页）。
您可以使用Outlook特定的代码来实现这一点（由Litmus提供）：
CSS
.interactive-form {
display: block !important;
max-height: inherit !important;
overflow: visible !important;
}
.fallback-form {
display: none;
}
body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
@media only screen and (max-width: 640px) {
.fallback-form {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility:inherit !important;
}
.interactive-form,
.interactive-form p,
.interactive-form label,
.interactive-form input {
display:none !important;
display:none !important;
overflow:hidden !important;
max-height: 0px !important;
max-width: 0px !important;
line-height: 0px !important;
visibility:hidden !important;
}
}
HTML
<!--[if mso | ie]>
<style>
.fallback-form {
display: block !important;
max-height: inherit !important;
overflow: visible !important;
}
</style>
<![endif]-->
<!-- 开始 FORM_INTERACTIVE -->
<!--[if (!mso)&amp;(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
[在此插入交互式表单代码]
</div>
<!--<![endif]-->
<!-- 结束 FORM_INTERACTIVE -->
<!-- 开始 FORM_FALLBACK -->
<div class="fallback-form outlookshow">
[在此插入表单部分的备用方案]
</div>
<!-- 结束 FORM_FALLBACK -->
英文:
It's probably nothing to do with Java, but everything to do with the fact that forms work on only certain email environments - and Outlook is not one of them. See https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email/ for 2020 tests.
You can still send forms through email - but will need a fallback for Outlook (i.e. a link to a webpage with the form).
You can do that with Outlook-specific code like so (courtesy of Litmus):
CSS
.interactive-form {
display: block !important;
max-height: inherit !important;
overflow: visible !important;
}
.fallback-form {
display: none;
}
body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
@media only screen and (max-width: 640px) {
.fallback-form {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility:inherit !important;
}
.interactive-form,
.interactive-form p,
.interactive-form label,
.interactive-form input {
display:none !important;
display:none !important;
overflow:hidden !important;
max-height: 0px !important;
max-width: 0px !important;
line-height: 0px !important;
visibility:hidden !important;
}
}
HTML
<!--[if mso | ie]>
<style>
.fallback-form {
display: block !important;
max-height: inherit !important;
overflow: visible !important;
}
</style>
<![endif]-->
<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&amp;(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
[Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->
<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
[Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论