Formular-Widget - CSS-Design ändern

Thomas W.

Hallo,

für ein Projekt setze ich das Layout "Square Responsive" ein und habe auf einer zweispaltigen Seite in einer Spalte ein Formular erstellt.

Ich möchte die Formularfelder stets mit Rahmen über die gesamte Spaltenbreite ausgefüllt haben. Egal, was ich aber an Pixelbreiten eingebe und versuche anzupassen, es werden immer die rechten Rahmen abgeschnitten, da das Formular-Widget leider nicht responsive ist.

Ich wollte dieses Problem nun ganz einfach designtechnisch lösen, indem ich das Formular-Widget kopiere und dort das CSS ändere. Dieses habe ich gemacht und im form.css des kopierten Formular-Widgets dann einfach die obere und die rechte Rahmenstärke auf 0 gesetzt. Damit ist es dann optisch egal, ob die Felder abgeschnitten werden oder nicht, da es sich um ein "offenes" Felddesign handelt.

Das funktioniert tadellos im ZETA in der Bearbeitungsansicht. Dort sieht man wunderbar die gemachten Änderungen. Alles funktioniert.

Sowie ich mir das Projekt aber in der Browser-Vorschau (egal welcher) anschaue oder auch im Live-Betrieb, werden die Änderungen am Formular-Widget form.css anscheinend nicht übernommen oder bei der Seitenerstellung von ZETA intern überschrieben und es werden wieder die Original-Eingabefelder mit abgeschnittenem, vierseitigem Rahmen dargestellt. Im ZETA ist aber nach wie vor alles zweiseitig und OK, auch !important hinter den Einträgen funktioniert leider nicht.

Es muss also noch irgendein anderes File existieren, in dem die class "zp-form" verändert werden muss oder es gibt einen Fehler bei der internen Seitenerstellung.....?

Hat da jemand eine Idee, wo ich ggf. noch was zusätzlich ändern muss?

Vielen Dank für die Hilfe.

Stefan S

Hallo,

kann man das irgendwie online im Browser sehen. Aus Ihrer Beschreibung werde ich noch nicht ganz schlau und ein Bild sagt hier mehr als 1000 Worte.

Thomas W.

Da man die ZETA-Arbeitsfläche nicht online sehen kann, habe ich jetzt mal zwei Bildschirmkopien erstellt und angefügt. Da sieht man das Problem wirklich besser als per Text-Beschreibung.

Das erste File "Formular-im Browser-und-nicht-responsive" zeigt die Darstellung im Vorschau-/Livebetrieb des Browsers. Abgeschnittene Felder rechts und eigentlich ein vierseitiger Rahmen.

Im ZETA-Arbeitsbereich, wird alles wie in der Datei "Formular-in ZETA-anderes-Design" angezeigt, da ich die form.css des Formular-Widgets entsprechend verändert habe.

Eigentlich müsste ZETA den Inhalt von der Arbeitsfläche mit dem veränderten Design umsetzen, tut das aber leider nicht, sondern stellt irgendeinen Standard bei der Umsetzung ein.

Ich hoffe, das hilft weiter?

Als Ergänzung hier noch der CSS-Code aus der neuen form.css des Formular-Widgets. Ergänzt/angepasst wurden die Angaben zu border-style/ border-color und border-width

.zp-form input.typetext, .zp-form input[type="text"], .zp-form input[type="number"], .zp-form input[type="email"], .zp-form input[type="tel"], .zp-form input[type="url"], .zp-form input[type="date"], .zp-form input[type="time"], .zp-form input[type="color"], .zp-form input[type="search"], .zp-form textarea{
font-family: inherit;
font-size: inherit;
color: #333333;
background: #ffffff;
padding: 6px 8px;
border-style: solid;
border-color: #1f8ac7;
border-width: 0px 0px 1px 1px;
max-width: 100%;
}

Stefan S

Hallo,

ich denke es wäre gut, wenn Sie das Formular bzw. das Projekt z.B. auf den voreingestellten Testserver veröffentlichen könnten, denn dann kann ich sehen, warum hier was abgeschnitten wird.

Grundsätzlich sind unsere Formulare ja schon responsive, solange nicht tiefer darin eingegriffen wird. Allerdings sind die Felder im Standard-Zustand auf eine bestimmte Breite (300px) festgelegt.

Diese Breite würde sich auch einfach über entsprechendes CSS im Projekt anpassen lassen. Dazu müssen Sie nicht das Widget kopieren und bearbeiten. Ich rate Ihnen sogar, das kopierte Widget wieder zu löschen, denn kopierte Widgets sind von Updates ausgeschlossen. Wenn wir also Fehler im Formular-Widget beheben, würden diese in Ihrem Projekt nicht zum tragen kommen, weil Sie noch die alte Version in Form des kopierten Widgets nutzen würden.

Also, wenn Sie das Formular veröffentlichen können, dann kann ich sicher besser sehen, was Sie überhaupt erreichen wollen und welches Layout Sie nutzen und Ihnen dann entsprechende Tips geben.

Stefan S

Hallo nochmal,

ich vermute, wenn Sie das kopierte Widget löschen und stattdessen einfach folgendes angepasstes CSS im Projekt nutzen, dann kommen wir schon in die Richtung, in die Sie gehen wollen:

Beenden Sie Zeta Producer und löschen Sie das kopierte Widget (bzw. verschieben Sie es auf den Desktop, damit Zeta Producer das Widget nicht mehr findet)
Starten Sie Zeta Producer
Klicken Sie im Menü Website auf "Einstellungen"
Klicken Sie auf CSS
Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"

CSS

<style>
	form.zp-form{
		width: 100%;
	}
	.zp-form input.typetext, .zp-form input[type="text"], .zp-form input[type="number"], .zp-form input[type="email"], .zp-form input[type="tel"], .zp-form input[type="url"], .zp-form input[type="date"], .zp-form input[type="time"], .zp-form input[type="color"], .zp-form input[type="search"], .zp-form textarea {
		box-sizing: border-box;
		width: 100%;

		border-style: solid;
		border-color: #1f8ac7;
		border-width: 0px 0px 1px 1px;
	}
</style>

Alles anzeigen

Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

Thomas W.

Es läuft !!!!

Super Idee, alles ins CSS der Hauptseite einzufügen. An diese Lösung habe ich einfach nicht gedacht....

Tausend Dank an das Forum für die schnelle Hilfe.

Formular-Widget - CSS-Design ändern

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?