Uniform custom reply

Kirby 2 Questions 🤔
1

Hi,

I have this code to send a summary.

<?php

return function($site, $pages, $page) {

	$form = uniform(
		'contact-form',
		array(
			'required' => array(
				'first-name' => '',
				'last-name' => '',
				'message'   => '',
				'_from'     => 'email'
			),
			'actions' => array(
				array(
					'_action' => 'email',
					'to'      => $site->to()->html(),
					'sender'  => get('_from'),
					'subject' => 'Contact website',
					'service' => 'phpmailer',
					'snippet' => 'uniform'
				),
					array(
					'_action' => 'email',
					'to'      => get('_from'),
					'sender'  => $site->to()->html(),
					'subject' => 'Thank you for contacting me, {first-name} {last-name}!',
					'service' => 'phpmailer',
					'snippet' => 'uniform-thanks'
				)
			)
		)
	);

	return compact('form');
};

My problem here is that when I send the message, the fields don’t be cleared. The values i entered are still there.
I use this uniform https://blog.the-inspired-ones.de/ajax-uniform. If I remove the second aray it works again.

Here is my code.

<form id="form" method="post">
					<input type="text" name="first-name" id="firstname" placeholder="First Name" />
					<input type="text" name="last-name" id="lastname" placeholder="Last Name" />
					<input type="email" name="_from" id="email" placeholder="Mail" />
					<textarea name="message" id="message" placeholder="Message"></textarea>
					<label class="form__potty" for="website" style="display: none;">Please leave this field blank</label>
					<input type="text" name="website" id="website" class="form__potty" style="display: none;" />
					<input type="hidden" name="_submit" value="<?php echo uniform('contact-form')->token() ?>">
					<span id="feedback"></span>
					<button id="form-submit" type="submit">Send Message</button>
				</form>
				<script>
				window.onload = function () {
					$('#form-submit').click(function (e) {
						e.preventDefault();
						$.post(
							'<?php echo $page->children()->find('send')->url()?>',
							$('#form').serialize()
						)
						.then(function (response) {
							var feedback = $('#feedback');
							feedback.removeClass('success error').text(response.message);
							$('input, textarea').removeClass('erroneous');
							if (response.success) {
								feedback.addClass('success');
								$('input, textarea').prop('value', '');
								$('#form-submit').prop('disabled', 'disabled');
							} else {
								feedback.addClass('error');
								for (var i = response.errors.length - 1; i >= 0; i--) {
									$('[name="' + response.errors[i] + '"]').addClass('erroneous');
								};
							}
						});
					});
				};
				</script>

What is the solution here?

Thanks for helping.

2

Are both emails sent even if the form is not cleared? Are there any errors in the JSON response when the form is not submitted successfully?

3

Yes the both emails are sent even if the form is not cleared…
I see no errors…

4

What does the JSON response look like? response.success is probably false since the form is not cleared. But is response.message empty, too?

5

This is my JSON file.

<?php

header::contentType('application/json');
$errors = '';
// Check each parameter of the request if it is erroneous
foreach (array_keys(get()) as $field) {
    $errors .= $form->hasError($field) ? "\"$field\"," : '';
}
// Strip trailing comma
$errors = substr($errors, 0, -1);
?>
{
    "success": <?php e($form->successful(), 'true', 'false')?>,
    "message": "<?php echo trim($form->message()) ?>",
    "errors": [<?php echo $errors ?>]
}
6

Try the updated template of the blog post, this should be more robust:

<?php

header::contentType('application/json');
echo json_encode([
    'success' => $form->successful(),
    'message' => trim($form->message()),
    'errors' => array_keys(array_filter(get(), function ($field) use ($form) {
        return $form->hasError($field);
    }, ARRAY_FILTER_USE_KEY)),
]);

If this doesn’t resolve your issue have a look at the network tab of your browser’s developer tools. Open the developer tools, then submit the form and observe the POST request that has been made. What is the response code (200, 500)? What are the “params” and “response”?

7

Even with this code it doesn’t work.
I have a response code 500…

8

Now we’re slowly getting there. Take a look at your server log file for what the error message of the 500 error is.