> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# dynamic content - Kontaktformulare erstellen

> Kontaktformulare mit individuellen Feldern, Empfänger-E-Mail und optionaler reCaptcha-Prüfung anlegen.

In folgendem zeigen wir Ihnen, wie Sie ein Kontaktformular erstellen können.

Kontaktformulare dienen dazu, dass Besucher Ihres Shops mit Ihnen in Kontakt treten können. Dazu können Sie die Felder, die der Besucher ausfüllen muss, von Ihnen angepasst werden.

Wenn der Besucher dann auf "Absenden" klickt, dann erhalten Sie seine Anfrage an eine E-Mail, die Sie selbst wählen können.

<Note>
  Diese Anleitung gehört zu den [Inhaltsarten](/docs/de/dynamic-content/user-guide/inhaltsarten). Wie Sie generell einen Inhalt erstellen, zeigen wir Ihnen unter [Inhalte erstellen und bearbeiten](/docs/de/dynamic-content/user-guide/inhalte-erstellen).
</Note>

<Steps>
  <Step>
    ## Schritt 1: Auswählen der Inhaltsart "Kontaktformulare"

    Wählen Sie zuerst bei der Erstellung eines Inhalts den Inhaltstyp "Kontaktformulare" aus. Schon sollte sich ein neues Fenster mit der Überschrift "Neues Kontaktformular anlegen" öffnen.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/kontaktformulare-erstellen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=cbe57c02421dc19c488e388532cb316c" alt="Auswahl der Inhaltsart Kontaktformulare" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/kontaktformulare-erstellen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/neues-kontaktformular.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=4e14626aec1cf0938646fe6739761f68" alt="Fenster Neues Kontaktformular anlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/neues-kontaktformular.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 2: Beschreibung wählen

    Wählen Sie anfangs eine Beschreibung. Diese dient nur der Übersichtlichkeit und wird nicht auf Ihrer Webseite angezeigt.

    <Frame>
      <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/beschreibung.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=84a9fdcca62157949ef991da602d657b" alt="Beschreibung des Kontaktformulars" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/beschreibung.png" />
    </Frame>
  </Step>

  <Step>
    ## Schritt 3: Absender und Betreff festlegen

    Nun legen Sie einen Absender fest. Als Absender-Name bietet es sich an, die Beschreibung bzw. den Namen des Kontaktformulars zu benutzen. Anschließend tragen Sie den Betreff für die Anfragen ein.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/absender-name-email.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=5f82b4c05f0728d1cdf41a657b508555" alt="Absender-Name und E-Mail festlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/absender-name-email.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/betreff.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=0df6c23a3237d8d6aba1b47a969a5561" alt="Betreff für das Kontaktformular festlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/betreff.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 4: Empfänger wählen und Speichern

    Daraufhin entscheiden Sie sich noch für einen Empfänger. Sie können hier sowohl einen Empfänger-Namen als auch eine Empfänger-E-Mail pflegen. Speichern Sie anschließend Ihre Eingaben.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/empfaenger-name-email.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=b2d24196a1831461f457a1cc0f9c4671" alt="Empfänger-Name und E-Mail eintragen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/empfaenger-name-email.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/speichern.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=f1d629cd53c8b3121890c2ac637a5e59" alt="Kontaktformular speichern" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/speichern.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 5: reCaptcha aktivieren

    Sie haben auch durch Setzen des Hakens in dem Feld "reCaptcha aktivieren" die Möglichkeit eine reCaptcha-Prüfung durchzuführen.

    <Info>
      ReCaptcha ist ein Captcha-Dienst, der unterscheidet, ob bestimmte Aktionen auf Ihrer Seite von einem Menschen oder einem Computer (Bot) ausgeführt werden.
    </Info>

    <Frame>
      <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/recaptcha-aktivieren.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=3061771b89e24d883517d0936ada8e5c" alt="reCaptcha-Prüfung aktivieren" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/recaptcha-aktivieren.png" />
    </Frame>
  </Step>

  <Step>
    ## Schritt 6: Formularfelder erstellen

    Nach dem Speichern sollte sich unter den allgemeinen Einstellungen ein Menü mit der Überschrift "Formularfelder verwalten" erscheinen.

    Ein neues Feld erstellen Sie, indem Sie auf das "Plus" mit dem danebenliegenden Schriftzug "Neu" klicken.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/neues-formularfeld.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=d8ebadb88807828eadb68962b8277154" alt="Neues Formularfeld erstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/neues-formularfeld.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/formularfelder-verwalten.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=58285cceba2f63df67279c58cb8ff1ed" alt="Formularfelder verwalten" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/formularfelder-verwalten.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 7: Feld-Typ festlegen

    Legen sie dort den Feld-Typ fest. Diesen wählen Sie durch Klicken auf das Drop-Down mit dem Namen "Typ".

    * Textfelder sind ganz normale Felder, in die der Benutzer einen kurzen Text eingeben kann.
    * Fließtextfelder verhalten sich wie Textfelder. Der einzige Unterschied ist, dass Benutzer dort einen langen Text eingeben können.
    * Ja/Nein-Felder sind Felder, in denen der Besucher einen Haken setzen muss.
    * Bei Optionsfeldern kann der Benutzer eine Option aus einem Drop-Down wählen.
    * Mit dem Feld "Überschriften" haben Sie die Möglichkeit einen Überschrift zu pflegen, welche dem Besucher dann angezeigt wird.
    * "Leerzeile" fügt einfach eine Leerzeile ein.
    * Bei "Titel Kollektion" würde der Name der Kollektionen angezeigt werden.
    * Mit einem Datei-Feld kann der Besucher Dateien zu seinem Anliegen hochladen.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/feldtypen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=078e5807dce2bb02b5b8a4ea8da34599" alt="Übersicht der Feld-Typen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/feldtypen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/feldtyp-textfeld.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=6bcc5c3783c031e3e112bad221507ea1" alt="Feld-Typ Textfeld auswählen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/feldtyp-textfeld.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 8: Code und Beschriftung wählen

    Als nächstes legen Sie den Code und die Beschriftung des Feldes fest. Der Feld-Code dient nur der Übersichtlichkeit und wird nicht auf der Webseite angezeigt.

    Die Beschriftung wird dann auf der Webseite direkt vor dem Feld angezeigt.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/code.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=4b5a345f761fa23c6ba68f68c17581db" alt="Feld-Code festlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/code.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/beschriftung.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=278651b8c2934cfc1e5616810ac6b8b6" alt="Beschriftung des Feldes pflegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/beschriftung.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 9: Pflichtfelder erstellen und Optionswerte wählen

    Sie haben darüber hinaus die Option ein Feld als "Pflichtfeld" zu markieren. Dadurch muss der Besucher dieses ausfüllen bzw. eine Auswahl treffen.

    Optionswerte brauchen Sie nur für den Feld-Typ "Optionsfeld" wählen.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/pflichtfeld.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=9de63c22435d504ff8f5a85d211ed474" alt="Feld als Pflichtfeld markieren" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/pflichtfeld.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/optionswerte.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=a14864065c45cac5c24a0f4c2df39353" alt="Optionswerte für ein Optionsfeld pflegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/optionswerte.png" />
        </Frame>
      </Column>
    </Columns>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/beispiel-1.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=0afeb9e073c1ed1a37c6fb59bee412ce" alt="Beispiel eines Kontaktformulars im Frontend" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/beispiel-1.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/kontaktformulare/beispiel-2.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=a9fe76eecf8d98a6447da511672b2041" alt="Weiteres Beispiel eines Kontaktformulars" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/kontaktformulare/beispiel-2.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>
</Steps>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Inhaltsarten" icon="shapes" href="/docs/de/dynamic-content/user-guide/inhaltsarten">
    Übersicht aller verfügbaren Module.
  </Card>

  <Card title="Inhalte erstellen und bearbeiten" icon="pen-to-square" href="/docs/de/dynamic-content/user-guide/inhalte-erstellen">
    Inhalte auf Seiten anlegen.
  </Card>

  <Card title="Newsletter" icon="envelope-open-text" href="/docs/de/dynamic-content/user-guide/inhaltsarten/newsletter">
    Newsletter-Anmeldungen über ein Formular einsammeln.
  </Card>
</CardGroup>
