Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 4 von 4
  1. #1
    PostRank: 0
    Registriert seit
    03.02.2017
    Beiträge
    8

    Probleme mit Kontaktformular bei Theme "Shapely"

    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>
    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;
        }
    }
    Das Formular an sich sieht gut aus, aber es wird auf der Seite nicht zentriert dargestellt.

    Siehe hier: www.Sandra-Daniel.de

    Wie kann ich das lösen?


  2. #2
    PostRank: 0
    Registriert seit
    03.02.2017
    Beiträge
    8
    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 :\

  3. #3
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    367
    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
    nothing is so easy as it looks

  4. #4
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    367
    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!!
    nothing is so easy as it looks

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •