WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 02.09.2017 13:00:28

jps77
Mitglied

mpform responsiv

Hallo, ist es möglich ein Formular mit mpform responsive zu machen?
Auf einem Mobilen Gerät (speziell Smartphones) sieht das Formular grauenhaft aus.

vielen Dank

Offline

#2 02.09.2017 13:18:07

florian
Administrator

Re: mpform responsiv

Ja.

Stelle sicher, dass im Template im Head der Meta-Tag

<meta name="viewport" content="width=device-width,initial-scale=1">

hinterlegt ist.

Lade Dir Gridism herunter (https://github.com/cobyism/gridism)
und kopiere gridism.css nach /modules/mpform.

Öffne per AFE oder FTP+Texteditor die Datei mpform/modules/frontend.css und füge dort ein

@import url("gridism.css");

Hinterlege im Backend bei den betr. mpform-Abschnitten unter Allgemeine Optionen > Layout - Feld-Schleife den Code

<div class="grid no-gutters">
<div class="unit one-third {CLASSES}">{TITLE}{REQUIRED}:</div>
<div class="unit two-thirds">{FIELD}{ERRORTEXT}</div>
</div>

und für die Fußzeile

<input type="submit" name="submit" class="mpform_submit" value="Absenden" />

Das Ergebnis ist dann in etwa so:

smartphone:
Mobile

Desktop:
Desktop

Das ist natürlich nur eine mögliche Herangehensweise. Wenn Du bereits ein Template verwendest, das ein Grid zur Verfügung stellt, kann auf Gridism verzichtet werden und der Code im Feld Layout Feld-Schleife muss dann entsprechend angepasst werden (z.B. fg3 / fg9 für fitgrid, s12 m-3 / s-12 m-9 für Responsee o.ä.)

Es sind ggf. außerdem noch weitere Anpassungen an der frontend.css erforderlich, von Haus aus sieht mpform mit diesen grau unterlegten Feldern ja eher garstig aus.

Beitrag geändert von florian (02.09.2017 13:37:40)


Code allein macht nicht glücklich. Jetzt spenden!

Online

Liked by:

jps77, mrbaseman, andreas10

#3 02.09.2017 20:26:22

jps77
Mitglied

Re: mpform responsiv

Vielen Dank Florian,

jetzt hat das ganze auch Mobil ein Gesicht  thumb_up

Offline

Liked by:

florian, andreas10

#4 02.09.2017 20:30:05

florian
Administrator

Re: mpform responsiv

Schön!
Wenn Du magst Link => Rubrik "Läuft bei uns"


Code allein macht nicht glücklich. Jetzt spenden!

Online

#5 14.10.2019 16:11:05

Slugger
Mitglied

Re: mpform responsiv

Sehr schön  smile
Habe das Mal eingebaut.

Habe aber noch ein paar Schönheitsfehler.
Wie kann man das beheben?

http://rhein-main-spitze.com/pages/ticketsystem.php

Nachtrag:
Habe hier noch ein Hinweis gefunden, dem gehe ich Mal nach.
https://forum.wbce.org/viewtopic.php?pid=10552#p10552

Beitrag geändert von Slugger (14.10.2019 16:31:13)


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

Online

#6 22.05.2020 15:03:45

her-ha
Mitglied

Re: mpform responsiv

Hallo,
ich möchte ebenfalls mpform  responsive machen. Habe das mal mit "gridism.css" ausprobiert. Das haut mir jedoch alles durcheiander,

Ich verwende als Template fragstan und soweit ich weiß,  stellt dies ein Grid zur Verfügung. Mir ist jedoch nicht ganz klar, wie ich dann den  Code im Feld Layout Feld-Schleife anpassen muß.

Im voraus bedanke ich für eure Unterstützung
Gruß her-ha

Offline

#7 22.05.2020 19:49:49

bernd
Developer

Re: mpform responsiv

Fragstan bringt von Haus aus kein Grid-System mit.
Die Anleitung von Florian aus #2 funktioniert jedoch einwandfrei mit Fragstan.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#8 22.05.2020 20:41:54

her-ha
Mitglied

Re: mpform responsiv

Danke Bernd für Deine Mitteilung,

ich bin davon ausgegangen, dass Fragstan evtl. grid-system verwendet, da in der Original " index.php" folgendes in Zeile 7-8 steht:

<?php
if(!defined('WB_URL')) {
	header('Location: ../index.php');
	exit(0);
}

$usegrid = 4;
$usegrid = 3;

Ich werde es jedoch nochmals probieren wie von Florian angegeben und auch ins Template von Fragastan das Meta-Tag einfügen. Vielleicht habe ich da was verkehrt gemacht.

Gruß her-ha

Offline

#9 22.05.2020 20:53:40

bernd
Developer

Re: mpform responsiv

Diese "usegrid" Geschichte im Fragstan dient wohl einer groben Aufteilung im Template.
Das ist jedoch kein Gridsystem im eigentlichen Sinne das dir bei deiner Aufgabenstellung weiterhilft.

Der Meta-Tag ist schon drin, so Zeile 46 rum.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#10 22.05.2020 22:21:51

her-ha
Mitglied

Re: mpform responsiv

Ich habe das Formular so eingerichtet, wie Florian geschrieben hat.
Soweit hat es funktioniert, nur mit den Überschriften und der Textarea hat es nicht geklappt. (Siehe Bild)

Die Überschriften sind alle an der falschen Stelle.

Offline

#11 22.05.2020 22:24:27

her-ha
Mitglied

Re: mpform responsiv

So sollte es eigentlich aussehen. Siehe Bild

Offline

#12 23.05.2020 06:16:38

florian
Administrator

Re: mpform responsiv

Bei den Überschriften im Feld "Template" das hier hinterlegen:

<div class="grid no-gutters">
<div class="unit whole"><h3>{TITLE}{FIELD}</h3>
</div></div>

Bei der textarea weiß ich jetzt so auf Anhieb nicht, weshalb die nicht responsiv ist. Eventuell ist irgendwo anders dafür eine fixe Breite hinterlegt, Mal mit der Maus darauf zeigen, dann mit rechte Maustaste anklicken, Element untersuchen wählen und schauen, welche Styles darauf angewendet werden.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#13 23.05.2020 11:47:03

her-ha
Mitglied

Re: mpform responsiv

Danke Florian,
werde es ausprobieren. Habe aber auch schon eine andere Lösung gefunden. Werde dies in einem weiteren Beitrag erklären.

Was die "textarea" betrifft, habe ich eine Lösung gefunden. Und zwar habe ich in der "frontend.css" etwa bei Zeile 124 nach:

.mpform_field {
    width:100%;
    background-color:#ffffff;
    padding:6px;
}

noch folgendes dazu eingefügt:

.mpform_textarea{
    width:100%;
    background-color:#ffffff;
    padding:6px;
}

Funktioniert bei mir ohne Probleme.
Gruß her-ha

Offline

Fußzeile des Forums

up