Leerzeichen zwischen Text und Eingabefeld Contact7
-
Moin!
Wie kriege ich es hin, dass das ein bisschen netter aussieht. Nicht so gequetscht.Die Eingabefelder könnten zum Beispiel alle untereinander stehen…
Vielen Dank für eure Hilfe!
FusselDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Hallo,
du verwendest für das Formular das Plugin Contact Form 7.
Leider ist unklar, welche Anpassungen du beispielsweise per CSS gemacht hast. Um die Eingabefelder untereinander zu positionieren, kannst du beispielsweise eine Tabelle verwenden: Links die Bezeichnung (label), rechts die Felder.Hilfreich für eine Analyse wäre übrigens der Website-Bericht:
Du findest unter Werkzeuge > Website-Zustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Und mit z. B. STRG V in die Antwort bei diesem Thema einfügen.
Mehr Infos zum Website-Zustand findest du z. B. in dem folgenden Video
Viele Grüße
Hans-Gerd-
Diese Antwort wurde geändert vor 2 Wochen, 1 Tag von
Hans-Gerd Gerhards. Grund: Tippfehler
Moin!
Ich habe überhaupt keine Anpassungen gemacht.
So siehts aus:Dein Name [text* your-name autocomplete:name]
Deine E-Mail-Adresse [email* your-email autocomplete:email]
Betreff [text* your-subject]
Deine Nachricht [textarea your-message]
[submit „Senden“]
Hier der Bericht:
` wp-core
version: 6.7.1
site_language: de_DE
user_language: de_DE
timezone: Europe/Berlin
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: undefined
environment_type: production
user_count: 1
dotorg_communication: true wp-paths-sizes
wordpress_path: /home/sites/site100040337/web/kohlrabenrot.de
wordpress_size: 62,12 MB (65140661 bytes)
uploads_path: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/uploads
uploads_size: 48,40 MB (50752688 bytes)
themes_path: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/themes
themes_size: 23,37 MB (24500412 bytes)
plugins_path: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/plugins
plugins_size: 25,00 MB (26213077 bytes)
fonts_path: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/uploads/fonts
fonts_size: directory not found
database_size: 4,42 MB (4630275 bytes)
total_size: 163,30 MB (171237113 bytes) wp-active-theme
name: Plover (plover)
version: 1.3.1
author: WP Plover
author_website: https://wpplover.com
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates
theme_path: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/themes/plover
auto_update: Deaktiviert wp-themes-inactive (6)
eCommerce Suite: version: 1.1, author: SuperbThemesCom, Automatische Aktualisierungen deaktiviert
Solara: version: 1.0.0, author: Dezign Digital, Automatische Aktualisierungen deaktiviert
Superb eCommerce: version: 2.1, author: SuperbThemesCom, Automatische Aktualisierungen deaktiviert
Twenty Twenty-Five: version: 1.0, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
Twenty Twenty-Four: version: 1.3, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
Twenty Twenty-Three: version: 1.6, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert wp-mu-plugins (1)
Auto-update WP-Plugins and WP-Core (by manitu): version: 1.0, author: manitu wp-plugins-active (4)
Contact Form 7: version: 6.0.3, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
Honeypot for Contact Form 7: version: 2.1.7, author: WPExperts, Automatische Aktualisierungen aktiviert
manitu: Footer "gehostet von": version: 1.0.0, author: manitu, Automatische Aktualisierungen aktiviert
MetaSlider: version: 3.95.0, author: MetaSlider, Automatische Aktualisierungen aktiviert wp-plugins-inactive (2)
Akismet Anti-spam: Spam Protection: version: 5.3.5, author: Automattic - Anti-spam Team, Automatische Aktualisierungen aktiviert
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Automatische Aktualisierungen aktiviert wp-media
image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1809
imagemagick_version: ImageMagick 7.1.1-38 Q16 x86_64 22398 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 500M
upload_max_filesize: 500M
max_effective_size: 500 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 249 GB
imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
imagick::RESOURCETYPE_FILE: 49152
imagick::RESOURCETYPE_MAP: 124 GB
imagick::RESOURCETYPE_MEMORY: 62 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 0
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, ASHLAR, AVI, AVIF, AVS, BAYER, BAYERA, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUBE, CUR, CUT, DATA, DCM, DCR, DCRAW, DCX, DDS, DFONT, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FARBFELD, FAX, FF, FFF, FILE, FITS, FL32, FLV, FRACTAL, FTP, FTS, FTXT, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, HALD, HDR, HEIC, HEIF, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K25, KDC, KERNEL, LABEL, M2V, M4V, MAC, MAP, MASK, MAT, MATTE, MDC, MEF, MIFF, MKV, MNG, MONO, MOS, MOV, MP4, MPC, MPEG, MPG, MPO, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORA, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PHM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, QOI, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGB565, RGBA, RGBO, RGF, RLA, RLE, RMF, RSVG, RW2, RWL, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, SRW, STEGANO, STI, STRIMG, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TM2, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YAML, YCBCR, YCBCRA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: 10.04.0 wp-server
server_architecture: Linux 6.1.112 x86_64
httpd_software: Apache
php_version: 8.2.26 64bit
php_sapi: fpm-fcgi
max_input_variables: 5000
time_limit: 60
memory_limit: 256M
max_input_time: 240
upload_max_filesize: 500M
php_post_max_size: 500M
curl_version: 8.9.1 OpenSSL/3.3.2
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false
current: 2025-02-01T13:13:08+00:00
utc-time: Saturday, 01-Feb-25 13:13:08 UTC
server-time: 2025-02-01T14:13:07+01:00 wp-database
extension: mysqli
server_version: 10.11.10-MariaDB-log
client_version: mysqlnd 8.2.26
max_allowed_packet: 67108864
max_connections: 500 wp-constants
WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/sites/site100040337/web/kohlrabenrot.de/wp-content
WP_PLUGIN_DIR: /home/sites/site100040337/web/kohlrabenrot.de/wp-content/plugins
WP_MEMORY_LIMIT: 256M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: undefined
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined wp-filesystem
wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable
mu-plugins: writableHallo,
ok, dann teste das doch bitte mal z. B. mit einer Tabelle. Dazu musst du allerdings zumindest ansatzweise HTML-Kenntnisse haben.Bei Block Themes wie z. B. Twenty Twenty-Four kannst du aber auch über Design > Website-Editor zusätzliches CSS wie folgt eingeben.
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):Füge bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS am Ende ein und teste dann bitte, ob es dir dann besser gefällt:
.wpcf7 form input, .wpcf7 form textarea, .wpcf7 form select { display: block; /* Stellt sicher, dass die Felder untereinander stehen */ width: 100%; /* Optionale Anpassung für volle Breite */ text-align: left; /* Links ausgerichteter Text */ margin-bottom: 15px; /* Abstand zwischen den Feldern */ } /* Labels linksbündig ausrichten */ .wpcf7 form label { display: block; /* Stellt sicher, dass das Label über dem Eingabefeld steht */ text-align: left; }
Viele Grüße
Hans-GerdOh, super, jaa! Das sieht genau so aus wie ich will.
Vielen Dank für deine Hilfe!!!
super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍
-
Diese Antwort wurde geändert vor 2 Wochen, 1 Tag von
- Du musst angemeldet sein, um auf dieses Thema zu antworten.