So legen Sie eine Mindestlänge für Divi-Kontaktformularfelder fest

In einem bestimmten Feld, dem Eingabefeld, können Sie die Mindestzeichenlänge für das Feld im Kontaktformularmodul von Divi festlegen. Dies ist eine großartige Möglichkeit, den Inhalt des Feldes zu steuern. In diesem Beitrag erfahren Sie, wie Sie eine Mindestlänge für die Kontaktformularfelder festlegen, damit Sie genau die Informationen erhalten, die Sie benötigen. Wir werden auch einige Beispiele dafür sehen, wie es verwendet werden kann, und wir werden ein Beispiel für das Hinzufügen des Kontaktformulars zu einem Divi-Layout sehen.

Lass uns anfangen.

Vorschau

Beispiel für die Desktop-Mindestlänge für Kontaktformularfelder

Beispiel für die Mindestlänge von Telefonnummern für Kontaktformularfelder

So legen Sie eine Mindestlänge für Kontaktformularfelder fest

Öffnen Sie zunächst wie gewohnt die Einstellungen des Kontaktformulars, indem Sie mit der Maus über das Kontaktformularmodul fahren und auf das dunkelgraue Zahnradsymbol klicken.

Fügen Sie als Nächstes ein neues Feld hinzu oder öffnen Sie die Einstellungen für das Feld, das Sie einschränken möchten, indem Sie auf das Zahnradsymbol klicken. In diesem Beispiel lege ich die Mindestlänge für das Nachrichtenfeld fest.

Feldoptionen

Scrollen Sie als Nächstes nach unten zu Feldoptionen . Wählen Sie das Dropdown-Feld Typ aus, um die Optionen anzuzeigen.

Wählen Sie „Eingabefeld“ aus Ihrer Auswahl aus. Über das Eingabefeld können Benutzer Buchstaben, Zahlen oder Symbole eingeben und dies steuern.

Dadurch wird der Feldtyp geändert und eine neue Reihe von Optionen geöffnet, darunter Mindestlänge, Maximallänge und Zulässige Symbole.

Um die Mindestlänge anzupassen, geben Sie die Anzahl der Zeichen ein, die Sie als erforderliche Mindestlänge verwenden möchten. Benutzen Sie den Schieberegler oder geben Sie die Zahl in das Feld ein.

Warum eine Mindestlänge für Kontaktformularfelder festlegen?

Durch die Begrenzung der minimalen und maximalen Zeichen für das Eingabefeld können Sie sicherstellen, dass Sie die benötigten Daten erhalten. Dadurch kann verhindert werden, dass Benutzer die falsche Anzahl von Zeichen eingeben, beispielsweise bei einer Telefonnummer oder Postleitzahl, und die Menge der Informationen, die sie bereitstellen können, eingeschränkt werden usw.

Mit der Option „Zulässige Symbole“ des Eingabefelds können Sie auswählen, wie das Feld verwendet werden soll. Wählen Sie zwischen nur Buchstaben, nur Zahlen oder beidem. Mit diesen Optionen können Sie bestimmen, welche Datentypen die Benutzer in das Feld eingeben können.

Im Allgemeinen entsprechen 100 Zeichen etwa 16 Wörtern. Wenn Sie also etwa 100 Wörter wünschen, legen Sie die Mindestlänge auf 1600 fest. Der typische Absatz umfasst etwa 50 Wörter (dies variiert natürlich je nach Art des Schreibens). Wenn Sie einen typischen Textabsatz wünschen, können Sie das Minimum auf 800 Zeichen festlegen. Fordern Sie nicht zu viele Wörter auf, da dies dazu führen kann, dass Benutzer Ihr Kontaktformular abbrechen. Legen Sie das Limit so niedrig wie möglich fest, um die benötigten Informationen zu erhalten.

Beispiel für eine Postleitzahl

Wenn das Feld beispielsweise zum Abrufen einer fünfstelligen Postleitzahl verwendet wird, können Sie das Feld so einstellen, dass nur Zahlen zulässig sind, und sowohl das Minimum als auch das Maximum auf 5 begrenzen. Im folgenden Beispiel habe ich die Feld-ID und das Feld geändert Titel zur Identifizierung des Zwecks des Feldes. Ich habe sowohl die minimale als auch die maximale Länge auf 5 festgelegt. Für „Erlaubte Symbole“ habe ich „Nur Zahlen“ ausgewählt.

Benutzer können nur Zahlen eingeben; Sie sehen eine Fehlermeldung, wenn sie Buchstaben hinzugefügt haben oder die Mindest- und Höchstzeichenanzahl nicht erreicht haben.

