Probleme mit Kontaktformular bei Theme "Shapely"

travelsandradaniel

Hallo,

ich hoffe ich bin hier richtig.

Ich nutze das Theme Shapely und habe dort auf der Homepage u.a. das Widget "Shapely Contact Section for FrontPage" aktiv.

Der Code für das Kontaktformular sieht so aus:

Code

<div class="wps-form" style="text-align:center;">
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>[text* Vorname placeholder "Vorname"]</label>
        </div>
        <div class="wps-form-column">
            <label>[text* Nachnname placeholder "Nachname"]</label>
        </div>
        <div class="wps-form-column">
            <label>[email* E-Mail placeholder "E-Mail"]</label>
        </div>
    </div>
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>[textarea Nachricht placeholder "Nachricht"]</label>
        </div>
    </div>
    <div class="wps-form-row">
        <div class="wps-form-column">
            [submit "Senden"]
        </div>
    </div>
</div>

Alles anzeigen

Im Costum CSS habe ich diesen Code:

Code

.wps-form {
    width: 100%;
    margin: 0 auto;
}
.wps-form .wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wps-form .wps-form-row .wpcf7-form-control {
    width: 100%;
}
.wps-form .wps-form-column {
    flex: 1;
    width: 100%;
    padding: .5rem 0;
}
/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) { 
    .wps-form .wps-form-row {
        flex-direction: row;
    }
    .wps-form .wps-form-column {
        padding: .5rem 1rem;
    }
}

Alles anzeigen

Das Formular an sich sieht gut aus, aber es wird auf der Seite nicht zentriert dargestellt.

Siehe hier: http://www.sandra-daniel.de

Wie kann ich das lösen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

travelsandradaniel

Ich stelle gerade fest, es gibt noch 2 andere Probleme:

1) Wenn man ins Textfeld klickt, vergrößert sich dieses...kann man das verhindern?
2) Wirklich responsive ist das Formular nicht. Die Felder werden zwar untereinander am Handy angezeigt, allerdings überlappen diese :\

SEpp55

Also ich kann beide Punkte mit Win10 & Firefox, Chrome und Edge nicht nachvollziehen.

Die Kontaktfelder haben allerdings bei hover: und focus: border-color: #745cf9; - ich würde lila dazu sagen ;-)

SEpp55

Zitat

Das Formular an sich sieht gut aus, aber es wird auf der Seite nicht zentriert dargestellt.

Links neben dem Kontaktformular ist eine Spalte

Code

.col-md-4 {
    width: 33.33333333%;
}

bereitgestellt - derzeit ohne sonstiger Verwendung!

Wenn du den Wert halbierst rückt der Kontaktblock in die Mitte - wieder getestet mit Firefox.

Änderungen wie immer im Dashboard unter Design - Customizer - Zusätzliche CSS machen!!

travelsandradaniel · Bildschirmfoto 2018-11-16 um 19.55.32.webp

Hallo,

nach langer Zeit konnte ich mich dem Ganzen mal wieder wider, habe aber auch noch immer keine Lösung.
Wie kann ich denn den Wert im Customizer unter CSS halbieren?

Zudem habe ich folgendes Problem (siehe Screenshot):

Die roten Textmeldungen werden quasi nur in der ersten Zeile des Formulars korrekt angezeigt.
An allen anderen Stellen kommt es zu Überschneidungen.

Hat jemand eine Ahnung woran das liegt und wie man das lösen kann? :(

Hier nochmal der Code vom Formular:

Code

<div class="wps-form">
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>[text* Vorname placeholder "Vorname"]</label>
        </div>
        <div class="wps-form-column">
            <label>[text* Nachnname placeholder "Nachname"]</label>
        </div>
        <div class="wps-form-column">
            <label>[email* E-Mail placeholder "E-Mail"]</label>
        </div>
    </div>
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>[textarea* Nachricht placeholder "Nachricht"]</label>
        </div>
    </div>


[acceptance zustimmung]
Ich habe die <a href="/datenschutz/">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiert.
[/acceptance]
[recaptcha]
    <div class="wps-form-row">
        <div class="wps-form-column">
            [submit "Senden"]
        </div>
    </div>
</div>

Alles anzeigen

Der Code aus dem Zustrom CSS hat sich nicht geändert siehe mein erster Post.

Wäre über jede Hilfe sehr dankbar!

Viele Grüße

SEpp55

Deine Frage:

Zitat von travelsandradaniel

Wie kann ich denn den Wert im Customizer unter CSS halbieren?

Die Antwort:

Zitat von SEpp55

Änderungen wie immer im Dashboard unter Design - Customizer - Zusätzliche CSS machen!!

Sieht in etwa so aus:

travelsandradaniel

Hallo,

super, vielen Dank! Das hat wunderbar geklappt.

Kannst du mir bei den anderen Themen auch Hilfen oder irgendjemand? :-)

SEpp55

Zitat von travelsandradaniel

Die roten Textmeldungen werden quasi nur in der ersten Zeile des Formulars korrekt angezeigt.
An allen anderen Stellen kommt es zu Überschneidungen.

Wie hast du die in das CF7-Formular eingebunden, bzw wie hast du die dort hin bekommen??

travelsandradaniel

Die roten Textmeldungen habe ich selbst gar nicht eingebunden, die kommen automatisch. Die kann man doch in dem CF7-Plugin unter "Meldungen" definieren.

Also viel mehr als die Codes, die ich gepostet habe, habe ich dann auch nicht. o_O

SEpp55

So, ich meine den Übeltäter gefunden zu haben!

Ich habe das auf meinem lokalen XAMPP-Testsystem nachgebaut, mit deinen Codes (scheint ja von hier zu kommen) -
mit dem von euch verwendetem Theme Shapely sieht das bei mir so aus

leider wie bei euch :confused:
Wechsel auf das Theme Twenty Seventeen - Überraschung:rolleyes::cool:o_O

Offensichtlich können Theme Shapely und CF7 nicht ganz miteinander.....

Ich habe nur das reCaptcha nicht eingebaut. (Damit findet mit Google im Amiland ein Datenaustausch statt, wie auch mit den Google-Fonts - DSGVO)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Probleme mit Kontaktformular bei Theme "Shapely"

Jetzt mitmachen!