Showing messages without refreshing page after submitting a Uniform form

Kirby 3 Questions ๐Ÿค”
1

When I press submit on the Uniform contact form, the entire page refreshes.
Is there a way to display notification messages such as success without refreshing the page?

You can check the problematic page by clicking โ€œrequestโ€ at the link below.
https://post-standards.com

controllers/home.php

<?php


use Uniform\Form;

return function ($kirby)
{
    $form = new Form([
        'name' => [
            'rules' => ['required'],
            'message' => 'Name is required',
        ],
        'email' => [
            'rules' => ['required', 'email'],
            'message' => 'Email is required',
        ],
        'phone' => [
            'rules' => ['required'],
            'message' => 'Phone is required',
        ],
        'inquiring_product' => [
            'message' => 'Inquiring product is required',
        ],
        'product_use' => [
            'message' => 'Product use is required',
        ],
        'quantity' => [
            'message' => 'Quantity is required',
        ],
        'qna' => [
            'message' => 'Q&A is required',
        ],

    ]);

    if ($kirby->request()->is('POST')) {
        $form->emailAction([
            'to' => 'order@post-standards.com',
            'from' => 'noreply@post-standards.com',
            'bcc' => get('email'),
            'subject' => '[Post Standards] ์ƒˆ ํ”„๋กœ์ ํŠธ ์˜๋ขฐ',
        ]);
    }

    return compact('form');
};

templates/home.php

<form class="contact-form" method="POST" autocomplete="off">
        <input<?php e($form->hasError('name'), ' class="erroneous"')?> type="text" name="name" id="name" value="<?php $form->echoValue('name') ?>" required placeholder="Name or Company ์ด๋ฆ„ ํ˜น์€ ํšŒ์‚ฌ๋ช…">

        <input name="email" type="email" value="<?php echo $form->old('email') ?>" required placeholder="E-mail ์ด๋ฉ”์ผ">

        <input type="tel" name="phone" id="phone" value="<?php $form->echoValue('phone') ?>" placeholder="Phone Number ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ">

        <input type="text" name="inquiring_product" id="inquiring_product" value="<?php $form->echoValue('inquiring_product') ?>" placeholder="Inquiring Product ๋ฌธ์˜ ์ œํ’ˆ">

        <input type="text" name="product_use" id="product_use" value="<?php $form->echoValue('product_use') ?>" placeholder="Product Use ์ œํ’ˆ ์šฉ๋„">

        <input type="text" name="quantity" id="quantity" value="<?php $form->echoValue('quantity') ?>" placeholder="Quantity ์ˆ˜๋Ÿ‰">

        <textarea rows="1" name="qna" id="qna" value="<?php $form->echoValue('qna') ?>" placeholder="Q&A ๊ธฐํƒ€ ๋ฌธ์˜ ์‚ฌํ•ญ" onclick="resize(this)" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>

        <?php echo csrf_field() ?>
        <?php echo honeypot_field() ?>
        <input class="submit" type="submit" value="Submit">
        <?php if ($form->success()): ?>
           <div class="contact-info-text">Successfully submitted!</div>
        <?php else: ?>
            <div class="contact-info-text"><?php snippet('uniform/errors', ['form' => $form]); ?></div>
        <?php endif; ?>
    </form>
2

That is the default behaviour for forms.

For a submission without refreshing you would need to use ajax - AJAX - Kirby Uniform

Personally I have been using Alpine Ajax recently (https://alpine-ajax.js.org/) as I was already using Alpine.

1 Like
3

@mikeharrison Great advice! Already using Alpine with a plugin for form validation. The AJAX plugin looks very promising! Will definitively test it!