Alerts

Customize the Form Result Alerts (success/error) according to what you require. Set the data-alert-type to inline or notify to use the Default Alert Types. To use a Custom Alert Type (example), use data-alert-type="false". Example:

Code Example

<div class="form-widget" data-alert-type="inline">
	<div class="form-result"></div>

	<form class="row" id="template-contactform" action="include/form.php" method="post">

		<div class="form-process"></div>

		...

	</form>
</div>

Using Custom Alerts

You can use HTML/CSS or jQuery to Customize the Alerts. Canvas Form uses jQuery and CSS Classes to interact with the Document about the Form Status:

CSS Classes:

The CSS Classes are added on the Document <body>:

on Form Ready:

<body class="template-contactform-ready">

on Form Processing: (after user clicks the Submit Button)

<body class="template-contactform-processing">

on Form Complete: (after Form AJAX request is completed)

<body class="template-contactform-complete">

on Form Complete & Successful: (after Form Submission is Successful)

<body class="template-contactform-complete template-contactform-success">

on Form Complete but has Errors: (is Form has Errors)

<body class="template-contactform-complete template-contactform-error">

Note: Make sure that there’s always a Unique ID assigned to the Form as the Form Classes above are assigned based on your Form IDs. Example:

<form class="row" id="template-contactform" action="include/form.php" method="post">

jQuery Events:

The jQuery Events are triggered only on Form Submission Success and Error only.

on Form Complete & Successful: (after Form Submission is Successful)

jQuery('#template-contactform').on( 'formSubmitSuccess', function(){
	// Your JS Codes here
});

on Form Complete but has Errors: (is Form has Errors)

jQuery('#template-contactform').on( 'formSubmitError', function(){
	// Your JS Codes here
});

Note: Always add the JS codes at the bottom of the Page after the js/functions.js JS File Linking.