Magic Forms Generic AJAX Form setup install

At some point in time you need to allow your clients, customer or users to submit feedback or query. At first glance it seems really easy process but its not you need to setup form, validation and save data to database as well send notifications to customers.

Well Magic Forms will make your life lot easier with thit task.

In this tutorial we will learn about Generic AJAX Form provided by Magic Forms.

First of all you need to install magic form plugin to your CMS its really easy step. if you need help you can always check our tutorial on how to install plugins.

Once you intsalled plugin, now you just need to use its component to show contact form.

You can create new page named contact and you can simply add Generic AJAX Form component to the page.

After adding component just copy paste below html to markup section. here we are gathring very basic details from users like name, email, subject and message.

<div class="page-content">
    <div class="container">
        <div class="static-content-page">
            <h1 class="h2 mb-3 center-t cp">Contact Us</h1>
            <form data-request-flash data-request="contactForm::onFormSubmit">

                {{ form_token() }}

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

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

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

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

                <div class="form-group center-t">
                    <button id="simpleContactSubmitButton" type="submit" disabled class="btn wait-js" data-text="Submit">
                        Loading...
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

Now our ajax form is ready just navigate to the /contact page and start filling details for test.

Once user submit there request you can check it in backend easily.

You will see notification on plugin icon about how may new queries you received.

This is the very very basic usage of Magic form Plugin, plugin can do much more then this we will check its full potential in next tutorials.