Vextor Quick Form JS

HSP

How to use ?

1. Instead of the standard form tag, you can use a div with the class vextor-form-js
2. Add a button with the data-vextor-send-button attribute inside this div, which will act as a trigger for submitting the form

Example:

<div class="vextor-form-js">
    <input type="text" name="name" required>
    <input type="hidden" name="subject" value="My Subject">
    <input type="file" name="files[]">
    <button data-vextor-send-button>Send</button>
</div>

Are there any hooks or filters?

Yes, there are several filters and hooks

Filters:
* add_filter(‚vextor_form_recipient_email‘, $email) // Use it to redefine the recipient’s Email address
* add_filter(‚vextor_form_translations‘, $translations) // Use it to replace keys from the form with clear names

Example:

add_filter('vextor_form_translations', 'my_theme_custom_translations');

function my_theme_custom_translations(array $translations): array
{
    $translations['subject'] = 'My subject';

    return $translations;
}

Actions:
* add_action(‚vextor_before_form_send‘, $data)
* add_action(‚vextor_form_sent‘, $data)
* add_action(‚vextor_form_error‘, $data)

There are also JS events:
* vextorformjs:prevalidation, {form, button}
* vextorformjs:postvalidation, {form, button}
* vextorformjs:sending, {form, button}
* vextorformjs:error, {form, button, response}
* vextorformjs:sent, {form, button, response}

Example:

document.addEventListener('vextorformjs:prevalidation', (event) => {
    const { form, button } = event.detail;

    console.log('Form:', form);
    console.log('Button:', button);
});