February 14, 2022

February 14, 2022

In this article, we are going to discuss about How we can create a contact form in Symfony with SwiftMailer. Symfony provides an architecture, components and tools for developers to build complex web applications faster. Choosing symfony allows you to release your applications earlier, host and scale them without problem, and maintain them over time with no surprise.

Swift Mailer is a component based library for sending e-mails from PHP applications. Swift Mailer supports PHP 7.0 to PHP 8.1 included (proc_* functions must be available). Swift Mailer does not work when used with function overloading as implemented by mbstring when mbstring.func_overload is set to 2.

At the end of this article, we will be created a contact form in Symfony using Form Builder and connected with SwiftMailer bundle. So that, the visitor could receive acknowledgement that the messages has been successfully sent.

Step 1: Create Contact Entity with Doctrine

First of all we need to create and configure the database. Database related information and credentials are available in Application Access details panel. Add these to the app/config/parameters.yml

parameters:

   database_host: localhost
   database_port: <PORT>
   database_name: <DB_NAME>
   database_user: <DB_user_name>
   database_password: <DB_password>

Next, we need to create a contact entity with Doctrine. To use Doctrine, open SSH terminal and go to your Symfony project:

  1. cd application/{your_app_folder}/public_html

Now run the following command to start the entity generator:

  1. php bin/console doctrine:generate:entity

For the contact form I need four fields: name, email, subject, message. You can add more fields as per your requirements. The entity name will be Contact and the shortcut name will be AppBundle:Contact. Annotation will be Yaml, so just press the Enter key on this.

Now go to src/AppBundle/Entity. You will see a Contact.php file in which Doctrine has created a new method for every field. I will use these methods to set values in the Controller:

  1. <?php
  2. namespace AppBundle\Entity;
  3. use Doctrine\ORM\Mapping as ORM
  4. /**
  5. * Contact
  6. *
  7. * @ORM\Table(name="contact")
  8. * @ORM\Entity(repositoryClass="AppBundle\Repository\ContactRepository")
  9. */
  10. class Contact
  11. {
  12. /**
  13. * @var int
  14. *
  15. * @ORM\Column(name="id", type="integer")
  16. * @ORM\Id
  17. * @ORM\GeneratedValue(strategy="AUTO")
  18. */
  19. private $id;
  20. /**
  21. * @var string
  22. *
  23. * @ORM\Column(name="name", type="string", length=255)
  24. */
  25. private $name;
  26. /**
  27. * @var string
  28. *
  29. * @ORM\Column(name="email", type="string", length=255)
  30. */
  31. private $email;
  32. /**
  33. * @var string
  34. *
  35. * @ORM\Column(name="subject", type="string", length=255)
  36. */
  37. private $subject;
  38. /**
  39. * @var string
  40. *
  41. * @ORM\Column(name="message", type="string", length=255)
  42. */
  43. private $message;
  44. /**
  45. * Get id
  46. *
  47. * @return int
  48. */
  49. public function getId()
  50. {
  51. return $this->id;
  52. }
  53. /**
  54. * Set name
  55. *
  56. * @param string $name
  57. *
  58. * @return Contact
  59. */
  60. public function setName($name)
  61. {
  62. $this->name = $name;
  63. return $this;
  64. }
  65. /**
  66. * Get name
  67. *
  68. * @return string
  69. */
  70. public function getName()
  71. {
  72. return $this->name;
  73. }
  74. /**
  75. * Set email
  76. *
  77. * @param string $email
  78. *
  79. * @return Contact
  80. */
  81. public function setEmail($email)
  82. {
  83. $this->email = $email;
  84. return $this;
  85. }
  86. /**
  87. * Get email
  88. *
  89. * @return string
  90. */
  91. public function getEmail()
  92. {
  93. return $this->email;
  94. }
  95. /**
  96. * Set subject
  97. *
  98. * @param string $subject
  99. *
  100. * @return Contact
  101. */
  102. public function setSubject($subject)
  103. {
  104. $this->subject = $subject;
  105. return $this;
  106. }
  107. /**
  108. * Get subject
  109. *
  110. * @return string
  111. */
  112. public function getSubject()
  113. {
  114. return $this->subject;
  115. }
  116. /**
  117. * Set message
  118. *
  119. * @param string $message
  120. *
  121. * @return Contact
  122. */
  123. public function setMessage($message)
  124. {
  125. $this->message = $message;
  126. return $this;
  127. }
  128. /**
  129. * Get message
  130. *
  131. * @return string
  132. */
  133. public function getMessage()
  134. {
  135. return $this->message;
  136. }
  137. }

Next, we will work on the Controller and the form View.

Step 2: Create the Form in DefaultController.php

The next step is to create a form in the controller. You can also create a form in the Twig view. However, in this article, I will initialize the form fields using the Symfony’s form builder, and then show the form Widget in the View.

Open DefaultController.php and add the following namesapaces and the entity (created earlier):

  1. namespace AppBundle\Controller;
  2. use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
  3. use Symfony\Bundle\FrameworkBundle\Controller\Controller;
  4. use Symfony\Component\HttpFoundation\Request;
  5. use Symfony\Component\HttpFoundation\Response;
  6. use Symfony\Component\Form\Extension\Core\Type\TextType;
  7. use Symfony\Component\Form\Extension\Core\Type\TextareaType;
  8. use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
  9. use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
  10. use Symfony\Component\Form\Extension\Core\Type\SubmitType;
  11. use Symfony\Component\HttpFoundation\Session\Flash\FlashBag;
  12. use AppBundle\Entity\Contact;

