Contact form to to reach processor api

Kirby 3 Solved ✅
#1

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>
#2

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.

#3

Okay yea that sounds good, ideally I would like the information submitted to be sent to an email address, what would you suggest for this outcome?

#4

That would be handled in your endpoint, you can use this as a basis: Email contact form | Kirby

#5

Thank you for the help.

#6

Sorry to bother you again, I am getting this error: The form could not be sent Could not instantiate mail function. Where do I find the mail function?

#7

You either have to enable sendmail() in your php.ini or send via SMTP (if that’s available on your host) or via a third party service like MailChimp.

For local testing, something like MailHog is a good option, you can find a recipe here:

https://www.php.net/manual/en/mail.configuration.php

#8

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?

#9

you can find the path to the used php.ini files via phpinfo().

#10

Regarding my previous email will it work when I put it on the web server?

#11

In most cases, yes, but that depends on your hosting service. Either test it, check out their documentation or contact their support.

#12

Perfect thanks for the help

#13

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?

#14

There are many reasons why you don’t see the email:

  1. 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)
  2. it’s flagged/marked as spam/junk mail and thus delivered to some special folder, deleted or rejected by the mailserver
  3. […]

I think you have to try to dig down to where the error might be. First, check the obvious things like spam folder, etc.

#15

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?

#16

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:

#17

For my email I am using AWS’s Amazon Web Mail. In controllers/contact.php I have set up my sending/receiving like this. Will this work?

$kirby->email([
    'template' => 'email',
    'from'     => 'hello@mango-media.eu',
    'replyTo'  => $data['email'],
    'to'       => 'hello@mango-media.eu',
    'subject'  => esc($data['name']) . ' sent you a message from your contact form',
    'data'     => [
        'text'   => esc($data['text']),
        'sender' => esc($data['name'])
    ]
]);
#18

I don’t know that service. Is that the same as SES? Then you can check out their documentation how to correctly set up that service for your email.

#19

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?

#20

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.