Kontaktformular anpassen in der DAWN Theme

[JoachimSchmidt]

Hallo,

wie kann ich das Formular ändern.

Ich brauch dafür das page contact liquid.

wo finde ich das denn?

Viele Grüße

Baudi

[Gabe]

Hey Baudi! @JoachimSchmidt

Danke für die Bilder und du musstest ansonsten in deinen page.contact.json Code reinsteigen und da den Code bearbeiten. Einfach die neueste Version des Codes mit der Original Version vergleichen (das kannst du mit dem diffchecker.com Tool machen).

Das Kontaktformular ist natürlich eine tolle Opportunity mehrere Kästchen zusätzlich zum Kontrollkästchen einzucoden, wie z. B. ein “Anrede” oder Telefonnr. Kästchen usw. Du kannst jeder Seite über den Abschnitt Kontaktformular ein Kontaktformular hinzufügen je nach Theme dass du verwendest. Und wie sieht es mit deiner Kundenkonto-Anmeldeform aus? Mehr dazu weiter unten.

Aber das folgende sollte man zuerst in einer Theme Kopie machen und nicht im Live Theme. Die Kontaktseite ist eine Vorlage, die du im Theme-Editor anpassen kannst. Du kannst deiner Kontakt Seitenvorlage Abschnitte hinzufügen, um zusätzliche Informationen einzubeziehen, z. B. vorgestellte Kategorien, Blog-Beiträge oder Bilder.

Es gibt letztendlich zwei Formulare im Shop die hier wichtig sind und die ich unten erläutern werde: die Kontaktform und die Kunden Anmeldeform.

Du kannst die Kontaktform mit dem Liquid form tag und dem dazugehörigen Parameter 'contact'. Innerhalb des Formulars kannst du zwei verschiedene Eingabetypen einfügen:

• Erforderliche Kästchen (“required”)
• Optionale Kästchen

Im Folgenden siehst du ein Beispiel für ein Kontaktformular mit den beiden oben genannten Eingabearten:

{% form 'contact' %}
  {{ form.errors | default_errors }}

  <div class="first-name">
    <label for="first-name">First name</label>
    <input type="text" name="contact[first_name]" id="first-name" />
  </div>

  <div class="last-name">
    <label for="last-name">Last name</label>
    <input type="text" name="contact[last_name]" id="last-name" />
  </div>

  <div class="phone">
    <label for="phone">Phone</label>
    <input type="tel" name="contact[phone]" id="phone" />
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]" id="email" />
  </div>

  <div class="order-number">
    <label for="order-number">Order number</label>
    <input type="text" name="contact[order_number]" id="order-number" />
  </div>

  <div class="message">
    <label for="message">Message</label>
    <textarea name="contact[body]" id="message"></textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Create" />
  </div>
{% endform %}

Ein weiteres Beispiel für ein Kontaktformular findest du in Dawn’s implementation.

Die folgenden Eingaben sind erforderlich, damit das Formular erfolgreich abgeschickt werden kann:

nput	type	name
Email	email	contact[email]
Message	text or textarea	contact[body]

Die optionale Eingabekästchen können jeglichen HTML input typ sein. Die müssen nur einen name="contact[information_id]" Attribut haben, wo information_id kurz die Informationen identifiziert, die du sammelst. Diese Titel erscheinen in den Kontaktbenachrichtigungen und müssen innerhalb des Formulars eindeutig sein.

Vom Typ “Dropdown”:

<div class="request-type">
  <label for="request-type">What is this regarding?</label>
  <select id="request-type" name="contact[request_type]">
    <option>Returns</option>
    <option>Shipping</option>
    <option>Custom order</option>
    <option>Other</option>
  </select>
</div>

Vom Typ “Radio Buttons”:

<div class="contact-method">
  <label for="contact-method">How do you want us to contact you?</label>
  <input type="radio" name="contact[contact_method]" value="email" id="email"><label for="email">Email</label><br>
  <input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="phone">Phone</label><br>
  <input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="text">Text message</label>
</div>

Vom Typ “Checkbox”:

