Formulareinbindung in Ihre Website

Voraussichtliche Lesezeit: 15 Minute(n)

Formularkonfigurator #

Formularkonfigurator #

Einbettungscode in die Website #

Fachwissen

Zur Einbindung des Formulars in externe Webseiten wird das Embed-Snippet in den HTML-Code der Zielseite eingefügt. Die Reihenfolge und Platzierung stellen sicher, dass das Formular korrekt geladen wird. Es muss vor </body> und an der Stelle, an der das Formular erscheinen soll, eingebunden werden.

Wichtige Angaben innerhalb des Embed-Snippet:

Ihre URL wird in der Regel direkt auf Basis des TecArt CRM erstellt. Haben Sie in den Einstellungen zum Add-on einen abweichenden Host angegeben, wird die CRM-URL durch diese automatisch ersetzt. Das Formular lässt sich dennoch über beide URL´s aufrufen.
Sowohl form_id, wie auch ta_forms_container_ID enthalten die eindeutige ID des Formulars. Eine andere ID bedeutet somit auch ein anderes Formular.
Der token ist besonders wichtig, denn er ist die Schnittstelle für die Funktion des Formulars zwischen Ihrer Webseite und dem TecArt-CRM. Auch dieser wurde in den Add-on-Einstellungen festgelegt.
Die Script-Tags async und defer sind im Standard vorgegeben, um Blockierungen zu vermeiden. Die genauen Funktionen finden Sie auf der externen Seite sehr gut beschrieben.
Domain und Protokoll (HTTPS) der Zielseite sollten mit den CRM-Einstellungen übereinstimmen, um CORS-Probleme (Cross-Origin Resource Sharing) zu vermeiden. Diese können entstehen, wenn ein Browser Sicherheitsanfragen zwischen verschiedenen Domains (Formular-Frontend zu Backend) blockiert.

Wird der Token in den Add-on-Einstellungen geändert, funktionieren alle Formulare nicht mehr. Sie müssen dann das Snippet für jedes eingebundene Formular auf den neuen Token ändern.

CSS-Styling und Klassenstruktur #

Fachwissen

Alle Formular-Elemente nutzen vordefinierte CSS-Klassen und CSS-Variablen. Das ermöglicht eine Anpassung des Erscheinungsbilds über eigenes Stylesheet, ohne den Embed-Code zu ändern. Vor dem Embed-Snippet kann ein eigenes Stylesheet eingebunden werden, damit diese greifen. Nutzen Sie Browser-DevTools, um die gerenderten Elemente und Klassen bei Bedarf zu inspizieren.

Jedes Formular wird bereits mit einem Standard-CSS ausgeliefert. So können Sie dieses direkt in Ihre Webseite einbinden. Alle Screenshots, welche im Handbuch vorhanden sind, zeigen diesen Standard.

Die nachfolgenden Tabellen enthalten einige Beispiele, stellen jedoch keine Vollständigkeit der CSS-Klassen und Einstellungsmöglichkeiten dar, da das Add-on immer der Weiterentwicklung und möglichen Erweiterungen unterliegt.

Stilelemente #

Global / Container #

Bereich	CSS-Selektor	Beschreibung / Zweck
Formular-Container	[id^=“ta_forms_container_“]	Äußerer Wrapper je Formular
Formular	form.ta-formbuilder-form	<form>-Element
Titel	.ta-formbuilder-title	Formular-Überschrift
Beschreibung	.ta-formbuilder-description	Beschreibung oberhalb des Formulars
Opt-In	.ta-formbuilder-opt-in	Wrapper für Opt-In-Bereich

Step-Navigation (Punkte) #

Bereich	CSS-Selektor	Beschreibung / Zweck
Dot-Container	.ta-form-step-indicator	Wrapper für Step-Punkte
Punkt	.ta-form-step-dot	Einzelner Schritt-Punkt
Aktiver Punkt	.ta-form-step-dot.active	Aktueller Step
Hover	.ta-form-step-dot:hover	Hover-Effekt
Versteckter Step	display:none via JS	Dots für condition-hidden Steps werden ausgeblendet

