I have created a form that is processed using an AJAX request. The code I have here works fine as I get the form result message to appear. I now need to send the input data to the processor API. How do I do this?
<div class="col-md-6 col-sm-12">
<form id="my-form" class="contact-form margin-top-50">
<!-- for displaying the results of the sending operation -->
<span class="form-result"></span>
<input type="text" name="name" id="my-form-name" placeholder="Name" required>
<input type="email" name="email" id="my-form-email" placeholder="Email" required>
<input type="tel" name="phone" id="my-form-phone" placeholder="Phone">
<!-- a 'honeypot' field, to help us detect spam bots (use css to hide it) -->
<input type="text" name="website" id="my-form-website" value="" class="hidden">
<textarea name="message" id="my-form-message" rows="9" placeholder="Message"></textarea>
<button class="button-1 fade-in" type="submit" name="submit">
Get Started!
</button>
</form>
</div>
<script>
// AJAX FORM PROCESSING
$('#my-form').on('submit', function(e){
e.preventDefault();
var form = $(this);
$.ajax({
type: 'POST',
// use the same url here as the 'pattern' in your route
url: 'api/form',
data: form.serialize(),
success: function(result){
// form data successfully reached form processor api
if(result.success){
// message successfully sent
form.find('.form-result').text('Your message was sent successfully - thank you!');
} else {
// an issue was encountered
if(result.errors == undefined || result.errors == null || result.errors.length == 0){
// no validation errors - an email sending error was encountered
form.find('.form-result').text(result.msg);
} else {
// a validation error was encountered
var msg = "Please note: <br>";
if(result.errors.indexOf('name') != -1){
msg += "Name field must not be empty. <br>";
}
if(result.errors.indexOf('email') != -1){
msg += "Email field must contain a valid email. <br>";
}
if(result.errors.indexOf('website') != -1){
msg += "You seem to be a robot. <br>";
}
form.find('.form-result').html(msg);
}
}
},
error: function(result){
// the form was unable to reach processor api
form.find('.form-result').text('Error '+ result.status + ' - unable to process form: ' + result.statusText);
},
dataType: 'json'
});
});
</script>
Use a route that doesn’t start with api. Custom API endpoints need to be registered inside the api option and require authentication. That’s probably not what you want.
Hi I am currently hosting locally with Xampp, when I upload it to Krystal’s server will it work without making these changes? I will update the php.ini, where do I locate this file?
Hi, I have got the form on the webserver and I get a successful message so I am assuming it is working fine. However I do not see the test message in my email, should I expect to see it here?
There are many reasons why you don’t see the email:
some server misconfiguration or error with the mailserver (maybe not handled properly, thus no error shown in the frontend; showing errors in the frontend for public websites is a bad idea in general for security reasons)
it’s flagged/marked as spam/junk mail and thus delivered to some special folder, deleted or rejected by the mailserver
[…]
I think you have to try to dig down to where the error might be. First, check the obvious things like spam folder, etc.
Hi Warg, I have check spam and there is nothing there. With regards to the misconfiguration or error with the mail server, is that something I can fix or do I need to contact the email service provider?
Sending and receiving mail is a rather complicated matter. Are you using a third party service or going through your provider? What email address are you using as sender? Are DNS records, DKIM, SPF, DMARC set for the sending email address?
Here is an article that explains the different technologies:
I am about to relocate my email to Krystal which is a UK based hosting provider recommended by the Kirby team. Is there a chance that the form will work correctly if I do this?
The import thing here is to send mail through SMTP instead of through PHP mail. In Kirby, you configure this via the email transport config option. The rest has nothing to do with Kirby at all and you have to find out what these transport setting for SMTP are with your hosting provider.
Just on a side note: Krystal has been recommended by other Kirby users here, it is by no means an official recommendation from the Kirby team, since we don’t have any first hand experience with this provider.