Detailliertes Beschreibungsbeispiel

Als weiteres Beispiel: Wenn wir sicherstellen wollten, dass wir vom Benutzer eine detaillierte Beschreibung erhalten, könnten wir eine Mindestlängenbeschränkung für das Eingabefeld festlegen. Dies ist ideal für jede Art von detaillierter Information, um zu entscheiden oder die benötigte Hilfe bereitzustellen. Beispiele hierfür sind die Bereitstellung von Informationen für eine Stellenbewerbung, eine detaillierte Beschreibung der vom Benutzer gewünschten Arbeiten usw.

Wenn Sie beispielsweise Geschichten veröffentlicht haben, möchten Sie so viele Informationen wie möglich für die Einreichung der Geschichte. Legen Sie die Mindestlänge fest, um sicherzustellen, dass Sie die benötigten Details erhalten. In diesem Beispiel habe ich die Feld-ID und den Titel festgelegt, um das Feld zu beschreiben. Für die Feldoptionen habe ich die Mindestlänge auf 1000 Zeichen und die Option „Zulässige Symbole“ auf „Nur alphanumerische Zeichen“ eingestellt.

Wenn der Benutzer nicht genügend Zeichen eingibt, wird eine Fehlermeldung angezeigt, die ihm mitteilt, dass die Mindestzeichenlänge nicht erreicht wurde.

Beispiel für die Mindestlänge von Kontaktformularfeldern

Fügen wir nun ein Kontaktformular zu einem Divi-Layout hinzu. In unserem Beispiel füge ich der Landingpage des kostenlosen Device Repair Layout Packs, das in Divi verfügbar ist, ein Divi-Kontaktformularmodul hinzu. Wir ändern das Nachrichtentextfeld in ein Eingabefeld, um die Anzahl der Zeichen zu begrenzen. Dies wird Benutzer dazu ermutigen, mehr Informationen über das Problem bereitzustellen, das sie lösen müssen, anstatt unnütze Beschreibungen wie „Es wird nicht funktionieren“ zu verwenden.

Als Referenz sehen Sie sich hier den Abschnitt an, bevor Sie das Kontaktformularmodul hinzufügen. Ich werde den Button durch ein Kontaktformular ersetzen. Wie immer werde ich Designelemente aus dem Layout verwenden und das neue Modul integrieren.

Kontaktformularmodul hinzufügen

Löschen Sie zunächst das Schaltflächenmodul unter dem Titeltextmodul des Abschnitts.

Fügen Sie als Nächstes an seiner Stelle ein Kontaktformularmodul hinzu.

Feldeinstellungen

Öffnen Sie als Nächstes die Feldeinstellungen für das Nachrichtenfeld , indem Sie auf das Zahnradsymbol klicken.

Titel

Ich verwende dieselbe Feld-ID, da dies für dieses Feld sinnvoll ist. Ändern Sie den Titel in eine Nachricht, die den Benutzer über den Zweck des Feldes informiert. In diesem Fall verwende ich eine Beschreibung, die ihnen Anweisungen gibt. Da diese Beschreibung für Mobiltelefone zu lang ist, wird es eine kürzere Version geben.

• Titel (Desktop und Tablet): Beschreiben Sie das Problem ausführlich
• Titel (Telefon): Beschreiben Sie das Problem

Feldoptionen

Ändern Sie den Typ in Eingabefeld. Ich habe die Mindestlänge auf 800 festgelegt. Dadurch wird die Mindesttextmenge auf etwa einen Absatz mit 50 Wörtern festgelegt. Wir möchten den Benutzer nicht überfordern, was ausreichen sollte, um eine gute Vorstellung vom Problem zu bekommen. Als Referenz: Dieser Absatz umfasst 57 Wörter. Schließen Sie das Submodul.

• Typ: Eingabefeld
• Mindestlänge: 800

Text

Als Nächstes passen wir die Texteinstellungen auf der Registerkarte „Inhalt“ des Kontaktformularmoduls an. Ändern Sie den Text der Schaltfläche „Senden“ in „Termin vereinbaren“. Dies entspricht der Schaltfläche, die wir ersetzt haben. Wir werden diese Schaltfläche im Kontaktformular neu erstellen.

• Schaltfläche „Senden“: Termin vereinbaren

Felder

Gehen Sie als Nächstes zur Registerkarte Design . Ändern Sie für die Feldeinstellungen die Hintergrundfarbe der Felder in Weiß und die Textfarbe der Felder in Schwarz.

• Hintergrundfarbe: #ffffff
• Textfarbe: #000000

