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 byMagic 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.
Related Questions
- → OctoberCMS Backend Loging Hash Error
- → "failed to open stream" error when executing "migrate:make"
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → Create plugin that makes objects from model in back-end
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → How to install console for plugin development in October CMS
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS