Angular form onclick submit event to send email to gmail account

Question

need some help on how to go about sending angular simple form data to an email(gmail account). I have created the form and able to capture the values in the log. And, I am trying to send the data in the email through php script, however i get the following error: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set().

I understand i need to setup smtp server, however not sure how to go about, i am quiet new to angular. Kindly assist on how through my localhost i can send an email for testing purpose and then when i buy a domain, what changes would be required to be made so that the email could be sent out through my website?

my form and php script is as below:

 <form [formGroup]="formdata"  class="form" (ngSubmit)="onClickSubmit()" action="send-mail.php" method="POST">
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="first_name">First Name :</mat-label>
      <input matInput  formControlName="first_name" value="">

    </mat-form-field><br>
    </div>
    <div>
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="last_name">Last Name :</mat-label>
      <input matInput formControlName="last_name"  value="">
    </mat-form-field><br>
      </div>
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="description">Description : </mat-label>
      <textarea cols = "150" matInput formControlName="desc" value=""></textarea>
    </mat-form-field><br>
      </div>
    <div>
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="email">Email Address :</mat-label>
      <input matInput placeholder="[email protected]" formControlName="email"  value="">
    </mat-form-field><br>
      </div>
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="phone">Contact Number :</mat-label>
      <input matInput placeholder="+91123456789" formControlName="phone"  value="">
    </mat-form-field><br>
      </div>

    <div>
 <input type="submit" class="label" value="Submit Your Query">&nbsp;
      <input (click)="setPreset()" type="submit" class="label" value="Reset" >
      </div>

</form>

<?php     
$mail_to       = '[email protected]'; 

$first_name         = 'test1';
$mail_from          = '[email protected]';
$phone              = '12345';
$description        = 'test4';

$subject       = 'Email Testing - Message from ' . $first_name;     

$body_message  = 'From: ' . $first_name . "\r\n";     
$body_message .= 'E-mail: ' . $mail_from . "\r\n";     
$body_message .= 'Phone: ' . $phone . "\r\n";     
$body_message .= 'Description: ' . $description;  

$headers       = 'From: ' . $mail_from . "\r\n";     
$headers      .= 'Reply-To: ' . $mail_from . "\r\n";     

$mail_sent     = mail($mail_to, $subject, $body_message, $headers);     

if ($mail_sent == true){ ?> <script language="javascript" type="text/javascript">         
    alert('Thank you for the message. We will contact you shortly.');     
    </script>
<?php } else { ?>     
    <script language="javascript" type="text/javascript">         
    alert('Message not sent. Please, notify the site administrator');            
    </script>     
<?php     
} 
?>

And on the php.ini i have changed this setting:

    [mail function]
    ; For Win32 only.
    ; http://php.net/smtp
    SMTP = smtp.gmail.com
    ; http://php.net/smtp-port
    smtp_port = 587
    
    ; For Win32 only.
    ; http://php.net/sendmail-from
    sendmail_from = [email protected]

Answer 1

You should set up a backend for your angular app to act as an email server, and call that via an HTTP request. If you don't have a backend already, something simple like an express server would do. How to create express email server