Um Mehrfachauswahlen zu akzeptieren, muss jede Eingabe in einer Checkbox-Gruppe einen eindeutigen Namenswert haben. Wenn du nicht für jede Eingabe einen eindeutigen Namenswert verwendest, gibt das Formular nur den letzten Wert zurück, der ausgewählt wurde:

<div class="contact-time">
  <label for="contact-time">When is the best time to reach you?</label>
  <input type="checkbox" name="contact[contact_time_1]" value="morning"><label for="morning">Morning</label><br>
  <input type="checkbox" name="contact[contact_time_2]" value="afternoon"><label for="afternoon">Afternoon</label><br>
  <input type="checkbox" name="contact[contact_time_3]" value="evening"><label for="evening">Evening</label>
</div>

Kunden Anmeldeformular

Hier ein paar Schritte wie du das einprogrammieren kannst je nach Theme:

1. Gehe zu Online Store > Themes.
2. Im Test Theme klicke Aktionen > Edit code.
3. In den Templates, klicke customers/register.liquid.
4. Suche nach den folgenden Tags im Code:{% form 'create_customer' %} und {% endform %}
5. Den folgenden Code da einbauen an der korrekten Stelle unterhalb den Kästchen:
   1. <input type="checkbox"value="" required/> Ich habe die Nutzungsbedingungen und die Datenschutzrichtlinie gelesen und stimme ihnen zu.
6. Klicke Speichern.

Weiteres dazu:

Das Kundenregistrierungsformular kann mit dem Liquid-Formular-Tag und dem dazugehörigen Parameter “create_customer” hinzugefügt werden. Innerhalb des Formular-Tag-Blocks musst du Folgendes einfügen:

Input	type	name
First name	text	customer[first_name]
Last name	text	customer[last_name]
Email	email	customer[email]
Password	password	customer[password]

Beispiel:

{% form 'create_customer' %}
  {{ form.errors | default_errors }}

  <div class="first-name">
    <label for="first-name">First name</label>
    <input type="text" name="customer[first_name]">
  </div>

  <div class="last-name">
    <label for="last-name">Last name</label>
    <input type="text" name="customer[last_name]">
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]">
  </div>

  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="customer[password]">
  </div>

  <div class="submit">
    <input type="submit" value="Create">
  </div>
{% endform %}

Weitere Felder können wie folgt eingebaut werden - siehe unten auch das “Checkbox” Code wo du den HTML Tag “required” noch dazu ergänzen müsstest:

{% form 'create_customer' %}
  {{ form.errors | default_errors }}

  <div class="first-name">
    <label for="first-name">First name</label>
    <input type="text" name="customer[first_name]" />
  </div>

  <div class="last-name">
    <label for="last-name">Last name</label>
    <input type="text" name="customer[last_name]" />
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]" />
  </div>

  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="customer[password]" />
  </div>

  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="customer[password]" />
  </div>

  <div class="accepts-marketing">
    <input type="hidden" name="customer[accepts_marketing]" value="false" />

    <input type="checkbox" name="customer[accepts_marketing]" />
    <label for="accepts-marketing">Subscribe to email marketing</label>
  </div>

  <div class="submit">
    <input type="submit" value="Create" />
  </div>
{% endform %}

Dann wenn du mit der Vorlage Kunden/Register arbeitest, solltest du dich mit der Weiterleitung von Kunden bei der Kontoerstellung vertraut machen.

Wenn ein Kunde ein Konto anlegt, wird er standardmäßig auf die Seite home page geleitet. Du kannst jedoch eine Seite angeben, zu der die Kunden geleitet werden sollen, indem du den return_to Parameter des Liquid form tag verwendest.

Das folgende Beispiel leitet die Kunden auf die Seite mit allen Produkten:

{% form 'create_customer', return_to: routes.all_products_collection_url %}
  <!-- form content -->
{% endform %}

Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community. Lass auch wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

[planetpara]

Das ist ein Super Beitrag!!

Jetzt hab ich das angewendet und ein Formular erstellt. Leider habe ich keinen Schimmer wie ich die Formatierung bewältigen kann.

Alle Felder und Lables werden einfach links angeordnet ohne Abstände oder Formatierungen.

Hast Du einen Hinweis wo ich eine Anleitung finden kann?