Agent Manager
Open Editor
Workspaces
aiagencyOne

anteportas_jobportal

dotphillPhase2

dscovr_buider-ONE

dscovr_front4

dscovr_front5

dscovr_front6

dsovr_f7

Playr Design

Spline

txt_cloner

job-form-c3b60a.webflow

fwf

Playground

anteportas_jobportal
/
Reviewing Job Form Code

Thought for 19s
Initiating Task Execution

I'm now formulating the next steps to move closer to the ultimate target. I'm focusing on ensuring the actions taken align perfectly with the overall objectives.

Refining Approach to Code

I'm now zeroing in on the precise modifications needed to address the bug. I'm focusing on the code section that handles form submissions, carefully considering how to make the necessary corrections.

Adjusting Code Execution

I'm now diving into the specifics of the fetch logic, scrutinizing it to ensure everything functions as anticipated. The current focus is on refining the mechanism for form processing.

Updating Code Block

I am now carefully adjusting the selected code to align with the requirements, examining how each part functions. I'm taking a close look at the form handling section, focusing on how I can make the updates work correctly.

Implementing Form Interaction

I am now putting together the mechanism for handling form submissions, ensuring seamless interaction. I am taking care to manage the feedback to the user while data is submitted.

Finalizing Feedback Display

I'm now carefully managing the display of feedback messages, making sure users get the appropriate response. The current focus is ensuring the user clearly understands the outcome of the action.

Refining Error Handling

I'm now implementing logic to manage error conditions, specifically, ensuring the form remains disabled if submissions are successful, but re-enabling it only if errors occur. The focus is on refining the user experience.

Managing Submission Feedback

I'm now integrating logic to manage submission responses and maintain a smooth user journey. The goal is to provide clear feedback and manage button states, which is a core step for improved interaction.

Displaying User Feedback

I'm now putting in place the mechanisms to correctly display messages to the user based on the outcome of the submission, ensuring they understand whether the process succeeded or failed. I'm focusing on ensuring the form remains disabled after successful submissions and is re-enabled only after errors are received.

Edited

index.html
+35
-20
1
Updated the javascript form submission logic to prevent multiple submits, fixing the selector that was not attaching to the form correctly, and keeping the send button disabled upon successful POST.
index.html (ln 27): Also define the standard property 'appearance' for compatibility

Thought for 3s
Updating Task Documentation

I am now focused on updating the project documentation to reflect the fixed bug in the index.html file. My goal is to ensure the documentation accurately describes the updated state of the task, helping to maintain project clarity.


Thought for 1s


Edited
Task

Thought for 7s


Created
Walkthrough

Thought for 1s


Ich habe die Änderungen in der Datei 

index.html
 erfolgreich umgesetzt.

Der Fehler war zweigeteilt:

Falscher CSS-Selektor: Das Skript hat nach form[ms-code-form-no-redirect] gesucht, aber das Attribut befand sich auf dem umschließenden <div> (w-form), nicht auf dem <form>-Element. Daher hat das Skript das Formular gar nicht erst gefunden und stattdessen das Standardverhalten von Webflow ausgelöst (was doppelte Submits bei schnellem Klicken zulässt).
Fehlerhaftes State-Management: Selbst wenn das Skript funktioniert hätte, wurde der Senden-Button im .finally()-Block immer wieder aktiviert, auch wenn die Übertragung erfolgreich war.
Die folgenden Anpassungen wurden in 

index.html
 vorgenommen:

