Блог

Главная - Вопросы по программированию - Пользовательская форма для отправки электронной почты Outlook через spring с использованием freemarker (шаблон ftl)

Пользовательская форма для отправки электронной почты Outlook через spring с использованием freemarker (шаблон ftl)

#java #spring-boot #outlook #html-email #freemarker

#java #spring-загрузка #outlook #html-электронная почта #freemarker

Вопрос:

Я хочу отправить электронное письмо с элементами формы конечным пользователям. Таким образом, конечные пользователи могут заполнить данные формы в электронной почте и отправить ее.

Я создал шаблон 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").action( "http://localhost:8080/projectApproval" );
          $("#projectApproveFrm").submit();
        });
         $( "#reject" ).click(function() {
          $("#projectApproveFrm").action( "http://localhost:8080/projectReject" );
          $("#projectApproveFrm").submit();
        });
      </script>
    </body>
</html>

Код Spring для отправки электронной почты:

 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);

Письма отправляются конечному пользователю. Однако элементы формы видны в Outlook

введите описание изображения здесь

Я также проверил по электронной почте в браузере, где элементы видны, но форма не отправляется.

Что нужно сделать, чтобы преодолеть эту проблему? Требуется ли обновить какой-либо Java-код или внести какие-либо изменения в файл ftl. У кого-нибудь есть какие-либо идеи?

Или есть какой-либо другой способ отправить HTML-форму по электронной почте с использованием JAVA?

Ответ №1:

Вероятно, это не имеет ничего общего с Java, но все связано с тем фактом, что формы работают только в определенных средах электронной почты, и Outlook не является одним из них. См . https://www.litmus.com/blog/the-ultimate-guide-to-interactive-forms-in-email / для испытаний 2020 года.

Вы все равно можете отправлять формы по электронной почте, но потребуется запасной вариант для Outlook (т. Е. Ссылка на веб-страницу с формой).

Вы можете сделать это с помощью специфичного для Outlook кода, например, так (любезно предоставлено Лакмусом):

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;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 -->

Комментарии:

1. Это узкое место, но спасибо за ответ.