Steps #

Step-Sichtbarkeit & Required werden per JS gesteuert, nicht per CSS!

Bereich	CSS-Selektor	Beschreibung / Zweck
Step-Wrapper	.ta-formbuilder-step[data-step-id]	Einzelner Formular-Step
Step-Titel	.ta-formbuilder-step-headline	Überschrift im Step
Step-Text	.ta-formbuilder-step-description	Beschreibung im Step

Sections (Untergruppen) #

Bereich	CSS-Selektor	Beschreibung / Zweck
Section	.ta-formbuilder-section[data-section-id]	Gruppierung innerhalb eines Steps
Section-Titel	.ta-formbuilder-section-headline	Abschnittsüberschrift
Section-Text	.ta-formbuilder-section-description	Beschreibung

Rows / Grid / Spalten #

Bereich	CSS-Selektor	Beschreibung / Zweck
Row	.ta-formbuilder-form-row	Grid-Zeile
Spalte 12	.ta-formbuilder-r12	Volle Breite 1/1 Seite
Spalte 6	.ta-formbuilder-r6	Halbe Breite 1/2 Seite
Spalte 4	.ta-formbuilder-r4	Drittel 1/3 Seite
Siblings (Geschwister)	.ta-formbuilder-row-has-siblings	Mehrere Felder in einer Row

Felder – allgemein #

Bereich	CSS-Selektor	Beschreibung / Zweck
Field-Wrapper	.ta-formbuilder-field	Basis-Wrapper für jedes Feld
Feld-Typ	.ta-formbuilder-field-	z. B. -text, -checkbox, -radio
Label	label.ta-formbuilder-label	Feldbeschriftung
Placeholder-Label	.ta-formbuilder-label-placeholder	Unsichtbares Label für Grid-Ausrichtung
Required-Stern	.ta-formbuilder-required-indicator	Pflichtfeld-Marker

Inputs / Select / Textarea #

Bereich	CSS-Selektor	Beschreibung / Zweck
Text-Input	.ta-formbuilder-field input	Standard-Input
Textarea	.ta-formbuilder-field textarea	Mehrzeilig
Select	.ta-formbuilder-field select	Native Selects
SlimSelect	.ss-main.ta-formbuilder-select	SlimSelect Container

Checkbox / Radio #

Bereich	CSS-Selektor	Beschreibung / Zweck
Checkbox-Wrapper	.ta-formbuilder-field-checkbox	Checkbox-Feld
Checkbox	input[type=“checkbox“]	Checkbox selbst
Checkbox-Label	.ta-formbuilder-checkbox-label	Text
Radio-Wrapper	.ta-formbuilder-field-radio	Radio-Feld
Radiobutton	input[type=“radio“]	Radiobutton selbst
Radio-Label	.ta-formbuilder-radio-label	Text

Bereich	CSS-Selektor	Beschreibung / Zweck
Navigation	.ta-formbuilder-navigation	Button-Leiste
Button	.ta-formbuilder-btn	Basis
Primary	.ta-formbuilder-btn-primary	Hauptaktion
Secondary	.ta-formbuilder-btn-secondary	Zurück
Prev	.ta-formbuilder-prev-step	Zurück
Next	.ta-formbuilder-next-step	Weiter
Submit	.ta-formbuilder-submit	Absenden

Fehler / Validierung #

Bereich	CSS-Selektor	Beschreibung / Zweck
Feld-Fehler	.error	Wird per JS gesetzt
Fehlermeldung	.error-message	Container für Text
Globaler Fehler	.ta-formbuilder-general-error-message	Oben im Formular

File-Upload #

Bereich	CSS-Selektor	Beschreibung / Zweck
Upload-Input	.ta-formbuilder-file	Verstecktes Input
Upload-Button	.ta-formbuilder-upload-button	Öffnet Dialog
File-Liste	.ta-formbuilder-file-list	Datei-Übersicht
File-Item	.ta-formbuilder-file-item	Einzelne Datei
Remove	.ta-formbuilder-remove-button	Datei löschen

