[mobile Ansicht] Kontaktformular per CSS anpassen?

poowl

Hallo zusammen,

ich habe mir vor ein paar Tagen eine Website mit Wordpress erstellt.
Dazu habe ich das Plugin "OnePager" verwendet. Inzwischen bin ich weitestgehend zufrieden mit der Seite, so wie sie ist.

Lediglich eine Sache stört mich:
Das Kontaktformular ist in der mobilen Ansicht komplett verschoben. In der Desktopansicht sieht jedoch alles wunderbar aus.

Das Kontaktformular habe ich mit dem Plugin "Contact Form 7" erstellt.

Leider kenne ich mich mit CSS so gut wie gar nicht aus. Ein paar Kleinigkeiten habe ich darüber angepasst bekommen, aber das mit dem Kontaktformular bekomme ich leider nicht hin.

Gibt es hier jemanden der mit dabei helfen kann? Oder mir zumindest einen Tipp geben kann, wie ich das lösen kann?

Viele Grüße und einen schönen Abend,
Paul

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

Gast 100035

Hallo und willkommen im Forum.

Wenn Du dem "Gibt es hier jemanden..." dabei hilfst, indem Du (übrigens lt. Forenregel II) einen Link zur Site und weitere wesentliche Angaben zur Verfügung stellst, könnte das Erfolg haben. Die meisten besitzen keine Glaskugel o_O

poowl

Ich verwende Wordpress in der Version 5.4.2.
Als Theme is Twenty-Seventeen aktiv, wird aufgrund von OnePager aber so nicht genutzt.

Hier der Link zur Website:
https://marvellousmoments.de

Hier das Formular:

Code

<label> Dein Name*
    [text* your-name] </label>


<label> Deine E-Mail-Adresse*
    [email* your-email] </label>


<label> Betreff
    [text your-subject] </label>


<label> Deine Nachricht
    [textarea your-message] </label>


*Pflichtfeld


[submit "Senden"]

Alles anzeigen

Und hier alles, was ich bis dato als zusätzliches CSS eingefügt habe:

Code

/* Header */
#s_19116450
{
    background-size: contain;
    background-position: center;
    background-color: #FFFFFF;
}
/* Header */


/* Navbar */
a.uk-navbar-item.uk-logo {display:none!important}
/* Navbar */


/* Kontaktformular */
#s_863838330
input[type="email"]
{
    float:none;
    border-radius:0px;
    min-width:10px;
    width:260px;
    margin-right:0px;
    height:17px;
    border: 1px solid gainsboro;
}


input[type="text"]
{
    float:none;
    border-radius:0px;
    min-width:10px;
    width:305px;
    margin-right:0px;
    height:17px;
    border: 1px solid gainsboro;
}


input[type="textarea"]
{
    float:none;
    border-radius:0px;
    min-width:10px;
    width:305px;
    margin-right:0px;
    height:17px;
    border: 1px solid gainsboro;
}
/* Kontaktformular */

Alles anzeigen

Viele Grüße
Paul

SEpp55

Ergänzend zu deinen bereits gemachten CSS-Anpassungen (....) versuche mal nachfolgenden Code in die Zusätzlichen CSS:

Code

@media only screen and (max-width: 720px) {
.uk-width-1-2 {
    width: 100%;
    }
}


@media only screen and (max-width: 400px) {  
.wpcf7-form-control.wpcf7-textarea,
input[type="text"] {
    width: 96%;
}


#s_863838330 input[type="email"] {
    padding: 1px;
    width: 96%;
}
}

Alles anzeigen

Wobei die E-Mail-Adresse im Textfeld ein padding: 0 25px; hat, warum auch immer?¿ Und bei deiner Formatierung die textarea von "Deiner Nachricht breiter ist, als die anderen Felder.

Da Kontakt-Form 7 grundsätzlich gut formatiert daherkommt ist die Frage, warum deine Formatierung zerfällt (wenn man deine o.g. CSS deaktiviert) - ggf. haut das Plugin "Onepage-Bulider" dazwischen ....

poowl

Perfekt! Vielen Dank dafür!

Ja, ich vermute das Plugin Onepage-Builder haut da wirklich dazwischen.
Standardmäßig ist das Kontaktformular leider alles andere als gut formatiert - zumindest in Verbindung mit OnePager.

Mit deiner Ergänzung klappt es jetzt. Vielen Dank nochmal! :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

[mobile Ansicht] Kontaktformular per CSS anpassen?

Jetzt mitmachen!

Benutzer online in diesem Thema