frontello-ui-form

Form

Form submitter

Header

<script src="form-submitter.js"></script>

Body

<form action="" method="post" class="frontello-ui-form-submitter">
	<div class="field">
		<label>Text</label>
		<input type="text" name="text_1" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
	</div>
	<div class="field">
		<label>Text</label>
		<input type="text" name="text_2" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
	</div>
	<div class="field">
		<label>Text</label>
		<input type="text" name="text_3" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
	</div>
	
	<button type="submit">Submit</button>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
	
	let formSubmitterElement = document.querySelector('.frontello-ui-form-submitter');
	
	formSubmitterElement.addEventListener('submit', (event) => {
		const result = (new FormSubmitter(event.detail.form)).submit();
		result.then((returnedDatas) => {
			if (returnedDatas.success == true) {
				event.detail.form.reset();
				document.location.href = returnedDatas.redirectUrl;
			}
		});
	}, false);
	
});
</script>

Form stepper

Header

<script src="form-stepper.js"></script>

Body

<form action="" method="post"  class="frontello-ui-form-stepped">
	<div class="fieldset-list">
		<fieldset>
			<legend class="title">Step 1</legend>
			<div class="field">
				<label>Text</label>
				<input type="text" name="text_1" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
			</div>
		</fieldset>
		<fieldset>
			<legend class="title">Step 2</legend>
			<div class="field">
				<label>Text</label>
				<input type="text" name="text_2" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
			</div>
		</fieldset>
		<fieldset>
			<legend class="title">Step 3</legend>
			<div class="field">
				<label>Text</label>
				<input type="text" name="text_3" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
			</div>
		</fieldset>
	</div>
	<nav>
		<button type="button" class="prev-step">
			<span>Prev</span>
		</button>
		<button type="button" class="next-step" data-next-step-label="Next" data-submit-label="Submit">
			<span>Next</span>
		</button>
	</nav>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
	let formStepperElement = document.querySelector('.frontello-ui-form-stepped');
	formStepperElement.addEventListener('init', (event) => {
		console.log('formStepper: init');
		console.log(event.detail);
	}, false);
	formStepperElement.addEventListener('change', (event) => {
		console.log('formStepper: change');
		console.log(event.detail);
	}, false);
	formStepperElement.addEventListener('submit', (event) => {
		console.log('formStepper: submit');
		console.log(event.detail);
	}, false);
	
	let formStepper = new FormStepper(formStepperElement);
});
</script>