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]