Formular selbst hosten

Die benötigten Formulare können auch direkt in die bestehende Homepage kopiert werden und auch das Script kann lokal gehostet werden. Damit hat man die volle Kontrolle über Funktion und Design.

Download der Formulare:

Nachdem Sie die Formulare angepasst haben folgen Sie bitte den Beschreibungen hier.

Anpassung anhand des Beispiels FOC – Gutschein erstellen

Nachdem sie die .zip Datei entpackt haben, finden sie folgende Dateien im Ordner:

  • focloud-client.css
  • focloud-client.js
  • spinner.gif
  • voucher.html
  • voucher_EN.html

Uploaden sie diese Files in einen Ordner auf ihrem Server.

Die Datei voucher.html dient als einfache Vorlage für die Gutscheinerstellung und kann von ihnen angepasst werden. Der Code der Seite basiert auf dem Bootstrap-Framework, kann jedoch natürlich bei Bedarf von einem Web-Developer ihrem Framework angepasst werden.
Im Headbereich der voucher.html wird auf 2 Dateien im selben Ordner verwiesen:

  • focloud-client.css – hier können sie zusätzliche css Styles einfügen (nicht unbedingt notwendig)
  • focloud-client.js – diese Datei ist verplichtend.
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Online-Gutschein</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<link rel="stylesheet" href="focloud-client.css">
	<script src="focloud-client.js"></script>
</head>

Im Body Bereich finden Sie den Code für das Formular.

Wichtig:
bitte entfernen sie keinesfalls die onload Funktion im body und ersetzen sie den Datenbanknamen mit ihrem. (_config[‘db’] = ‘DEMO’) => (_config[‘db’] = ‘IhrDatenbankName’).

<body onload="filloutVoucherForm()">

	<script>
		const _config = [];
		_config['db'] = 'DEMO'; /* Bitte hier ihren Datenbanknamen eintragen */
	</script>

	<div class="focloud-module">
		<div class="container">
			<h2>Online Gutschein erstellen</h2>
			<div class="d-none" id="message"></div>

			<form id="form" autocomplete="off" class="needs-validation" novalidate>
				
				<div class="row">

					<div class="form-group col-sm-2">
						<label for="amount">Betrag</label>
						<input id="amount" class="form-control" value="10,00" required />
						<div class="invalid-feedback">Bitte geben Sie den gewünschten Betrag an.</div>
					</div>
					<div class="form-group col-sm-10">
						<label for="text">Individueller Text</label>
						<input id="text" class="form-control" maxLength="80" />
					</div>

					<div class="form-group col-sm-2">
						<label for="email">EMail Adresse</label>
						<input type="text" class="form-control" id="email" required />
						<div class="invalid-feedback">Bitte geben Sie eine gültige EMail Adresse an.</div>
					</div>
					<div class="form-group col-sm-2">
						<label for="addresses">Anrede:</label>
						<input id="addresses" class="form-control" />
					</div>
					<div class="form-group col-sm-2">
						<label for="firstname">Vorname</label>
						<input id="firstname" required class="form-control" />
						<div class="invalid-feedback">Bitte geben Sie Ihren Vornamen an.</div>
					</div>
					<div class="form-group col-sm-6">
						<label for="name">Name</label>
						<input id="name" required class="form-control" />
						<div class="invalid-feedback">Bitte geben Sie Ihren Namen an.</div>
					</div>

					<div class="form-group col-sm-2">
						<label for="zipcode">Postleitzahl</label>
						<input type="text" class="form-control" id="zipcode" />
					</div>
					<div class="form-group col-sm-4">
						<label for="city">Ort</label>
						<input id="city" class="form-control" />
					</div>
					<div class="form-group col-sm-6">
						<label for="street">Straße:</label>
						<input id="street" class="form-control" />
					</div>

				</div>


				<div class="row mt-3">
					<div class="col">
						<input type="checkbox" id="agb"	onchange="document.getElementById('submit').disabled = !this.checked;" />
						<label for="agb">Ich habe die AGB und die Buchungskonditionen (Widerrufsbelehrung) gelesen und akzeptiert</label>
					</div>
				</div>

				<div class="row mt-3">
					<div class="col">
						<button type="button" disabled id="submit" class="btn btn-primary"
							onclick="onSubmitVoucherForm()">Gutschein erstellen</button> <img src="spinner.gif"
							id="spinner" class="d-none" />
					</div>
				</div>

			</form>
		</div>
	</div>

</body>

</html>