So I am trying to setup EmailJS for my project.. I am currently getting 'FAILED' logged when I submit, but I can not figure out why? Any help would be great thanks!
function sendMail(contactForm) {
emailjs.send("gmail", "rosie", {
"from_name": contactForm.name.value,
"from_email": contactForm.emailaddress.value,
"project_request": contactForm.projectsummary.value
})
.then(
function(response) {
console.log("SUCCESS", response);
},
function(error) {
console.log("FAILED", error);
}
);
return false; // To block from loading a new page
}
<form onsubmit="return sendMail(this);">
<input type="text" name="name" class="form-control" id="fullname" placeholder="Name" required/>
<input type="text" name="emailaddress" class="form-control" id="emailaddress" placeholder="Email" required/>
<textarea rows="5" name="projectsummary" class="form-control" id="projectsummary" placeholder="Project Description" required></textarea>
<button type="submit" class="btn btn-secondary center-block">Send Project Request</button>
</form>
The error text says that your service ID is incorrect. So you need to change your service ID and replace it with something in your dashboard.
The following link will help you:
https://www.emailjs.com/docs/rest-api/send/
Related
I'm using express-validator in a node app. All 4 of my form fields are returning validation errors ("A name is required" and so on). When I console.log the errors variable, all values are blank:
errors: [{value: '', msg: 'A name is required.', param: 'name', location: 'body'},...
Feedback form:
<form class="feedback-form" method="POST" action="/feedback">
<div class="form-group">
<label for="feedback-form-name">Name</label>
<input
type="text"
class="form-control"
id="feedback-form-name"
name="name"
placeholder="Enter your name"
/>
</div>
<div class="form-group">
<label for="feedback-form-email">E-Mail</label>
<input
type="text"
class="form-control"
id="feedback-form-email"
name="email"
placeholder="Enter your email address"
/>
</div>
<div class="form-group">
<label for="feedback-form-title">Title</label>
<input
type="text"
class="form-control"
id="feedback-form-title"
name="title"
placeholder="Title of your feedback"
/>
</div>
<div class="form-group">
<label for="feedback-form-message">Message</label>
<textarea
type="text"
placeholder="Enter your message, then hit the submit button"
class="form-control"
name="message"
id="feedback-form-message"
rows="6"
></textarea>
</div>
<button type="submit" class="btn btn-secondary float-right">Submit</button>
</form>
And my router:
router.post(
"/",
[
check("name").trim().isLength({ min: 3 }).escape().withMessage("A name is required."),
check("email").trim().isEmail().normalizeEmail().withMessage("A valid e-mail is required."),
check("title").trim().isLength({ min: 3 }).withMessage("A valid title is required."),
check("message").trim().isLength({ min: 3 }).withMessage("A valid message is required."),
],
(request, response) => {
const errors = validationResult(request);
console.log(errors);
if (!errors.isEmpty()) {
request.session.feedback = {
errors: errors.array(),
};
return response.redirect("/feedback");
}
return response.send("Feedback form posted");
}
);
return router;
Why aren't the form values passing to the router's post method?
You need to access form fields in request.body followed by their respective name as described in THIS post.
I'm trying to submit a form using formspree I get two different errors. When I try to submit the form after I refresh the page I get an error on a new page saying
Cannot POST /Contact
When I go back and try to submit the form again I get an error in the console saying:
POST https://formspree.io/sheabathandbody#mail.com 400 () jquery.min.js:4
send # jquery.min.js:4
ajax # jquery.min.js:4
(anonymous) # main.js:8
dispatch # jquery.min.js:3
r.handle # jquery.min.js:3
I've used this method/code to submit my forms before so i don't know what the problem could be
Contact.vue form
<form id="contact" name="contact-form" method="post" action = "">
<fieldset>
<input placeholder="Your name" name="name" type="text" id="name" tabindex="1" required="required">
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required"></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="submit_btn" >Submit</button>
</fieldset>
</form>
Here's my main.js
(function($) {
$(window).on("load", function() {
// Contact form
var form = $("#contact");
form.submit(function(event) {
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: "https://formspree.io/sheabathandbody#mail.com",
method: "POST",
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
form.prepend(
form_status
.html(
'<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
)
.fadeIn()
);
}
}).done(function(data) {
form_status
.html(
'<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
)
.delay(3000)
.fadeOut();
});
});
});
})(jQuery);
Guess this has nothing to do with VueJS since it does not use at all vue in that chunks of code you shared, this is pure jQuery.
Said that, the problem sending the form was because you were not listening correctly to submit event.
form.on('submit', function () { ... })
On the other hand, ajax call is not working correctly; you should check documentation of formspree.io and correct it.
Check next code
$(document).ready(function() {
// Contact form
var form = $("#contact");
form.on('submit', function(event) {
alert('Hola hola. This is working now!');
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: "https://formspree.io/sheabathandbody#mail.com",
method: "POST",
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
form.prepend(
form_status
.html(
'<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
)
.fadeIn()
);
}
}).done(function(data) {
form_status
.html(
'<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
)
.delay(3000)
.fadeOut();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact" name="contact-form" method="post" action="">
<fieldset>
<input placeholder="Your name" name="name" type="text" id="name" tabindex="1" value="blah" required="required">
</fieldset>
<fieldset>
<input value="email#email.com" placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
</fieldset>
<fieldset>
<input value="123123123" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required">Damn</textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="submit_btn">Submit</button>
</fieldset>
</form>
You can create a method for example postNow.
methods: {
postNow() {
const link = "https://formspree.io/sheabathandbody#mail.com"
var data = new FormData();
data.append('_replyto',this.email)
data.append('message',this.message)
this.axios.post(link,data , {
headers: {
'Accept': 'application/json',
},
// body: data,
}).then(res =>{
console.log("response ===" ,res)
this.email = "" ;this.message=""; //don't forget to create your data
}).catch(err =>{
console.log(err)
});
}
},
And in your template you can use the simple HTML form with few tweaks ofc,
<form #submit.prevent="postNow" method="POST" >
<label>
Your email:
<input type="email" name="_replyto" v-model="email" />
</label>
<label>
Your message:
<textarea name="message" v-model="message"></textarea>
</label>
<button type="submit">Send</button>
</form>
Hi I am trying to submit a form data using post request in angular js. Here are the codes :
contact.html
<form class="acodehub-form" ng-submit="submit()" method="post" novalidate>
<div class="form-group first_name">
<label for="first_name">First Name</label><br>
<input type="text" id="first_name" ng-model="fname" name="fname" class="acodehub-input form-control " required tabindex="10" maxlength="40" value="" placeholder="First Name" />
<div class="errorMessage" ng-show="errorFN">First name cannot be empty</div>
</div>
<div class="form-group last_name">
<label for="last_name">Last Name</label><br>
<input type="text" id="last_name" ng-model="lname" name="lname" class="acodehub-input form-control " required tabindex="11" maxlength="40" value="" placeholder="Last Name" />
<div class="errorMessage" ng-show="errorLN">Last name cannot be empty</div>
</div>
<div class="form-group inputEmail">
<label for="email">Email</label><br>
<input type="email" id="inputEmail" ng-pattern = "regexemail" ng-model="email" name="email" class="acodehub-input form-control" required tabindex="12" value="" maxlength="40" placeholder="Email" />
<div class="errorMessage" ng-show="errorE">Please enter a valid email address</div>
</div>
<div class="form-group reason">
<label for="reason">Subject</label>
<select name="reason" ng-model="reason" id="reason" class="typeselects acodehub-input acodehub-select form-control" placeholder="What can we help you with?" tabIndex="13" required>
<option selected value="">What can we help you with?</option>
<option value="Marketing">Marketing</option>
<option value="Advertise" >Advertise</option>
<option value="Product Review">Product Review</option>
<option value="Tutorial Request">Tutorial Request</option>
<option value="Freebie Request">Freebie Request</option>
<option value="Write for us" >Write for us</option>
<option value="Sticker Request">Ask a question?</option>
<option value="Privacy Policy" >Privacy Policy</option>
<option value="Other">Other</option>
</select>
<div class="errorMessage" ng-show="errorR">Select a valid subject</div>
</div>
<div class="form-group inputDescription">
<label for="inputDescription">Tell Us More</label><br>
<textarea name="description" ng-model="description" value="" id="inputDescription" required class="form-control acodehub-input acodehub-textarea" tabindex="14"></textarea>
<div class="errorMessage" ng-show="errorD">Please tell us something about your query. Minimum 50 letters.</div>
</div>
<div>
<button type="submit" class="acodehub-btn acodehub-btn-dark"
data-ga-track="true" data-ga-group="Contact Us"
data-ga-event="Contact Us - Click to Submit Form"
data-ga-val="Submit">
Submit
</button>
</div>
</form>
controller.js
angular.module('app.controllers',[
'app.directives',
'app.factories'
]).controller('ContactController',['$scope','$http','$httpParamSerializer',function($scope,$http,$httpParamSerializer){
$scope.submit = function() {
var text = {"first_name":$scope.fname,"last_name":$scope.lname,"email":$scope.email,"reason":$scope.reason,"description":$scope.description};
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$http.post('/api/contact',$httpParamSerializer(text)).then(function (data, status, headers, config) {
alert("success");
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
},function (data, status, headers, config) {
alert("error");
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
}
}]);
web.php(in laravel)
Route::post('/api/contact','ContactController#submit');
contactcontroller
public function submit(Request $request) {
$this->validate($request,array(
'first_name'=>'required',
'last_name'=>'required',
'email'=>'required|email',
'reason'=>'required',
'description'=>'required|min:20'
));
$data = array(
'first_name'=>$request->first_name,
'last_name'=>$request->last_name,
'email'=>$request->email,
'reason'=>$request->reason,
'description'=>$request->description
);
Mail::queue('emails.contact',$data,function($message) use($data) {
$message->from($data['email']);
$message->to('gaurav.roy142#gmail.com');
$message->subject($data['reason']);
});
//dd($request);
//echo 'hello '.$submit;
if(count(Mail::failures())>0) {
return $request;
}else {
return $request;
}
//return $data;
}
I am getting the output in the console as:
Object {data: "<!DOCTYPE html>
↵<html ng-app="app">
↵<head>
↵ <b…rc="/app/services.js"></script>
↵</body>
↵</html>", status: 200, config: Object, statusText: "OK", headers: function}
undefined
undefined
undefined
I tried every solution provided on stackoverflow or any other website but I am not able to set it up correctly, everytime I am getting the same output as above. I know I am missing something somewhere and now I am out of any ideas how to set it up correctly. Please help me fix it up.
$http returns a promise. In case of success or error, an object containing data, status, config, statusText and headers properties (as you can see in your console log) is resolved or rejected.
So, change your code to :
$http.post('/api/contact',$httpParamSerializer(text)).then(function (response) {
alert("success");
console.log(response.data);
console.log(response.status);
console.log(response.headers);
console.log(response.config);
},function (error) {
alert("error");
console.log(error.data);
console.log(error.status);
console.log(error.headers);
console.log(config);
});
I have a contact form hosted on namecheap.com. I am trying to use the following code to send an email from a contact form.
HTML Form:
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="#">Send Your Email</a>
</p>
<div id="response">
</div>
</form>
Javascript:
$("#contact-submit").on('click',function() {
$contact_form = $('#contact-form');
var fields = $contact_form.serialize();
$.ajax({
type: "POST",
url: "_include/php/contact.php",
data: fields,
dataType: 'json',
beforeSend: function(xhr, settings) {
console.log('ABOUT TO SEND');
},
success: function(response) {
console.log('response', response);
if(response.status){
$('#contact-form input').val('');
$('#contact-form textarea').val('');
}
$('#response').empty().html(response.html);
},
failure: function(error) {
console.log('error', error);
}
});
return false;
});
However, I am getting the error:
POST http://taohgreen.me/_include/php/contact.php 500 (Internal Server Error) jquery.min.js:5
It seems to be a problem with namecheap blocking emails from outside sources. So I was wondering if someone could point me in the right direction of how to resolve this.
One thing I was thinking is that if I could host my php script on a different website then I wouldn't have any of these issues and would also have a simple reusable script. But I also am not sure if there is an easy way to do that.
Any help will be appreciated.
I am working my way through the Microscope project in Discover Meteor and I have hit a problem. I am getting a 'Method not found' error for the following code:
HTML Template - microscope/client/templates/posts/post_submit.html
<template name="postSubmit">
<form class="main form">
<div class="form-group">
<label class="control-label" for="url">URL</label>
<div class="controls">
<input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input name="title" id="title" type="text" value="" placeholder="Name your post" class="form-control"/>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
</form>
JS - microscope/client/templates/posts/post_submit.js
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
url: $(e.target).find('[name=url]').val(),
title: $(e.target).find('[name=title]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
}
});
I am not sure how to debug this as I am getting no errors in the console. Please can anyone suggest where I am going wrong?
Very likely that you need to add the method postInsert to the server side. If you're following along in Discover Meteor, they do that in the next section - https://book.discovermeteor.com/chapter/creating-posts
For example, you put the method in a file called lib/collections/posts.js like this
Meteor.methods({
postInsert: function(postAttributes) {
check(Meteor.userId(), String);
check(postAttributes, {
title: String,
url: String
});