why contact form is not working after adding row and columns?

Question

For some reason, my form is not working after I added the form group row and columns. If I remove all the styling, it will work but it will look ugly. Also, the form indicates that the message was successfully sent but I am not receiving it. If I remove all the styling, it will work and I will receive the message. that's the nude one

<form method="POST">
<label for="name">Name: <input type="text" name="name" id="name"></label><br>
<label for="name2">Company name: <input type="text" name="name2" id="name2"></label><br>
<label for="email">Email address: <input type="email" name="email" id="email"></label><br>
<label for="mobile">Mobile number<input type="text" name="mobile" id="mobile" placeholder="Enter Mobile Number" class="form-control" pattern="\d*" required /></label>
<label for="address">Full address<textarea name="address" id="address"placeholder="Enter Address" class="form-control"></textarea></label>
<label for="message">Message: <textarea name="message" id="message" rows="8" cols="20"></textarea></label><br>
<label for="dept">Send query to department:</label>
<select name="dept" id="dept">
    <option value="sales">Sales</option>
    <option value="support" selected>Technical support</option>
</select><br>
<input type="submit" value="Send">
</form>

thats the php settings

<?php

 //Import PHPMailer class into the global namespace
 use PHPMailer\PHPMailer\PHPMailer;

 $msg = '';
//Don't run this unless we're handling a form submission
if (array_key_exists('email', $_POST)) {
date_default_timezone_set('Etc/UTC');
require 'vendor/autoload.php';

//Create a new PHPMailer instance
$mail = new PHPMailer();
//Send using SMTP to localhost (faster and safer than using mail()) – requires a local mail 
server
//See other examples for how to use a remote server such as gmail
$mail->isSMTP();                               // Set mailer to use SMTP
$mail->SMTPDebug = 3;                               // Enable verbose debug output
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = 'private';                 // SMTP username
$mail->Password = 'private';                           // SMTP password
$mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also 
accepted
$mail->Port = 587; 
$mail->Host = 'smtp.office365.com';  // Specify main and backup SMTP servers

//Use a fixed address in your own domain as the from address
//**DO NOT** use the submitter's address here as it will be forgery
//and will cause your messages to fail SPF checks
$mail->setFrom('private', 'First Last');
//Choose who the message should be sent to
//You don't have to use a <select> like in this example, you can simply use a fixed address
//the important thing is *not* to trust an email address submitted from the form directly,
//as an attacker can substitute their own and try to use your form to send spam
$addresses = [
    'sales' => 'private',
    'support' => 'private',
    'accounts' => 'private',
];
//Validate address selection before trying to use it
if (array_key_exists('dept', $_POST) && array_key_exists($_POST['dept'], $addresses)) {
    $mail->addAddress($addresses[$_POST['dept']]);
} else {
    //Fall back to a fixed address if dept selection is invalid or missing
    $mail->addAddress('sales');
}
//Put the submitter's address in a reply-to header
//This will fail if the address provided is invalid,
//in which case we should ignore the whole request
if ($mail->addReplyTo($_POST['email'], $_POST['name'])) {
    $mail->Subject = 'PHPMailer contact form';
    //Keep it simple - don't use HTML
    $mail->isHTML(false);
    //Build a simple message body
    $mail->Body = <<<EOT
    Name: {$_POST['name']}
    Company name: {$_POST['name2']} 
    I am: {$_POST['dept']} 
    Address: {$_POST['address']}
    Email: {$_POST['email']}
    Phone number: {$_POST['mobile']} 
    Message: {$_POST['message']}

    EOT;
    //Send the message, check for errors
    if (!$mail->send()) {
        //The reason for failing to send will be in $mail->ErrorInfo
        //but it's unsafe to display errors directly to users - process the error, log it on 
    your server.
        $msg = 'Sorry, something went wrong. Please try again later.';
    } else {
        $msg = 'Message sent! Thanks for contacting us.';
    }
    } else {
    $msg = 'Invalid email address, message ignored.';
    }
    }

