Documentation / Tutorials / Tutorials & How to’s
Submit form with handler
/ Tutorials & How to’s / Submit form with handler
There are few steps to follow to submit the simple form.
Write your HTML for form:
- Add form entries CPT to save your form into it.
- Add your code of form in main template.
- Write ajax request for submit form in <script> tag as in given example. In bind we have to pass the event. In bind_selector we have to pass either form which is submitted or button's class. In route_ajax we have to pass the template name which is playing role as handler of the form.
- Write second template as form handler. It will work for:
- Saving the current form in given CPT.
- Show the thank you message. In this we are using template tag to replace the content with thank you message by selector given in selector attribute of it.
- Mail the information to Admin and user.
[aw2.template main]
<form role='employee-detail'>
<div class="add-employee">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="as_entries|meta|f_name"
id="as_entries|meta|f_nam">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="as_entries|meta|email"
id="as_entries|meta|email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<script type=spa/axn
axn='form.ajax'
bind='submit'
bind_selector="form[role='employee-detail']"
route_ajax='[aw2.get module.slug /].save_emp_details'></script>
[/aw2.template]
[aw2.template save_emp_details]
[aw2.save_form tag='as_entries' set_post_id='module.entry_id']
{
"post_type":"as_entries",
"post_status":"publish",
"post_title" :"[aw2.get request.as_entries|meta|f_name /]"
}
[/aw2.save_form]
<template axn=selector.replace selector='.add-employee' get='me.html'>
<p class="brand-success font-size-large text-center pad-x-3">Thank you.</p>
<p class="brand-success font-size-large text-center pad-x-3">
Your form has been successfully submitted. We will get back to you soon.
</p>
<div class="gap-3"></div>
</template>
[/aw2.template]