Support » Plugins » Contact Form 7 – Kleines Layoutproblem

  • Hey, ich konnte bisher keine Lösung zu meinem Problem finden, daher wende ich mich mal an dieses Forum.

    Ich möchte mit Contact Form 7 ein Kontaktformular erstellen, mit dem der Empfänger möglichst detaillierte Informationen im Vorfeld vom Kontaktsuchenden erhält.
    Soweit zur Theorie. In der Realität habe ich ein Problem damit, das so aussehen zu lassen, wie ich es gern hätte. Ein Dropdown Menü ist nicht erwünscht.

    Das Ganze sieht im Moment so aus:
    https://dl.dropboxusercontent.com/u/11366713/Bildschirmfoto%202015-07-30%20um%2023.24.35.png

    Der Code:

    Sie sind...* [checkbox* menu class:ueber-sie multiple "Unternehmer" "Immobilienbesitzer" "Privatperson"]
    <div class="column-full">Weitere Angaben*(mehrere möglich) [checkbox* ueber-sie-optionen multiple id:ueber-sie-optionen
    "aktiv selbstständig" "Mitarbeiter beschäftigt" "Vollstreckungsmaßnahmen eingeleitet" "Steuerschulden vorhanden" "Steuerstrafverfahren eingeleitet" "Schulden bei der Krankenkasse" "Ich bin Immobilienbesitzer" "Kredit gekündigt" "Zwangsversteigerung beantragt" "gekündigt Zwangsversteigerung" "arbeitssuchend" "Beschäftigungsverhältnis" "Kontopfändung" "Lohnpfändung" "Unterhaltsschulden"]

    Kann mir da jemand behilflich sein?
    Optimal wäre es, wenn die ganzen Optionen in 2- 3 Spalten angezeigt werden.
    Aber wie stelle ich das an?
    Über jede Hilfe bin ich sehr dankbar!

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Aber wie stelle ich das an?

    Manuell bauen, eigenes CSS nutzen
    http://contactform7.com/styling-contact-form/

    Vielleicht leistet dieses Plugin so etwas auch (du würdest allerdings die Pro-Version benötigen).
    https://wordpress.org/plugins/contact-form-7-designer/

    Gruß, Torsten

    Thread-Ersteller daniloz

    (@daniloz)

    Hi Torsten, erstmal vielen Dank für die Anregungen.

    Über CSS habe ich das bereits versucht, dafür muss man ja lediglich dem element (in meinem Fall die checkbox) eine eindeutige ID zuweisen.
    Das habe ich gemacht.
    Im Stylesheet soll man ja dann laut Contact Form 7 Docs diese ID entsprechend stylen.
    Allerdings ändert sich bei mir dadurch nichts. Ich habe testweise einfach die Farbe des Textes verändert, ohne Erfolg.

    Meine Vorgehensweise:
    Checkbox ID=ueber-sie, im stylesheet folgenden Code eingefügt:

    #ueber-sie{
    color: #f000000;
    }

    Ist die Herangehensweise richtig? Liegt das Problem ggf. beim Template?

    LG
    Danilo

    Ist die Herangehensweise richtig?

    Im Prinzip ja.

    Liegt das Problem ggf. beim Template?

    Ohne Link schwer zu sagen.

    Bei der Farbe ist ein Zeichen zu viel. Das dürfen nur 6 Zeichen sein (3x hexadezimale Angabe einer Zahl von 0 bis 255).

    #ueber-sie{
    color: #f000000;
    }

    Vielleicht liegt es daran.

    Gruß, Torsten

    Thread-Ersteller daniloz

    (@daniloz)

    Hey..Also ich bin mit meinem Latein am Ende 😀
    Ich habe es mehr oder weniger hinbekommen.
    So sieht es jetzt aus.
    https://dl.dropboxusercontent.com/u/11366713/Bildschirmfoto%202015-08-12%20um%2000.38.07.png

    Mein Formular:

    <div id="responsive-form" class="clearfix">
    <div class="form-row">
    <div class="column-half">Vor- und Nachname*[text* name placeholder "Max Mustermann"]</div>
    <div class="column-half">E-mail*[email* your-email placeholder "max@mustermann.de"]</div>
    <div class="column-half">Telefonnummer*[text* your-phone placeholder "1234567890"]</div>
    <div class="column-half">Wohnort*[text* wohnort placeholder "Ich suche eine Schuldnerberatung in..."]</div>
    <div class="form-row">
    <div class="column-half">Ich bin/war Unternehmer [checkbox menu class:ueber-sie id:ueber-sie multiple "aktiv selbstständig" "Mitarbeiter beschäftigt" "Vollstreckungsmaßnahmen eingeleitet" "Steuerschulden vorhanden" "Steuerstrafverfahren eingeleitet" "Schulden bei der Krankenkasse"] </div>
    <div class="column-half">Ich bin/war Immobilienbesitzer[checkbox ueber-sie-optionen multiple id:ueber-sie-optionen "Kredit gekündigt" "Zwangsversteigerung beantragt"]</div>
    <div class="column-half">Ich bin Privatperson [checkbox menu class:ueber-sie-optionen id:ueber-sie-optionen multiple "arbeitssuchend" "Beschäftigungsverhältnis" "Kontopfändung" "Lohnpfändung" "Unterhaltsschulden"]</div>
    <div class="column-full">Sonstiges[textarea sonstiges]</div>
    </div>
    <div class="form-row">
    <div class="column-full">Betreff [text* your-subject]</div>
    <div class="column-full">Ihre Nachricht [textarea your-message]</div>
    </div>
    <div class="form-row">
    <div class="column-full">[submit "Senden"]</div>
    </div>

    Der CSS Code:

    #responsive-form{
    	max-width:80% /*-- change this to get your desired form width --*/;
    	margin:0 auto;
            width:100%;
    }
    .form-row{
    	width: 100%;
    }
    .column-half, .column-full{
    	float: left;
    	position: relative;
    	padding: 0.65rem;
    	width:100%;
    	-webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
    }
    .clearfix:after {
    	content: "";
    	display: table;
    	clear: both;
    }
    
    /**---------------- Media query ----------------**/
    @media only screen and (min-width: 48em) {
    	.column-half{
    		width: 50%;
    	}
    }
    .wpcf7 input[type="text"], .wpcf7 input[type="email"],.wpcf7 textarea {
    	width: 100%;
    	padding: 8px;
    	border: 1px solid #ccc;
    	border-radius: 3px;
    	-webkit-box-sizing: border-box;
    	 -moz-box-sizing: border-box;
    	      box-sizing: border-box
    }
    .wpcf7 input[type="text"]:focus{
    	background: #fff;
    }
    .wpcf7-submit{
    	float: right;
    	background: #CA0002;
    	color: #fff;
    	text-transform: uppercase;
    	border: none;
    	padding: 8px 20px;
    	cursor: pointer;
    }
    .wpcf7-submit:hover{
    	background: #ff0000;
    }
    span.wpcf7-not-valid-tip{
    	text-shadow: none;
    	font-size: 12px;
    	color: #fff;
    	background: #ff0000;
    	padding: 5px;
    }
    div.wpcf7-validation-errors {
    	text-shadow: none;
    	border: transparent;
    	background: #f9cd00;
    	padding: 5px;
    	color: #9C6533;
    	text-align: center;
    	margin: 0;
    	font-size: 12px;
    }
    div.wpcf7-mail-sent-ok{
    	text-align: center;
    	text-shadow: none;
    	padding: 5px;
    	font-size: 12px;
    	background: #59a80f;
    	border-color: #59a80f;
    	color: #fff;
    	margin: 0;
    }
    #ueber-sie{
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count:2; /* Firefox */
        column-count:2;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    }
    #ueber-sie-optionen{
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px;
    }

    Wie kriege ich es hin, dass die Auswahlkästchen vor dem Text und Kasten + Text in einer Reihe angezeigt werden??

    Ich wäre über jede Hilfe sehr dankbar!

    Kannst du einen Link zu der Seite posten? Das ist dann immer einfacher, als wenn man sich das selbst zusammenbauen muss 🙂

    Thread-Ersteller daniloz

    (@daniloz)

    Natürlich, das habe ich völlig vergessen! 🙂

    http://www.danilozappala.de/arge-schuldnerberatung/kontaktform

    Im Grunde funktioniert es ja schon, allerdings sind die vielen Auswahlmöglichkeiten sehr unordentlich und meiner Meinung nach verwirrend.

    Ich bin für jede Hilfe dankbar. Auch für andere Lösungsvorschläge! 🙂
    Ein Drop-Down-Menü wäre sicherlich einfacher, allerdings ist das nicht erwünscht.

    Nimm mal aus deiner style.css diese column-count-Angaben (Zeile 5965-5967 und 5973-5975) weg und füge das hier ein:

    .wpcf7-list-item {
    	float: left;
    	width: 50%;
    }
    
    .wpcf7-list-item input[type=checkbox] {
    	width: auto;
    }

    Edit: Und diese Regel aus Zeile 58 auch einmal weg:

    span.wpcf7-list-item {
    	margin-left: 0.5em;
    }

    Edit2: Das ist dann noch nicht perfekt, aber erst mal ein Anfang.

    Edi

    (@psychosopher)

    Die Gestaltung von Formularen mit CSS ist zugegebenermassen nicht ganz einfach. Es gibt aber verschiedene nüzliche Tags dafür, etwa den Tag <label> für die Bezeichnungen der Felder:

    Label Placement on Forms

    Der Tag <span> wird nach Möglichkeit nicht gebraucht, vor allem wenn Definitionen immer wieder verwendet werden. Er macht den Code unübersichtlich und bläst ihn auf.

    Und schliesslich solltest Du das Formular so anlegen, dass es auch auf mobilen Geräten funktioniert.

    Thread-Ersteller daniloz

    (@daniloz)

    @florian Brinkmann: Tausend Dank, das hats gebracht!! 🙂
    edit: .span wpcf7-list-item finde ich in der style.css gar nicht? Aber auch mit der ersten Änderung funktioniert das Formular schon super! 🙂 Bzw im Vergleich zu vorher 😉

    @edi: Danke für den Tipp. Für mobile Geräte wollte ich es etwas anders machen. Und zwar soll ein Button/Balken durchgehend am unteren Bildschirmrand sichtbar sein. Tippt man darauf, klappt eine Sidebar auf, in der die nötigen Kontaktdaten stehen. Von dort soll man dann direkt eine E-Mail schreiben oder direkt eine Hotline anrufen können.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „Contact Form 7 – Kleines Layoutproblem“ ist für neue Antworten geschlossen.