Captcha #

Bereich	CSS-Selektor	Beschreibung / Zweck
Captcha-Wrapper	.ta-formbuilder-captcha	Captcha-Bereich
Captcha-Bild	.ta-formbuilder-captcha-image	Bild
Reload-Button	.ta-formbuilder-reload-btn	Neu laden

Date / Time (Flatpickr) #

Bereich	CSS-Selektor	Beschreibung / Zweck
Wrapper	.ta-formbuilder-input-icon-wrapper	Icon + Input
Date	.ta-formbuilder-input-date	Datum
Datetime	.ta-formbuilder-input-datetime	Datum + Zeit
Flatpickr	.flatpickr-calendar	Kalender

Theme-Beispiel (Corporate Colors, Buttons, Inputs) #

Unten stehend ist ein Theme-Beispiel (Corporate Colors + Buttons + Inputs + Errors + Step-Dots), das direkt zum aktuellen Markup passt. Es überschreibt primär die CSS-Variablen aus der ta_forms.css und ergänzt ein paar selektive Regeln für Buttons sowie Eingaben. Dieses Theme können Sie am besten in eine eigene Datei übernehmen.

Hinweis zur CSS-Anpassung

Das hier gezeigte Theme dient als Beispiel und Ausgangsbasis. Je nach Website, CMS-Theme, globalen Styles (z. B. body, button, input) oder vorhandenen CSS-Frameworks kann das tatsächliche Rendering abweichen.

Insbesondere folgende Faktoren haben Einfluss:

globale Schriftarten, Farben oder Reset-Styles der Website
bestehende Button-, Form- oder Grid-Styles
individuelle Container-Breiten oder Layout-Vorgaben

Es kann daher erforderlich sein, einzelne Regeln anzupassen oder zu ergänzen, um das gewünschte Erscheinungsbild zu erreichen.

Kopieren

/* -------------------------------------------------------
   TecArt Forms – Theme Override (Corporate Example)
   Ziel: Farben/Typo/Inputs/Buttons/Dots/Errors anpassen
   ------------------------------------------------------- */

/* 1) Corporate Tokens: nur Variablen überschreiben */
:root {
  /* Brand */
  --ta-primary-color: #1b5cff;     /* Primary */
  --ta-primary-hover: #1246c7;     /* Hover */
  --ta-primary-active: #0e3699;    /* Active */

/* Secondary surfaces */
  --ta-secondary-color: #f4f6f8;
  --ta-secondary-hover: #e7ebf0;

/* Text / Borders */
  --ta-text-color: #1f2937;
  --ta-border-color: rgba(31, 41, 55, 0.14);

/* Errors */
  --ta-error-color: #d92d20;
  --ta-error-bg: rgba(217, 45, 32, 0.08);

/* Shadows / Radius */
  --ta-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --ta-button-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  --ta-button-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.16);
  --ta-button-shadow-active: 0 2px 6px rgba(0, 0, 0, 0.10);

/* Typography */
  --ta-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --ta-font-size-base: 16px;

/* SlimSelect (optional; falls ihr es im Theme mitziehen wollt) */
  --ss-border-radius: 10px;
  --ss-focus-color: var(--ta-primary-active);
  --ss-error-color: var(--ta-error-color);
}

/* 2) Layout: Container "card" */
[id^="ta_forms_container_"], .ta-formbuilder-opt-in {
  max-width: 920px;      /* etwas kompakter */
}

/* Optional: Step-Container optisch absetzen (wenn ihr sowas wollt) */
#ta_forms_container_theme_example .ta-formbuilder-step {
  /* nur als Beispiel – normalerweise NICHT containerId-hardcoden */
}

/* 3) Headings / Descriptions */
.ta-formbuilder-title {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.75rem 0;
  color: var(--ta-text-color);
}
.ta-formbuilder-description,
.ta-formbuilder-step-description,
.ta-formbuilder-section-description {
  color: rgba(31, 41, 55, 0.8);
}