Der CSS-Selektor wurde auf [ms-code-form-no-redirect] form geändert.
Es wurde eine Variable let isSubmitting = false; eingeführt. Sobald das Formular einmal gesendet wird, wird dieser Wert auf true gesetzt, und alle weiteren Klicks auf den Button werden sofort blockiert.
event.stopImmediatePropagation() wurde hinzugefügt, um sicherzustellen, dass keine anderen Webflow-Skripte gleichzeitig versuchen, das Formular abzusenden.
Der Button wird nun bei einem erfolgreichen Senden dauerhaft deaktiviert gelassen ("Bitte warten..."). Nur falls es zu einem Netzwerkfehler kommt (catch Block), wird der Button wieder aktiviert, damit der User es erneut versuchen kann.
Ich habe alle Schritte in der Datei 
walkthrough.md
 dokumentiert. Du kannst die Seite nun in deinem Browser testen. Der Fehler sollte behoben sein und bei einem Klick auf "Senden" sollte jetzt immer nur maximal ein Workflow in Make getriggert werden.

Lass mich wissen, falls ich an dieser Stelle noch weitere Änderungen am Formular einbauen soll!

User uploaded media 1
User uploaded media 2
wieso ist der header wieder zu sehen? 

Thought for 22s
Analyzing the File Content

Now I'm focusing on parsing the document's content. I am analyzing the key information contained within the file in order to move toward the next appropriate stage of the task.

Investigating the Header's Visibility

I'm now investigating why the header is visible again, given the user's question. I am trying to understand the context of this issue. I am reviewing the HTML to assess the current implementation and determine the root cause of this change.

Examining the Interaction's Effect

I'm now focusing on how event.stopImmediatePropagation() might be affecting the Webflow interactions related to header visibility. I'm examining how this might be causing the issue. I am reviewing the HTML and JavaScript to pinpoint the cause and understand how this is happening.

Pinpointing the Root Cause

I'm now narrowing down the potential issue: I suspect the page is reloading. I'm focusing on analyzing possible causes of an unexpected reload after form submission, particularly considering the difference between the deployed version and the local version, which might result from an unhandled error during JavaScript execution that breaks the intended behavior.

Determining the Navigation's Intent

I am now focusing on determining the navigation intent after form submission. I'm investigating how the form submission is designed to work, considering the expected behavior and the presence of a "no redirect" attribute. My goal is to understand if a redirect is intended to occur.

Clarifying the Header's Presence

I'm now investigating the visual discrepancy between the two screenshots. It seems the user is observing a header that is present in one instance but not in another. I am now trying to deduce the reason for this visual inconsistency in the user's observed behavior.

Investigating the Header's State

I'm now investigating the header's visibility, exploring possible causes. I suspect an interaction might be at play, so I'm checking if my script caused an issue with Webflow's interactions. The root cause might also be due to an unexpected outcome from the form submission logic.

Deducing the Header's Behavior

I'm now focused on understanding why the header's visibility changes between the two provided screenshots. I am analyzing the user's observations, considering the possibility of layout shifts, and the specific step within the multi-step form.

Investigating Header Visibility
Added the fix for the form submission bug. Now investigating why the header is suddenly visible on the page, per the user's latest request.

Progress Updates
1
Comparing index.html with backups to find why the header is visible.

User uploaded media 1
es soll kein header zu sehen sein. ich brauch nur den inhalt im grauen bereich. das formular wird als iframe bzw. modal eingebunden

Thought for 11s
Initiating Task Execution

I'm now focused on the next step, aiming to refine the current stage. I've begun to consider how to efficiently transition to the subsequent phase of the process.

Progressing on Removal

I'm now determining the most effective approach to modify the HTML content. I'm carefully analyzing the file structure to pinpoint the exact elements that need adjustment, and I am ready to move forward.

Advancing with Modifications

I'm now carefully planning the precise modifications to the HTML structure. My focus is on completely removing the unnecessary header block to streamline the layout. I'm taking steps to minimize disruptions to any functionality that may be linked to this element.

Edited

index.html
+0
-8

Thought for <1s


Der Header (sowie der leere "hero"-Bereich darunter) war noch im HTML-Code der Seite (

index.html
) vorhanden. Ich habe diesen Block gerade komplett aus der Datei entfernt.

Auf der Seite ist jetzt nur noch der graue Bereich (das Formular selbst) sichtbar, was sich perfekt dafür eignet, die Datei als Iframe oder Modal auf der echten Website einzubinden.

