Menu
I'm trying to send an email from a contact form that is on my page, I'm using a PHP script to send it to my email, I'm following this tutorial, I've used his example and it does work... but I can't seem to get it to work in my application, I was having some trouble at first with 404 errors but I then published my site and put it on a live server and now I'm getting success codes
but im not getting the emails, so I went to http://mysite/assets/email.php and Im seeing this error
get-in-touch.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService, IMessage } from '../../services/email.service';
@Component({
selector: 'app-get-in-touch',
templateUrl: './get-in-touch.component.html',
styleUrls: ['./get-in-touch.component.scss'],
providers: [AppService]
})
export class GetInTouchComponent implements OnInit {
message: IMessage = {};
constructor(
private appService: AppService
) { }
ngOnInit() {
}
sendEmail(message: IMessage) {
this.appService.sendEmail(message).subscribe(res => {
console.log('AppComponent Success', res);
}, error => {
console.log('AppComponent Error', error);
});
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '@angular/router';
import { AppComponent } from './app.component';
import { GetInTouchComponent } from './get-in-touch/get-in-touch.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { httpModule } from @angular/forms;
export const ROUTES: Routes = [
{ path: 'get-in-touch', component: GetInTouchComponent }
];
@NgModule({
declarations: [
AppComponent,
GetInTouchComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES),
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
email.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Resolve } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
export interface IMessage {
name?: string;
email?: string;
message?: string;
}
@Injectable()
export class AppService {
private emailUrl = '../app/get-in-touch/email.php';
constructor(private http: Http) {
}
sendEmail(message: IMessage): Observable<IMessage> | any {
return this.http.post(this.emailUrl, message)
.map(response => {
console.log('Sending email was successfull', response);
return response;
})
.catch(error => {
console.log('Sending email got error', error);
return Observable.throw(error);
});
}
}
email.php
<?php
header('Content-type: application/json');
$errors = '';
if(empty($errors)){
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$from_email = $request->email;
$message = $request->message;
$from_name = $request->name;
$to_email = $from_email;
$contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
$content = "<p>$message</p>";
$website = "Thirsty Studios";
$email_subject = "Contact Form";
$email_body = '<html><body>';
$email_body .= '$contact $content';
$email_body .= '</body></html>';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "From: $from_email\n";
$headers .= "Reply-To: $from_email";
mail($to_email,$email_subject,$email_body,$headers);
$response_array['status'] = 'success';
$response_array['from'] = $from_email;
echo json_encode($response_array);
echo json_encode($from_email);
header($response_array);
return $from_email;
} else {
$response_array['status'] = 'error';
echo json_encode($response_array);
header('Location: /error.html');
}
?>
I've never done anything like this before (Angular + PHP), but I have done everything that is said in the tutorial and I can't seem to get it to work, any help would be appreciated and please let me know if you need more information
243
At this point it seems as though the request does not even reach your PHP script as the request returns a 404. The first error likely occurs because the node server will not execute .php files. You will need to set up a local Apache server on a different port using something like xammp (or your preferred alternative). Or otherwise make your request to a live web server.
It seems like the second and third error messages could be coming form your .catch callback in your email service, try using the following:
.catch((error: Error) => {
console.log('Sending email got error', error.message);
return Observable.throw(error.message);
});
There are some alternatives to using PHP, such as formspree or even the Gmail API and I'm sure you will find others with a bit of Googling. But here is an example using fromspree.
You should also be able to simplify you PHP script slightly as follows:
<?php
$errors = '';
if( empty( $errors ) ) {
$response_array = array();
$from_email = $_POST['email'];
$message = $_POST['message'];
$from_name = $_POST['name'];
$to_email = $from_email;
$contact = "<p><strong>Name: </strong> $from_name</p><p><strong>Email:</strong> $from_email</p>";
$content = "<p>$message</p>";
$website = "Thirsty Studios";
$email_subject = "Contact Form";
$email_body = "<html><body>";
$email_body .= "$contact $content";
$email_body .= "</body></html>";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "From: $from_email\n";
$headers .= "Reply-To: $from_email";
mail( $to_email, $email_subject, $email_body, $headers );
$response_array['status'] = 'success';
$response_array['from'] = $from_email;
echo json_encode( $response_array );
} else {
$response_array['status'] = 'error';
echo json_encode($response_array);
}
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
