Mit YForm ein Kontakformular erstellen

[Darakoba]

Hallo an alle,

ich bin dabei mit YForm ein Kontaktformular zu erstellen.
Grundsätzlich klappt das auch, die komplette Adresse ist drin, das Formular wird versendet usw.
Nur jetzt möchte ich noch ein paar Checkboxen einfügen und da stimmt mit der Formatierung was nicht.
Hier ist der Code:

Code: Alles auswählen

html|checkbox_titel|<div class="kontakt_checkbox_titel">Bitte wählen Sie:</div>

checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]

html|checkbox_titel|<div class="kontakt_checkbox_txt"></div>

Hier ist ein Screenshot vom Backend wo das ganze aussieht wie gewünscht:
[ externes Bild ]

Und hier ist der Screenshot von der Webseite wo die Texte gegenüber den Checkboxen verschoben sind:
[ externes Bild ]

Hat da jemand eine Idee woran das liegt und kann mir weiterhelfen?

Danke vorab

Darakoba

[Ingo]

Das liegt am CSS deiner Seite.

[Darakoba]

Das liegt am CSS deiner Seite.

Das will ich auch gar nicht mal ausschließen. Die Frage ist nur, in welcher CSS Klasse könnte das sein?
Um dem auf die Spur zu kommen, habe ich mal den Code aus der YForm Doku eingefügt.
Noch ein Satz zu der Doku: Die ist jetzt schon sehr gut, ohne die wäre ich sicher nicht so relativ schnell, so weit gekommen. Die paar Lücken die es noch gibt, werden sicher auch noch geschlossen werden. Danke dafür!

Hier also der Code aus der Doku:

Code: Alles auswählen

checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]

Und hier der dazugehörie Quelltext. Da sieht man sehr schön was Redaxo aus den Zeilen macht:

Code: Alles auswählen

<div class="checkbox yform-element formcheckbox" id="yform-formular-name">
    <label>
        <input type="checkbox" id="yform-formular-field-10" name="FORM[formular][10]" value="1)" />
        label            </label>
</div>
<div class="checkbox yform-element formcheckbox" id="yform-formular-name">
    <label>
        <input type="checkbox" id="yform-formular-field-11" name="FORM[formular][11]" value="1)" />
        label            </label>
</div>
<div class="checkbox yform-element formcheckbox" id="yform-formular-name">
    <label>
        <input type="checkbox" id="yform-formular-field-12" name="FORM[formular][12]" value="1)" />
        label            </label>
</div>

Und hier der dazu passende Screenshot:
[ externes Bild ]


Hier nun mein abgeänderter Code:

Code: Alles auswählen

checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|anfrage_rsprofi|Kontaktaufnahme per Email|Values(0,1)|default clicked (0/1)|[no_db]

Und hier passende Quelltext dazu:

Code: Alles auswählen

<div class="checkbox yform-element formcheckbox" id="yform-formular-anfrage_rsprofi">
    <label>
        <input type="checkbox" id="yform-formular-field-10" name="FORM[formular][10]" value="1)" />
        Kontaktaufnahme per Email            </label>
</div>

<div class="checkbox yform-element formcheckbox" id="yform-formular-anfrage_rsprofi">
    <label>
        <input type="checkbox" id="yform-formular-field-11" name="FORM[formular][11]" value="1)" />
        Kontaktaufnahme per Email            </label>
</div>

<div class="checkbox yform-element formcheckbox" id="yform-formular-anfrage_rsprofi">
    <label>
        <input type="checkbox" id="yform-formular-field-12" name="FORM[formular][12]" value="1)" />
        Kontaktaufnahme per Email            </label>
</div>

Den dazu gehörigen Screenshot können wir noch in meinem ersten Beitrag weiter oben sehen.
Man sieht also, da ist von dem, ich sage mal "Originalem Code" zu meinem geänderten im Prinzip kein Unterschied.
Und vor allem habe ich an diesen ganzen CSS überhaupt keine Änderung vorgenommen.
Meine Idee war, das die "checkbox" Klasse noch ein Float benötigt:

Code: Alles auswählen

<div class="checkbox yform-element formcheckbox"

Ich habe dieser Klasse nun testweise und abwechselnd ein float: (da zerreist es alles, egal ob left oder right, geht also nicht) oder ein "margin-bottom: -10px;" gegeben. Einfluss hat das, aber es ändern sich alle Klassen mit "checkbox" auf der ganzen Seite. Es müsste eine eigene Klasse vergeben werden.

Nur wie macht man das? Dieser Code wird ja von Redaxo erzeugt.

Hat jemand eine Idee dazu? Oder eine ganz andere Idee?

Danke + Gruß

Darakoba

[Oliver.Kreischer]

Hi,

also wenn du ne CSS Frage mit Beispiel hast wäre es besser einen Link zu der Seite zu posten damit man ich genau angucken kann was du gemacht hast. So bekommst du bestimmt konkretere Hilfe.

