Use Form to send Email in Spring Boot using Thymeleaf

I want to implement a send mail form using Thymeleaf.

I have a page called start_page.html that contains this form :

<div class="w3-container w3-padding-64" id="contact">
  <p>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.</p>
  <p class="w3-text-blue-grey w3-large"><b>Catering Service, 42nd Living St, 43043 New York, NY</b></p>
  <p>You can also contact us by phone 00553123-2323 or email, or you can send us a message here:</p>
  <form th:action="@{~/homePage/contact}" th:object="${contactMail}" method="post" target="_blank">
    <p><input class="w3-input w3-padding-16" type="text" th:field="*{nom}" th:placeholder="#{homePage.nom}" required name="nom"></p>
    <p><input class="w3-input w3-padding-16" type="text" th:field="*{prenom}" th:placeholder="#{homePage.prenom}" required name="prenom"></p>
    <p><textarea class="w3-input w3-padding-16" type="text" th:field="*{message}" style="height: 250px;" th:placeholder="#{homePage.message}" required name="message"></textarea>
    <p><button class="w3-button w3-light-grey w3-section" type="submit">[[#{homePage.envoyer}]]</button></p>

I have already implemented a controller for this form action

    @PropertySource(ignoreResourceNotFound = true , value = "")
    public class HomePageController {

        private MailContactService mailService;

        @RequestMapping(value = "/homePage/contact", method = RequestMethod.POST)
        public String sendMessage(ContactMail contactMail){
            return "/home/start_page";

I'm not getting the desired behavior: I though that my page will stay the same but my page is reloading.

I want to order the controller to do something without getting out of my page.

I googled and I found that I can send a service object to my page but I want to avoid this option if there is other solutions .

Thank you.

1 answer

  • answered 2018-03-11 12:50 ddewaele

    You'll need to use an AJAX call if you don't want to refresh your page.

    What this means is that you want to intercept the default HTTP form post behavior (that will do a full page refresh) using javascript.

    For this you need to :

    • Remove the action tag on your form (let javascript handle it when clicking the button to submit the form)
    • Add this to your page (will be executed when the form is submitted :

      $(document).ready(function () {
       $("#contact-form").submit(function (event) {
          // do not post the form and trigger full page refresh
          var formData = ..  // construct some formData
             type: "POST",
             contentType: "application/json",
             url: "/homePage/contact",
             data: JSON.stringify(formData),
             dataType: "json",
             success: function (data) {
              console.log("SUCCESS : ", data);
             error: function (e) {
              console.log("ERROR : ", e);

    For a full example, as always, has got you covered :)