and that's my version

<form method="POST">
<div class="row">
     <div class="col-md-6">
        <div class="form-group">
           <label for="name">Full Name:</label>
           <input type="text" name="name" id="name" placeholder="Full Name" class="form- 
 control" required />
        </div>
        <div class="form-group">
           <label for="dept">Select whether you are a supplier or a restaurant</label>
           <select name="dept" class="form-control" required>
              <option value="">I am a *</option>
              <option value="Supplier">Supplier</option>
              <option value="Restaurant">Restaurant</option>
           </select>
        </div>
        <div class="form-group">
           <label for="email">Enter Email Address</label>
           <input type="email" name="email" id="email" class="form-control" placeholder="Enter 
 Email Address" required />
        </div>
     </div>
     <div class="col-md-6">
        <div class="form-group">
           <label for="name2">Company Name:</label>
           <input type="text" name="name2" id="name2" placeholder="Full Name" class="form- 
control" required />
        </div>
        <div class="form-group">
           <label for="address">Enter Your Full Address:</label>
           <textarea name="address" id="address"placeholder="Enter Address" class="form- 
 control" required rows="1"></textarea>
        </div>
        <div class="form-group">
           <label for="mobile" >Enter Mobile Number</label>
           <input type="text" name="mobile" id="mobile" placeholder="Enter Mobile Number" 
class="form-control" pattern="\d*" required />
        </div>
     </div>
     <div class="col-md-12 ">
           <div class="form-group">
              <label for="message">Message</label>
              <textarea name="message" id="message" placeholder="Enter Your Message" 
 class="form-control" required rows="2"></textarea>
           </div>
        </div>
  </div>
  <div class="form-group pt-4">
     <input type="submit" name="submit" class="interested-btn btn-send" value="Send message"/>
  </div>
 </form>

Please let me know what i am missing thanks a lot

Answer 1

So technically my issue was me adding close tag for both label and input like this <label for="mobile">Mobile number<input type="text" name="mobile" id="mobile" placeholder="Enter Mobile Number" class="form-control" pattern="\d*" required /></label> and the solution is the following

                <form class="contact-form" method="POST">
                 <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                       <div class="form-group">
                          <label for="name">Full Name:</label>
                          <input type="text" name="name" id="name" placeholder="Full Name" class="form-control" required>
                       </div>
                       <div class="form-group">
                          <label for="dept">Select whether you are a supplier or a restaurant</label>
                          <select name="dept" id="dept" class="form-control" required >
                             <option value=""selected>I am a *</option>
                             <option value="sales">Supplier</option>
                             <option value="support">Restaurant</option>
                          </select>
                       </div>
                       <div class="form-group">
                          <label for="email">Email address:</label>
                          <input type="email" name="email" id="email" class="form-control" placeholder="Enter Email Address" required >
                       </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                       <div class="form-group">
                          <label for="name2">Company name:</label>
                          <input type="text" name="name2" id="name2" placeholder="Company Name" class="form-control" required>
                       </div>
                       <div class="form-group">
                          <label for="address">Full address</label>
                          <input name="address" id="address"placeholder="Enter Address" class="form-control" required></input>
                       </div>
                       <div class="form-group">
                          <label for="mobile">Mobile number</label>
                          <input type="text" name="mobile" id="mobile" placeholder="Enter Mobile Number" class="form-control" pattern="\d*" required />
                       </div>
                    </div>
                    <div class="col-12">
                       <div class="form-group">
                          <label for="message">Message:</label>
                          <textarea name="message" id="message" placeholder="Enter Your Message" class="form-control" required rows="5"></textarea>
                       </div>
                    </div>
                    <div class="form-group pt-4">
                       <input type="submit" class="interested-btn btn-send" value="Send Message">
                    </div>
                 </div>
              </form>