LG
Oliver

[Darakoba]

Hallo Oliver,

danke für Deine Antwort.
Es geht hier um eine Seite für einen selbst programmierten Shop, wovon der erste Ableger schon vor 20 Jahren Online gegangen ist. Dieser Shop wird an eine ganz bestimmte Branche vermietet.
Ich weiß nicht, wie das auf meine bestehenden oder zukünftigen Kunden wirken würde, wenn die mich hier mit solchen Fragen finden. Das sieht doch stümperhaft aus, wenn jemand, der damit wirbt Erfahrung zu haben, den Text hinter den Checkboxen nicht anordnen kann, oder meinst Du nicht?
Mit einer vorhergehenden Frage war es schon mal so ähnlich, da wurde die Headergrafik nicht angezeigt. Das sieht doch nach absoluten Anfängerfragen aus, was es zum großen Teil letztlich ja auch sind.
Aber wenn man ein solches System wie Redaxo kennenlernen will, dann treten diese Fragen eben auf.
Wenn ich mal in die Lage kommen sollte Antworten auf die Fragen anderer zu geben, dann werde ich das mit Real Namen tun. Der Darakoba stellt dann Fragen und ich gebe Antworten (nur nicht auf die Fragen von Darakoba)

Deshalb versuche ich hier noch möglichst anonym aufzutreten.
Unter anderen Bedingungen hätte ich kein Problem damit meinen Real Namen mit Webseite und allem drum und dran hier darzustellen. Dann könnte ein Auftreten hier ja auch durchaus Werbung sein, keine Frage.

Ich versuche hier alles gut zu beschreiben und mit programmierten Code, mit Screenshot wie es ausschaut und mit Quelltext zu dokumentieren. Ich weiß nicht, ob man mit Link auf die Originalseite viel mehr sehen könnte.

Ich hoffe deshalb das ich hier trotzdem Unterstützung bekommen werde. Danke

Darakoba

[Oliver.Kreischer]

Hi,

alles verständlich. Vielleicht magst Du ja in de Slack Channel kommen. Ich glaube dort sind wenig Kunden und die Nachrichten werden irgendwann gelöscht

http://www.redaxo.org/slack/


LG
Oliver

[Darakoba]

Hi,
alles verständlich. Vielleicht magst Du ja in de Slack Channel kommen. Ich glaube dort sind wenig Kunden und die Nachrichten werden irgendwann gelöscht
...
LG
Oliver

Hallo Oliver,

danke für den Vorschlag.

Ich mache einen Gegenvorschlag:
Ihr habt doch bestimmt eine relativ frische Installation von Redaxo mit der Demo Version.
Füge doch da mal im Kontakt-Formular vor dem "Senden-Button" den folgenden Code ein:

Code: Alles auswählen

checkbox|name|label|Values(0,0)|default clicked (1/0)|[no_db]
checkbox|name|label|Values(1,1)|default clicked (1/1)|[no_db]
checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]
checkbox|name|label|Values(0,1)|default clicked (0/1)|[no_db]

Ich habe das eben selbst ausprobiert, dann hat man genau diesen Effekt.
Wärt Ihr so nett und würdet das mal testen und schauen woran es liegt?
Kurze Info ob "Ja" oder "Nein" wäre nett. Das Ergebnis würde mich dann natürlich auch interessieren.

Danke

Grüße Darakoba

[ceekay82]

Hallo,

du wirst irgendwo in deiner CSS-Datei eine Anweisung a la

Code: Alles auswählen

input[type="checkbox"] {
margin: 8px 0 0 0;

stehen haben. Die 8px können auch etwas mehr sein. Ebenso könnte margin-top: 8px stehen. In einer frischen Redaxo Installation sieht es absolut ok aus.

Viele Grüße
Christian

[Ingo]

...gelöscht...

[Darakoba]

Hallo,

du wirst irgendwo in deiner CSS-Datei eine Anweisung a la

Code: Alles auswählen

input[type="checkbox"] {
margin: 8px 0 0 0;

Viele Grüße
Christian

Hallo Christian,

danke für den Tipp, genau das war die Ursache.
Das folgende in der Datei forms.css in Zeile 78 hat es verursacht:

Code: Alles auswählen

input[type="radio"], input[type="checkbox"] {
    position: relative;
    top: 12px;
}

Ich hatte überall geschaut auch die input[type="checkbox"] Klasse hatte ich angeschaut.
Da war aber nichts mit top: oder marign-top oder sowas zu sehen, das hat in einer anderen CSS-Datei gestanden. Ich hätte nur in Firebug etwas nach unten scrollen müssen, dann wäre dieser Thread wohl nicht entstanden oder zumindest nicht so lang geworden.

Nochmals vielen Dank

Grüße Darakoba

[ceekay82]

Hallo Darakoba,

sehr gerne...

Viele Grüße
Christian