Fügen Sie als Nächstes 15 Pixel zum oberen und unteren Rand hinzu. Dadurch werden die Felder vertikal näher zusammengebracht. Fügen Sie außerdem 20 Pixel zur oberen und unteren Polsterung hinzu. Dadurch vergrößert sich die vertikale Größe der Felder. Beide Einstellungen sorgen dafür, dass die Felder des Kontaktformulars mit dem E-Mail-Opt-in-Formular in der Fußzeile übereinstimmen. Dies hat keine Auswirkungen auf das Captcha-Feld oder die Schaltfläche „Senden“, daher passen wir diese mit CSS an.

• Feldrand: 15 Pixel oben und unten
• Feldauffüllung: 20 Pixel oben und unten

Als nächstes ändern Sie die Schriftart in „Inter“, stellen die Stärke auf „Fett“, den Stil auf „TT“ und den Buchstabenabstand auf „1 Pixel“ ein. Dadurch stimmt der Text mit dem E-Mail-Formular in der Fußzeile überein.

• Schriftart: Inter
• Gewicht: Fett
• Stil: TT
• Buchstabenabstand: 1 Pixel

Captcha-Text

Scrollen Sie als Nächstes nach unten zu „Captcha-Text“ . Stellen Sie die Schriftart auf „Inter“, die Stärke auf „Fett“ und die Farbe auf „#f26440“ ein. Dies entspricht der in der Fußzeile angegebenen Telefonnummer, jedoch mit kleinerer Schriftart.

• Schriftart: Inter
• Gewicht: Fett
• Farbe: #f26440

Taste

Scrollen Sie als Nächstes nach unten zu Button und aktivieren Sie Benutzerdefinierte Stile für Button verwenden . Wir werden die Schaltfläche so gestalten, dass sie mit dem Original übereinstimmt, das wir gelöscht haben. Ändern Sie die Größe auf 14 Pixel, die Farbe auf Schwarz und die Hintergrundfarbe auf #edbf48.

• Textgröße: 14px
• Schriftfarbe: #000000
• Hintergrundfarbe: #edbf48

Stellen Sie die Randbreite und den Randradius auf 0 Pixel ein.

• Rahmenbreite: 0px
• Randradius: 0px

Ändern Sie die Schriftart in „Inter“, die Schriftstärke in „Fett“ und den Stil in „TT“.

• Schriftart: Inter
• Gewicht: Fett
• Stil: TT

Fügen Sie als Nächstes 14 Pixel zum oberen und unteren Rand und 20 Pixel zum linken und rechten Tastenabstand hinzu. Die Schaltfläche sollte jetzt genauso aussehen wie das Original.

• Polsterung: 14 Pixel oben und unten, 20 Pixel links und rechts

Größenbestimmung

Scrollen Sie als Nächstes nach unten zu „Größe“ . Ändern Sie die Breite auf 80 % und die Modulausrichtung auf Mitte. Dies verleiht dem Kontaktformular aufgrund seiner Platzierung im Layout ein natürlicheres Aussehen.

• Breite: 80 %
• Modulausrichtung: Mitte

CSS

Gehen Sie abschließend zur Registerkarte „Erweitert“ . Hier fügen wir einfaches CSS hinzu, um das Captcha-Feld und die Schaltfläche aus dem darüber liegenden Formularfeld zu entfernen. Scrollen Sie nach unten zur Schaltfläche „Kontakt“ und fügen Sie dem Feld das folgende CSS hinzu.

• Kontakt-Button:

  margin-top: 15px

Scrollen Sie abschließend nach unten zum Captcha-Feld und geben Sie das folgende CSS in das Feld ein. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.

• Captcha-Feld: margin-top: 15px

Ergebnisse

Beispiel für die Desktop-Mindestlänge für Kontaktformularfelder

Beispiel für die Mindestlänge von Telefonnummern für Kontaktformularfelder

Schlussgedanken

Hier erfahren Sie, wie Sie eine Mindestlänge für Kontaktformularfelder festlegen. Das Festlegen der minimalen und damit auch der maximalen Feldlänge ist sowohl einfach als auch vorteilhaft. Das Eingabefeld ist eine hervorragende Möglichkeit, die Anzahl der Zeichen, die der Benutzer eingeben kann, zu begrenzen oder anzugeben, um sicherzustellen, dass Sie die richtigen Informationen oder die benötigten Details aus Ihrem Kontaktformular erhalten.

Wir wollen von dir hören. Legen Sie eine Mindestlänge für Ihre Kontaktformularfelder fest? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.