Bitte lade die Datei einmal neu, der Header sollte nun komplett verschwunden sein! Lass mich wissen, wenn noch andere ungewünschte Abstände da sein sollten.

Good
Bad







index.html
sidebrain/job-form-c3b60a.webflow


<!DOCTYPE html>
<!--  This site was created in Webflow. https://webflow.com  --><!--  Last Published: Thu Mar 05 2026 22:09:00 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="67f6520a58b07dae16ddd10d" data-wf-site="67f6520958b07dae16ddd0a3" lang="en">
<head>
  <meta charset="utf-8">
  <title>AP Webapp</title>
  <meta content="Download our free Multi-step Form Webflow Cloneable Template today and start customizing it as needed."
    name="description">
  <meta content="AP Webapp" property="og:title">
  <meta content="Download our free Multi-step Form Webflow Cloneable Template today and start customizing it as needed."
    property="og:description">
  <meta content="AP Webapp" property="twitter:title">
  <meta content="Download our free Multi-step Form Webflow Cloneable Template today and start customizing it as needed."
    property="twitter:description">
  <meta property="og:type" content="website">
  <meta content="summary_large_image" name="twitter:card">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/job-form-c3b60a.webflow.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script
    type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic", "DM Sans:300,400,500,600,700"] } });</script>
  <script
    type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
  <link href="images/favicon.svg" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.svg" rel="apple-touch-icon">
  <script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
  <style>
    textarea,
    input[type="text"],
    input[type="submit"],
    input[type="password"],
    [type="email"] {
      -webkit-appearance: none;
    }
    .w-webflow-badge {
      display: none !important;
    }
  </style>
  <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
