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.
Related
I have following codes as form, and I wanted to check if the form is been successfully submitted.
I was wondering how I can check on the console. I want to check if the form is been successfully submitted so I can display another form.
<form id="signup" data-magellan-target="signup" action="http://app-service-staging.com" class="epic_app-signup" method="POST">
<div class="grid__column " style="width: 100%;">
<input type="text" name="first_name" placeholder="Name" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="password" placeholder="Password" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="confimred-password" placeholder="Confirmed password" />
</div>
<div class="grid__column " style="width: 100%;">
<input type="date" name="startdate" id="startdate" min="2019-12-16">
</div>
</div>
<button type="submit" class="grid__column" style="width: 50%;"></button>
</div>
</div>
</div>
</form>
and the script,
$('.epic_app-signup').on('submit', function(e) {
e.preventDefault();
var formData = $('.epic_app-signup').serializeArray();
var jsonData = {};
formData.forEach(function(item, index) {
jsonData[item.name] = item.value;
});
console.log('data\n', jsonData);
$.ajax({
url: 'http://app-service-staging.com/api/auth/register',
type:'POST',
data: jsonData,
contentType: 'application/json'
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
}
});
});
});
you can do this by various ways currently you are not using ajax request if you want to achieve this without ajax let follow these steps
when user click on submit button your form is submitted received form information(you define the path in action attribute where form submitted) after processing successfully redirect toward a new form
second solution use jquery ajax request
//first form
<form action='test.php' id='form_1' method='post'>
<label>Full Name</label>
<input type='text' name='full_name'>
<input type='submit'>
</form>
//second form
<form action='test.php' id='form_2' method='post' style='display:none'>
<label>Father Name</label>
<input type='text' name='father_name'>
<input type='submit'>
</form>
use jquery cdn
<script src='https://code.jquery.com/jquery-git.js'></script>
<script>
$("#form_1").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert("form submitted successfully");
$('#form_1').hide();
$('#form_2').show();
},
error:function(data){
alert("there is an error kindly check it now");
}
});
return false;
});
</script>
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>
I'm using a Google Form's value to integrate with my website where I want to submit the form and store data in google sheet as form responses. I'm using AJAX to redirect to another page instead of google form submit page. But whenever I'm trying to submit it's redirecting to my page accurately but datas are not saved in google sheet. Here are my codes,
<strong>Full Name</strong>
<input type="text" name="Fullname" class="form-control" id="Fullname" />
<strong>Email Address</strong>
<input type="text" name="Email" class="form-control" id="Email" />
<strong>Subject</strong>
<input type="text" name="Subject" class="form-control" id="Subject" />
<strong>Details</strong>
<textarea name="Details" rows="8" cols="0" class="form-control" id="Details"></textarea><br />
<button type="button" id="btnSubmit" class="btn btn-info" onclick="postContactToGoogle()">Submit</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry_805356472": fullname,
"entry_1998295708": email, "entry_785075795":
subject, "entry_934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>
How can I save the data in google sheet? Am I missing something in my code? Need this help badly? Thanks.
You can directly copy the form from google view form page like shown in the demo, and then do the following changes in the AJAX call as shown below.
And now once you submit data it is visible in google forms, view responses.
$(function(){
$('input:submit').on('click', function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse",
data:$('form').serialize(),
type: "POST",
dataType: "xml",
crossDomain: true,
success: function(data){
//window.location.replace("youraddress");
//console.log(data);
},
error: function(data){
//console.log(data);
}
});
});
});
<div class="ss-form"><form action="https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1635584241"><div class="ss-q-title">What's your name
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1635584241" value="" class="ss-q-short" id="entry_1635584241" dir="auto" aria-label="What's your name " title="">
<div class="error-message" id="1979924055_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,"182895015706156721"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fvv" value="0">
<input type="hidden" name="fbzx" value="182895015706156721">
<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</td>
</tr></tbody></table></div></ol></form></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If you go to your form on Google and click on 'View Live Form', and then view source on the form, you'll see that the fields you want to upload have aname in the form entry.12345678; the id is in the form entry_12345678. You need to use the name value. Try this:
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry.805356472": fullname,
"entry.1998295708": email,
"entry.785075795": subject,
"entry.934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>
I'm trying to POST some JSON data to a local host and I keep getting a 404 Not Found error which is strange because the php file is located in the correct location as specified in the script. I would appreciate any feedback from anyone who has experience with this. Am I getting this error because the the server can not locate the ajax.php file for some unknown reason?
<div class="container">
<div class="header">
<h3 class="text-muted">AJAX JSON Data</h3>
</div>
<div id="data-div">
<form method="post" action="api/ajax.php" class="ajax">
<p><label for="firstname" class="contact-input-text">First Name</label> <br/>
<input id="first-name" name="firstname" type="text" maxlength="30" autofocus /></p><p><label for="lastName" class="contact-input-text">Last Name</label> <br/>
<input id="last-name" name="lastname" type="text" maxlength="30" autofocus /></p>
<p><input type="submit" id="submit-button" class="contact-input-text" value="submit" /></p>
</form>
</div>
</div>
<script>
$('form.ajax').on('submit', function(){
var jsondata = {};
$(this).find('[name]').each(function(i, data){
console.log(data);
var that = $(this);
var key = that.attr('name');
var value = that.val();
jsondata[key] = value;
});
console.log(jsondata);
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'json',
data: jsondata,
success: function(response){
console.log(response);
},
error: function(xhr){
console.log(xhr);
}
});
return false;
</script>
Here is the ajax.php file....
<?php
if(isset($_POST['submit'])) {
$file = "data.json";
$json_string = json_encode($_POST,JSON_PRETTY_PRINT);
file_put_contents($file,$json_string,FILE_APPEND);
}
?>
This is the directory structure :
index.html (contains the form input fields and the ajax request)
ajax.php
/styles
/images
have you ensure with correct url in ajax?
maybe not thi:
url: 'ajax.php'
but this:
url: 'api/ajax.php'
I'm trying to run a php script using ajax after a form submission.
this is the form
<form id="form" class="form">
<input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value="">
<textarea id="message" type="text" value="" name="message" onchange="myUpdateFunction()" required placeholder="Comments" style="border:none;border-bottom:1px solid #424242; width:530px;"></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit" >
</form>
this is my script
$('.submit').on('click', function() {
$.ajax({
url: "send.php",
method:'post',
data: {'email': $('#email').val(), 'message': $('#message').val()}
}).done(function() {
alert('Message Sent.');
});
});
and this is my send.php file
<?php
if(isset($_POST['send_request'])){
//send email
}
?>
but it doens't work, the page is reloaded, the email is not sent and no "alert message" is displayed
there is no problem in php because if I delete the javascript and I add action="send.php" method="POST" as attributes in the form it works, so I think that the problem is the javascript
http://jsfiddle.net/o5xvpkmv/2/
You shouldn't use the onchange or the click event for this kind of stuff, but the submit event (preventing the default behaviour of submit button).
<form id="form" class="form">
<input id="email" type="email" name="email" placeholder="Email" required>
<textarea id="message" type="text" value="" name="message" placeholder="Comments" required></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit">
</form>
$("#form").on('submit', function(e) {
e.preventDefault();
$.ajax({
url: "send.php",
method:'post',
data: $( this ).serialize()
}).done(function() {
alert('Message Sent.');
});
});
or (both ways are good)
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
url: "send.php",
method: 'post',
data: $(this).serialize()
}).done(function () {
alert('Message Sent.');
});
return false;
});
});
Also, about the backend, you should make this kind of check:
if (
isset($_POST["email"]) &&
!empty($_POST["email"]) &&
isset($_POST["message"]) &&
!empty($_POST["message"])) {
//send email
}