Open modal on succesful mail

Hello,

Thanks for your Patience!

Consider following the Steps below:

1. Suppose this is your Modal Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

<!-- Modal -->
<div class="modal fade text-start" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
				<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

Notice, that the data-bs-target="#myModal" is required. You can simply hide it by adding he .d-none Class on the <button>.

1. Use the following JS Code to open the Modal:

document.addEventListener('DOMContentLoaded', function() {
	var templateContactForm = document.querySelector('#template-contactform');

	templateContactForm.addEventListener('formSubmitSuccess', function() {
		var modalTrigger = document.querySelector('[data-bs-target="#myModal"]');
		var modal = bootstrap.Modal.getOrCreateInstance('#myModal');
		modal.show(modalTrigger);
	});
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PS. We will update the Documentations shortly.

Hello,

Thanks for your Patience!

Looks like there are some issues triggering the events with Vanilla JS, we are checking for what is exactly causing this. Meanwhile, please consider using this code instead:

SEMICOLON.Core.isFuncTrue(function() {
	return typeof jQuery !== 'undefined' && typeof bootstrap !== 'undefined';
}).then( function(cond) {
	if( !cond ) {
		return false;
	}

	jQuery('#template-contactform').on('formSubmitSuccess', function() {
		var modalTrigger = document.querySelector('[data-bs-target="#myModal"]');
		var modal = bootstrap.Modal.getOrCreateInstance('#myModal');
		modal.show(modalTrigger);
	});
});

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.