</head>
<body class="body">
  <div class="page-wrapper">
    <div class="section cloneables-listing">
      <div class="container-default w-container">
        <div data-w-id="65d5e28c-3fe7-c978-bcdd-644e6baf13e0" style="opacity:0" class="cloneable-container-default">
          <div class="multi-step-form-wrapper---brix preview-page">
            <div class="title-container---brix">
              <h2>Bewerberinfos</h2>
            </div>
            <div ms-code-form-no-redirect="" class="multi-step-form-block---brix w-form">
              <form id="wf-form-wf-form-excelForm" name="wf-form-wf-form-excelForm" data-name="wf-form-excelForm"
                action="https://hook.eu2.make.com/k9ww21q6jat7ljrfw14h8xgpq8k35k3g" method="post"
                class="multi-step-form---brix" data-wf-page-id="67f6520a58b07dae16ddd10d"
                data-wf-element-id="a8a6b1e7-2370-4f5e-33c5-db77d206a957">
                <div data-delay="4000" data-animation="slide" class="slider---brix w-slider" data-autoplay="false"
                  data-easing="ease" data-hide-arrows="true" data-disable-swipe="true" data-autoplay-limit="0"
                  data-nav-spacing="3" data-duration="500" data-infinite="false">
                  <div class="mask---brix w-slider-mask">
                    <div class="slide---brix s1 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar-wrapper--brix">
                          <div class="steps-bar---brix">
                            <div class="form-step-number---brix completed---brix">1</div>
                            <div class="form-step-progress-bar---brix">
                              <div class="form-step-progress-bar---brix current-step---brix"></div>
                            </div>
                            <div class="form-step-number---brix">2</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">3</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">4</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">5</div>
                          </div>
                          <div class="form-step-progress-bar-mobile---brix">
                            <div class="form-step-progress-bar-mobile---brix step-1---brix"></div>
                          </div>
                        </div>
                        <div class="form-content---brix">
                          <div class="step-title-wrap---brix">
                            <h3 class="step-title---brix">Kontakt Infos</h3>
                            <p class="step-paragraph---brix">Bitte trage deine Kontaktdaten ein.</p>
                          </div>
                          <div class="w-layout-grid first-step-grid---brix">
                            <div class="multi-step-form-grid-item---brix"><label for="Name-2"
                                class="multi-step-form-label">Vorname</label>
                              <div><input class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                  name="vorname" data-name="vorname" placeholder="Max" type="text" id="vorname"
                                  required=""></div>
                            </div>
                            <div class="multi-step-form-grid-item---brix"><label for="familienname"
                                class="multi-step-form-label">Nachname</label><input
                                class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                name="familienname" data-name="familienname" placeholder="Mustermann" type="text"
                                id="familienname" required=""></div>
                            <div class="multi-step-form-grid-item---brix"><label for="Phone-multistep-form-preview"
                                class="multi-step-form-label">Telefonnummer</label><input
                                class="multi-step-form-text-field phone-icon---brix w-input" maxlength="256"
                                name="Phone-Number" data-name="Phone Number" placeholder="0699 123 456 7" type="tel"
                                id="Phone-multistep-form-preview" required=""></div>
                            <div class="multi-step-form-grid-item---brix"><label for="Email-3"
                                class="multi-step-form-label">Email</label><input
                                class="multi-step-form-text-field email-icon---brix w-input" maxlength="256"
                                name="Email" data-name="Email" placeholder="mail@adresse.com" type="email" id="Email-3"
                                required=""></div>
                            <div class="multi-step-form-grid-item---brix hide"><label for="Email-4"
                                class="multi-step-form-label">Email</label>
                              <div class="w-embed"><label for="image_uploads">Choose images to upload (PNG, JPG)</label>
                                <input type="file" id="user_upload" name="user_upload" accept=".jpg, .jpeg, .png"
                                  multiple="">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="slide---brix s2 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar---brix">
                          <div class="form-step-number---brix completed---brix">1</div>
                          <div class="form-step-progress-bar---brix complete-step---brix">
                            <div class="form-step-progress-bar---brix current-step---brix"></div>
                          </div>
                          <div class="form-step-number---brix completed---brix">2</div>
                          <div class="form-step-progress-bar---brix"></div>
                          <div class="form-step-number---brix">3</div>
                          <div class="form-step-progress-bar---brix"></div>
                          <div class="form-step-number---brix">4</div>
                          <div class="form-step-progress-bar---brix"></div>
                          <div class="form-step-number---brix">5</div>
                        </div>
                        <div class="form-content---brix">
                          <div class="step-title-wrap---brix">
                            <h3 class="step-title---brix">Adresse</h3>
                            <p class="step-paragraph---brix">Bitte trage hier deine aktuelle (gemeldete) Adresse ein.
                            </p>
                          </div>
                          <div class="w-layout-grid first-1-step-grid---brix-copy">
                            <div id="w-node-_60796199-1f69-d509-30e1-8ac972b3b6b7-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label for="Name"
                                class="multi-step-form-label"><strong>Straße und Hausnummer</strong></label>
                              <div><input class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                  name="wohnanschrift" data-name="wohnanschrift" placeholder="Mustergasse 12/3"
                                  type="text" id="wohnanschrift" required=""></div>
                            </div>
                            <div class="multi-step-form-grid-item---brix"><label for="wohnort"
                                class="multi-step-form-label">Ort</label><input
                                class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                name="wohnort" data-name="wohnort" placeholder="Wien" type="text" id="wohnort"
                                required=""></div>
                            <div class="multi-step-form-grid-item---brix"><label for="plz"
                                class="multi-step-form-label">PLZ</label><input
                                class="multi-step-form-text-field phone-icon---brix w-input" maxlength="256" name="plz"
                                data-name="plz" placeholder="1020" type="text" id="plz" required=""></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="slide---brix s3 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar-wrapper--brix">
                          <div class="steps-bar---brix">
                            <div class="form-step-number---brix completed---brix">1</div>
                            <div class="form-step-progress-bar---brix complete-step---brix">
                              <div class="form-step-progress-bar---brix current-step---brix"></div>
                            </div>
                            <div class="form-step-number---brix completed---brix">2</div>
                            <div class="form-step-progress-bar---brix complete-step---brix"></div>
                            <div class="form-step-number---brix completed---brix">3</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">4</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">5</div>
                          </div>
                          <div class="form-step-progress-bar-mobile---brix">
                            <div class="form-step-progress-bar-mobile---brix step-1---brix"></div>
                          </div>
                        </div>
                        <div class="form-content---brix">
                          <div class="step-title-wrap---brix">
                            <h3 class="step-title---brix">Rechtsdaten</h3>
                            <p class="step-paragraph---brix">Bitte gib deine Daten ein.</p>
                          </div>
                          <div class="w-layout-grid first-step-grid---brix _2">
                            <div class="multi-step-form-grid-item---brix">
                              <div class="multi-step-form-grid-item---brix"><label for="geburtsdatum"
                                  class="multi-step-form-label">Geburtstag</label><input
                                  class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                  name="geburtsdatum" data-name="geburtsdatum" placeholder="TT.MM.JJJ" type="text"
                                  id="geburtsdatum" required=""></div>
                            </div>
                            <div class="multi-step-form-grid-item---brix">
                              <div class="multi-step-form-grid-item---brix"><label for="geburtsort"
                                  class="multi-step-form-label">Geburtsort</label><input
                                  class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                  name="geburtsort" data-name="geburtsort" placeholder="Geburtsort" type="text"
                                  id="geburtsort" required=""></div>
                            </div>
                            <div id="w-node-_01982348-5c15-4ab5-fa73-a11b5e1e62d6-16ddd10d"
                              class="multi-step-form-grid-item---brix">
                              <div class="multi-step-form-grid-item---brix"><label for="geschlecht"
                                  class="multi-step-form-label">Geschlecht</label><select id="geschlecht"
                                  name="geschlecht" data-name="geschlecht" required="" class="select-field w-select">
                                  <option value="Männlich">Männlich</option>
                                  <option value="Weiblich">Weiblich</option>
                                  <option value="Divers">Divers</option>
                                </select></div>
                            </div>
                            <div id="w-node-e4c99b74-9ae2-edbe-f824-f939f0186a0b-16ddd10d"
                              class="multi-step-form-grid-item---brix">
                              <div class="multi-step-form-grid-item---brix"><label for="staatsangehoerigkeit"
                                  class="multi-step-form-label">Staatsangehoerigkeit</label><input
                                  class="multi-step-form-text-field name-icon---brix w-input" maxlength="256"
                                  name="staatsangehoerigkeit" data-name="staatsangehoerigkeit" placeholder="Österreich"
                                  type="text" id="staatsangehoerigkeit" required=""></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="slide---brix s4 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar-wrapper--brix">
                          <div class="steps-bar---brix">
                            <div class="form-step-number---brix completed---brix">1</div>
                            <div class="form-step-progress-bar---brix complete-step---brix">
                              <div class="form-step-progress-bar---brix current-step---brix"></div>
                            </div>
                            <div class="form-step-number---brix completed---brix">2</div>
                            <div class="form-step-progress-bar---brix complete-step---brix"></div>
                            <div class="form-step-number---brix completed---brix">3</div>
                            <div class="form-step-progress-bar---brix complete-step---brix"></div>
                            <div class="form-step-number---brix completed---brix">4</div>
                            <div class="form-step-progress-bar---brix"></div>
                            <div class="form-step-number---brix">5</div>
                          </div>
                          <div class="form-step-progress-bar-mobile---brix">
                            <div class="form-step-progress-bar-mobile---brix step-1---brix"></div>
                          </div>
                        </div>
                        <div class="form-content---brix">
                          <div class="step-title-wrap---brix">
                            <h3 class="step-title---brix"><strong>Beschäftigungsverhältnis</strong></h3>
                            <p class="step-paragraph---brix">Mehrfachauswahl möglich</p>
                          </div>
                          <div class="w-layout-grid first-step-grid---brix uniform-space---brix _3">
                            <div id="w-node-a8a6b1e7-2370-4f5e-33c5-db77d206a998-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label
                                class="w-checkbox checkbox-item--brix center">
                                <div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox---brix"></div>
                                <input type="checkbox" name="fallweise" id="fallweise" data-name="fallweise"
                                  style="opacity:0;position:absolute;z-index:-1"><span
                                  class="multi-step-form-label no-margin---brix w-form-label"
                                  for="fallweise">Fallweise</span>
                              </label></div>
                            <div id="w-node-_4de4d8ea-26f6-516c-7c92-57be5a25e680-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label
                                class="w-checkbox checkbox-item--brix center">
                                <div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox---brix"></div>
                                <input type="checkbox" name="geringfuegig" id="geringfuegig" data-name="geringfuegig"
                                  style="opacity:0;position:absolute;z-index:-1"><span
                                  class="multi-step-form-label no-margin---brix w-form-label"
                                  for="geringfuegig">Geringfügig</span>
                              </label></div>
                            <div id="w-node-_00b701a5-2a28-462a-5df4-172907075c58-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label
                                class="w-checkbox checkbox-item--brix center">
                                <div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox---brix"></div>
                                <input type="checkbox" name="teilzeit" id="teilzeit" data-name="teilzeit"
                                  style="opacity:0;position:absolute;z-index:-1"><span
                                  class="multi-step-form-label no-margin---brix w-form-label"
                                  for="teilzeit">Teilzeit</span>
                              </label></div>
                            <div id="w-node-e6af7c07-b949-7d55-3961-92be24e27854-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label
                                class="w-checkbox checkbox-item--brix center">
                                <div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox---brix"></div>
                                <input type="checkbox" name="vollzeit" id="vollzeit" data-name="vollzeit"
                                  style="opacity:0;position:absolute;z-index:-1"><span
                                  class="multi-step-form-label no-margin---brix w-form-label"
                                  for="vollzeit">Vollzeit</span>
                              </label></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="slide---brix s5 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar---brix">
                          <div class="form-step-number---brix completed---brix">1</div>
                          <div class="form-step-progress-bar---brix complete-step---brix">
                            <div class="form-step-progress-bar---brix current-step---brix"></div>
                          </div>
                          <div class="form-step-number---brix completed---brix">2</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">3</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">4</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">5</div>
                        </div>
                        <div class="form-content---brix">
                          <div class="step-title-wrap---brix">
                            <h3 class="step-title---brix">Anhang</h3>
                            <p class="step-paragraph---brix">Schreib uns hier eine Nachricht oder lade dein
                              Motivationsschreiben direkt hoch.</p>
                          </div>
                          <div class="w-layout-grid first-1-step-grid---brix-copy">
                            <div id="w-node-_89b2ccf6-c25f-2659-f272-bcbef0639cde-16ddd10d"
                              class="multi-step-form-grid-item---brix"><label for="Name"
                                class="multi-step-form-label">Persönliche Nachricht</label>
                              <div><textarea id="nachricht-2" name="nachricht-2" maxlength="5000"
                                  data-name="Nachricht 2" placeholder="Nachricht hier eintragen"
                                  class="multi-step-form-text-field name-icon---brix small w-input"></textarea></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="slide---brix s6 w-slide">
                      <div class="slider-content-wrap---brix">
                        <div class="steps-bar---brix">
                          <div class="form-step-number---brix completed---brix">1</div>
                          <div class="form-step-progress-bar---brix complete-step---brix">
                            <div class="form-step-progress-bar---brix current-step---brix"></div>
                          </div>
                          <div class="form-step-number---brix completed---brix">2</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">3</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">4</div>
                          <div class="form-step-progress-bar---brix complete-step---brix"></div>
                          <div class="form-step-number---brix completed---brix">5</div>
                        </div>
                        <div class="form-content---brix">
                          <div class="submit-content-wrapper---brix">
                            <div class="div-block"><img sizes="(max-width: 512px) 100vw, 512px"
                                srcset="images/checked-p-500.png 500w, images/checked.png 512w" alt=""
                                src="images/checked.png" class="completed-form-illustrations---brix"></div>
                            <h3 class="step-title---brix">Daten senden</h3>
                            <p>Bitte überprüfen alle zuvor eingegebenen Informationen sorgfältig. Wenn alles korrekt
                              ist, sende deine Daten ab.</p><input type="submit" data-wait="Bitte warten..."
                              id="data_submit" class="submit-button---brix w-button" value="Senden">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="multi-step-form-button---brix left---brix preview-page w-slider-arrow-left">
                    <div>Zurück</div>
                  </div>
                  <div class="multi-step-form-button---brix right---brix preview-page w-slider-arrow-right">
                    <div>Weiter</div>
                  </div>
                  <div class="display-none w-slider-nav w-round"></div>
                </div>
              </form>
              <div class="multi-step-foirm---success-message---brix w-form-done">
                <div class="submit-content-wrapper---brix"><img src="images/checked.png" alt="" sizes="100vw"
                    srcset="images/checked-p-500.png 500w, images/checked.png 512w"
                    class="completed-form-illustrations---brix">
                  <h3 class="step-title---brix">Vielen Dank! Deine Daten sind bei uns eingegangen!</h3>
                  <p> </p>
                </div>
              </div>
              <div class="multi-step-form-error-message---brix w-form-fail">
                <div>Beim Absenden des Formulars ist etwas schiefgelaufen.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=67f6520958b07dae16ddd0a3"
    type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <script>
    // Wait for the DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function () {
      // Select all forms that are inside a wrapper with ms-code-form-no-redirect
      const forms = document.querySelectorAll('[ms-code-form-no-redirect] form');
      forms.forEach(form => {
        // Select the success and error message elements for this form
        const formWrapper = form.closest('.w-form');
        const successMessage = formWrapper.querySelector('.w-form-done');
        const errorMessage = formWrapper.querySelector('.w-form-fail');
        let isSubmitting = false;
        // Add submit event listener to the form
        form.addEventListener('submit', function (event) {
          // Prevent the default form submission and any other handlers
          event.preventDefault();
          event.stopImmediatePropagation();
          if (isSubmitting) return; // Prevent double submission
          isSubmitting = true;
          // Get the form data
          const formData = new FormData(form);
          // Get the submit button and set its text to the waiting message
          const submitButton = form.querySelector('input[type="submit"], button[type="submit"]');
          const originalButtonText = submitButton.value || submitButton.textContent;
          const waitingText = submitButton.getAttribute('data-wait') || 'Bitte warten...';
          if (submitButton) {
            if (submitButton.tagName === 'INPUT') {
              submitButton.value = waitingText;
            } else {
              submitButton.textContent = waitingText;
            }
            // Disable the submit button
            submitButton.disabled = true;
          }
          // Send the form data to the form's action URL using fetch
          fetch(form.action, {
            method: 'POST',
            body: formData
          })
            .then(response => {
              if (response.ok) {
                // If the submission was successful, show the success message
                form.style.display = 'none';
                successMessage.style.display = 'block';
                errorMessage.style.display = 'none';
                // Note: We intentionally leave the submit button disabled and isSubmitting true here.
              } else {
                // If there was an error, show the error message
                throw new Error('Form submission failed');
              }
            })
            .catch(error => {
              // If there was a network error or the submission failed, show the error message
              console.error('Error:', error);
              errorMessage.style.display = 'block';
              successMessage.style.display = 'none';
              if (submitButton) {
                // Reset the submit button text and re-enable it so the user can try again
                if (submitButton.tagName === 'INPUT') {
                  submitButton.value = originalButtonText;
                } else {
                  submitButton.textContent = originalButtonText;
                }
                submitButton.disabled = false;
              }
              isSubmitting = false; // Allow a new submission
            });
        });
      });
    });
  </script>
</body>
</html>