Magic Forms Generic AJAX Form

Generic Magic Forms AJAX form renders a generic contact form to show the basic of Magic Forms Plugin.

You can override the HTML markup by creating a new partial and set filename genericForm/default.htm in component settings.

Note: you should replace genericForm with your component's alias name.

Example markup for generic ajax form:

<form data-request="{{ __SELF__ }}::onFormSubmit">

    {{ form_token() }}

    <div id="{{ __SELF__ }}_forms_flash"></div>

    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" class="form-control">
    </div>

    <div class="form-group">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" class="form-control">
    </div>

    <div class="form-group">
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" class="form-control">
    </div>

    <div class="form-group">
        <textarea id="comments" name="comments" rows="8" cols="80"></textarea>
    </div>

    <div class="form-group">
        {% partial '@recaptcha' %}
    </div>

    <button id="simpleContactSubmitButton" type="submit" class="btn btn-default">Submit</button>

</form>

When you submit data you can see that data inside Magic form plugins records

magic-forms-backend-records

You can also check other types of Magic Forms such as empty ajax form and upload ajax form.

js interview questions