Form POST to Wisely re-directing to Wisely hosted page

Design help Custom code
1

We are currently creating subscribe modals using Wisely.io, and when the forms POST - they redirect the user to the Wisely.io page.

You can view the actions at the following URL: http://watergrill.webflow.io/web-elements/subscribe-modal-fish-camp

I’ve followed the following form post about having the action set to HTTPS:// but I’m still having issues: Form POST to mailchimp re-directing to mailchimp hosted signup - #2 by samliew

Any insight would be greatly appreciated.

@samliew, Would you happen to know?

Thanks Webflowers :blush:

2

Seems like the Webflow form AJAX works only if submitting to Webflow. The form will redirect to the action page if it is set.

A possible workaround is to code your own form submission AJAX handler so that you can do it in the background without having to leave the page.

1 Like
3

Oh, awesome! Sounds good.

Like so (with the following between a script tags):

makeWebdflowFormAjax = function( forms, successCallback, errorCallback ) {
	forms.each(function(){
		var form = $(this);
		form.on("submit", function(){
			var container = 	form.parent();
			var doneBlock  =	$(".w-form-done", container);
			var failBlock  =	$(".w-form-fail", container);
		
			var action = 		form.attr("action");
			var method = 		form.attr("method");
			var data = 			form.serialize();
			
			// call via ajax
			$.ajax({
				type: method,
				url: action,
				data: data,
				success: function (resultData) {
					if (typeof successCallback === 'function') {
						// call custom callback
						result = successCallback(resultData);
						if ( ! result ) {
							// show error (fail) block
							form.show();
							doneBlock.hide();
							failBlock.show();
							console.log(e);
							
							return;
						}
					}
					
					// show success (done) block
					form.hide();
					doneBlock.show();
					failBlock.hide();
				},

				error: function (e) {
					// call custom callback
					if (typeof errorCallback === 'function') {
						errorCallback(e)
					}
					
					// show error (fail) block
					form.show();
					doneBlock.hide();
					failBlock.show();
					console.log(e);
				}
			});
			
			// prevent default webdlow action
			return false;
		});
	});
}