Now in the createAction() method, create an entity object and pass it to the form builder. The form contains the input fields (as discussed earlier).

  1. class DefaultController extends Controller
  2. {
  3. /**
  4. * @Route("/form", name="homepage")
  5. */
  6. public function createAction(Request $request)
  7. {
  8. $contact = new Contact;
  9. # Add form fields
  10. $form = $this->createFormBuilder($contact)
  11. ->add('name', TextType::class, array('label'=> 'name', 'attr' => array('class' => 'form-control', 'style' => 'margin-bottom:15px')))
  12. ->add('email', TextType::class, array('label'=> 'email','attr' => array('class' => 'form-control', 'style' => 'margin-bottom:15px')))
  13. ->add('subject', TextType::class, array('label'=> 'subject','attr' => array('class' => 'form-control', 'style' => 'margin-bottom:15px')))
  14. ->add('message', TextareaType::class, array('label'=> 'message','attr' => array('class' => 'form-control')))
  15. ->add('Save', SubmitType::class, array('label'=> 'submit', 'attr' => array('class' => 'btn btn-primary', 'style' => 'margin-top:15px')))
  16. ->getForm();
  17. # Handle form response
  18. $form->handleRequest($request);

Step 3: Create View for the Contact Form

To view this form on the Twig template, create a file form.html.twig in app/Resources/views/default and add the form widget to it.

  1. {% block body %}
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-sm-4">
  5. <h2 class=page-header>Contact Form in Symfony</h2>
  6. {{form_start(form)}}
  7. {{form_widget(form)}}
  8. {{form_end(form)}}
  9. </div>
  10. </div>
  11. </div>
  12. {% endblock %}

I have added bootstrap classes to the code. I will now add the bootstrap CDN to base template to make the classes work.

Open the base.html.twig from app/Resources/views and add the CDN links to it.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>{% block title %}Welcome!{% endblock %}</title>
  6. {% block stylesheets %}{% endblock %}
  7. <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <div class="alert alert-success">
  13. {% set flashbag_notices = app.session.flashbag.get('notice') %}
  14. {% if flashbag_notices is not empty %}
  15. <div class="flash-notice">
  16. {% for notice in flashbag_notices %}
  17. {{notice}}
  18. {% endfor %}
  19. </div>
  20. {% endif %}
  21. {% block body %}{% endblock %}
  22. </div>
  23. {% block javascripts %}{% endblock %}
  24. </body>
  25. </html>

Now I need to extend form.html.twig with base.html.twig by simply adding the following line at the top.

  1. {% extends 'base.html.twig' %}

At this point, if you hit the /form Route, you will get the following Form:

Step 4: Save Values in the Database

Next, we will save the values in database. We have already created the form in the DefaultController class. First, we will save the values in variables and then pass these variables to the related methods in the entity. Finally, we will save the variables through the persist() method.

  1. # check if form is submitted
  2. if($form->isSubmitted() && $form->isValid()){
  3. $name = $form['name']->getData();
  4. $email = $form['email']->getData();
  5. $subject = $form['subject']->getData();
  6. $message = $form['message']->getData();
  7. # set form data
  8. $contact->setName($name);
  9. $contact->setEmail($email);
  10. $contact->setSubject($subject);
  11. $contact->setMessage($message);
  12. # finally add data in database
  13. $sn = $this->getDoctrine()->getManager();
  14. $sn -> persist($contact);
  15. $sn -> flush();

Now, when the form is submitted, the values will be available in the database.

Step 5: Send Acknowledgement to the User

It is important to tell the user that their message has been successfully delivered to the website. Many websites send an email that provides all user-submitted data in a proper format.

For this purpose, I will use SwiftMailer, a bundle that comes preinstalled in Symfony 3. To use it, you just need to configure it. To do the necessary changes, open app/config/parameters.yml under parameters

  1. mailer_transport: gmail
  2. mailer_host: smtp.gmail.com
  3. mailer_user: <SMTP_USERNAME>
  4. mailer_password: <SMTP_PASSWORD>
  5. secret: Itmaybeanything
  6. encryption: tls

Now in the config.yml, add the following code to get the values:

  1. # Swiftmailer Configuration
  2. swiftmailer:
  3. transport: "%mailer_transport%"
  4. host: "%mailer_host%"
  5. username: "%mailer_user%"
  6. password: "%mailer_password%"
  7. spool: { type: memory }

The configuration process is over. Now, open DefaultController.php and add the code for SwiftMailer. I will use the same data variables in this code:

  1. $message = \Swift_Message::newInstance()
  2. ->setSubject($subject)
  3. ->setFrom('shahroznawaz156@gmail.com')
  4. ->setTo($email)
  5. ->setBody($this->renderView('default/sendemail.html.twig',array('name' => $name)),'text/html');
  6. $this->get('mailer')->send($message);

Notice that you can also send email templates. In this code snippet, I sent the email template I created (sendemail.html.twig) in the views/default. This template has a simple test message.

  1. {# app/Resources/views/Emails/sendemail.html.twig #}
  2. <h3>You did it</h3>
  3. Hi {{ name }}! Your Message is successfully Submitted.
  4. We will get back to you soon!
  5. Thanks!

Now, when you submit the form, you will get an acknowledgment email in your inbox.

If you have a query or would like to contribute to the discussion, do leave a comment.

0 comments:

Post a Comment