/* 4) Inputs – modernere "focus" states */
.ta-formbuilder-field input:not([type="checkbox"]):not([type="radio"]):not(.ta-formbuilder-input-captcha),
.ta-formbuilder-field textarea,
.ta-formbuilder-field select,
.ss-main {
  border-radius: 10px;
  border: 1px solid var(--ta-border-color);
  box-shadow: none;               /* cleaner look */
  background: #fff;
  padding: 12px 12px;
}

/* Focus ring (für Inputs + SlimSelect) */
.ta-formbuilder-field input:not([type="checkbox"]):not([type="radio"]):focus,
.ta-formbuilder-field textarea:focus,
.ta-formbuilder-field select:focus,
.ss-main:focus-within {
  outline: none;
  border-color: rgba(27, 92, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(27, 92, 255, 0.12);
}

/* Labels */
.ta-formbuilder-field label {
  font-weight: 600;
  color: var(--ta-text-color);
}

/* Required indicator etwas dezenter */
.ta-formbuilder-required-indicator {
  color: var(--ta-error-color);
  margin-left: 0.25rem;
}

/* 5) Buttons – Primary/Secondary klar unterscheiden */
.ta-formbuilder-btn {
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Primary bereits über --ta-primary-color definiert; hier nur Feinschliff */
.ta-formbuilder-btn:not(.ta-formbuilder-btn-secondary) {
  background: linear-gradient(180deg, var(--ta-primary-color), var(--ta-primary-hover));
}

/* Secondary: "ghost-like" */
.ta-formbuilder-btn-secondary {
  background: transparent;
  color: var(--ta-text-color);
  border: 1px solid var(--ta-border-color);
  box-shadow: none;
}
.ta-formbuilder-btn-secondary:hover {
  background: var(--ta-secondary-color);
}

/* 6) Errors – klarer, aber nicht zu aggressiv */
.ta-formbuilder-field .error {
  background: var(--ta-error-bg);
  border-color: rgba(217, 45, 32, 0.45) !important;
}
.ta-formbuilder-field .error-message {
  color: var(--ta-error-color);
  font-size: 0.85em;
}

/* 7) Step Dots – Corporate */
.ta-form-step-indicator {
  gap: 0.6rem;
}
.ta-form-step-dot {
  width: 10px;
  height: 10px;
  background: rgba(31, 41, 55, 0.18);
  transform: none;
}
.ta-form-step-dot.active {
  background: var(--ta-primary-color);
  transform: scale(1.15);
}
/* optional: wenn ihr später "Fehler-dot" einführt */
.ta-form-step-dot.has-errors {
  background: var(--ta-error-color);
}

/* 8) Checkbox / Radio – etwas luftiger */
.ta-formbuilder-field.ta-formbuilder-field-checkbox,
.ta-formbuilder-field.ta-formbuilder-field-radio {
  gap: 0.65rem;
}
.ta-formbuilder-field input[type="checkbox"],
.ta-formbuilder-field input[type="radio"] {
  width: 20px;
  height: 20px;
}

/* 9) File Upload – Chips moderner */
.ta-formbuilder-file-item {
  border-radius: 12px;
  border: 1px solid var(--ta-border-color);
  background: #fff;
}
.ta-formbuilder-remove-button {
  font-weight: 700;
}

Add-on Benutzerdefinierte Hilfe

Add-on Buchungskalender

Add-on E-Mail senden limitieren

Add-on Formularkonfigurator

Add-on GoToMeeting

Add-on Kanban

Add-on Letzter Login

Add-on MS-Teams

Add-on Pitcom SMS Gateway

Add-on Projekte kopieren mit Abhängigkeiten

Add-on SAML Single-Sign-On

Add-on Sub-Suchfilter

Add-ons für Auswertungen

Add-ons für Rechnungen

Formulareinbindung in Ihre Website

Formularkonfigurator #

Formularkonfigurator #

Einbettungscode in die Website #

CSS-Styling und Klassenstruktur #