Canvas Support

How can I provide custom messages for contact for submissions?

1 reply · opened Jul 29, 2016

BBigCanOfTunaJul 29, 2016

I was wondering if there was a way I might be able to provide custom (and unobtrusive) messages when submitting the contact form (v4.1) without having to modify the JS?

For example, I'm using https://formspree.io/ to provide email services. It's very simple, but the responses are slightly different than what the functions.js code seems to need.

For example, the response from a successful contact submission is:

{ 'success': 'email sent', '_next':'/redirect_page'}

I was hoping I might be able to set a data-attribute on an element in the markup and pull the necessary messaging off that.

For example:

<div class="contact-form-result" data-success-msg="Email Sent!" data-error-msg="Try again!"></div>

Anyway, if there is a known way of customizing the messages without changing the response of the email service (out of my control) and the template JS, please let me know!

Thanks!
Aaron.

SSemicolon WebSTAFFAug 7, 2016

Hello,

[sb_private_reply]We Really Apologize about the Delay in replying to your Support Query and Truly Truly appreciate your Patience with us![/sb_private_reply]

This is currently not available by Default but definitely appears to be a nice feature. Please consider updating the contactForm: function() Function Block in the js/functions.js File with the following code: 

contactForm: function(){

	if( !$().validate ) {
		console.log('contactForm: Form Validate not Defined.');
		return true;
	}

	if( !$().ajaxSubmit ) {
		console.log('contactForm: jQuery Form not Defined.');
		return true;
	}

	var $contactForm = $('.contact-widget:not(.customjs)');
	if( $contactForm.length ');
				} else {
					$(form).find('.form-process').fadeIn();
				}

				$(form).ajaxSubmit({
					target: elementResult,
					dataType: 'json',
					success: function( data ) {
						if( elementLoader == 'button' ) {
							defButton.html( defButtonText );
						} else {
							$(form).find('.form-process').fadeOut();
						}
						if( data.alert != 'error' && elementRedirect ){
							window.location.replace( elementRedirect );
							return true;
						}

						if( elementSuccess ) { data.message = elementSuccess; }

						if( elementError ) { data.message = elementError; }

						if( elementAlert == 'inline' ) {
							if( data.alert == 'error' ) {
								var alertType = 'alert-danger';
							} else {
								var alertType = 'alert-success';
							}

							elementResult.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + alertType ).html( data.message ).slideDown( 400 );
						} else {
							elementResult.attr( 'data-notify-type', data.alert ).attr( 'data-notify-msg', data.message ).html('');
							SEMICOLON.widget.notifications( elementResult );
						}
						if( $(form).find('.g-recaptcha').children('div').length > 0 ) { grecaptcha.reset(); }
						if( data.alert != 'error' ) { $(form).clearForm(); }
					}
				});
			}
		});

	});
},

Now, you can simply use data-success or data-error Attributes on the .contact-widget Element with your Custom Message.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
How can I provide custom messages for contact for submissions? · Canvas Template Support