Erstellen eines Benutzer-Feedback-Formulars mit Svelte und Perseid

In diesem Leitfaden gehen wir Schritt für Schritt durch die Erstellung eines dynamischen Benutzer-Feedback-Formulars mithilfe der @perseid/form-Bibliothek, einer leistungsstarken Alternative zu Formly und Superforms. Sie werden sehen, wie @perseid/form die Verwaltung des Formularstatus, der Validierung und des bedingten Renderings vereinfacht. Das von uns erstellte Formular fordert Benutzer auf, einen Service zu bewerten und Feedback zu geben. Abhängig von der Bewertung wird entweder eine „Dankeschön“-Nachricht angezeigt oder der Benutzer wird aufgefordert, zusätzliches Feedback zu geben.

? Fangen wir an!

---

Schritt 1: Einrichten der Formularkonfiguration

Der erste Schritt besteht darin, die Formularkonfiguration zu definieren. Diese Konfiguration beschreibt, wie sich das Formular verhält, einschließlich der Felder, Schritte und des Flusses zwischen ihnen. Hier erstellen wir Felder für eine Bewertung und eine Rezension, mit bedingter Logik basierend auf der Bewertung des Benutzers. Wir definieren auch Nachrichten für positives und negatives Feedback.

Hier ist der Konfigurationscode:

import { type Configuration } from "@perseid/form";

const formConfiguration: Configuration = {
  // Root step-the form will start from there.
  root: "feedback",
  // Callback triggered on form submission.
  onSubmit(data) {
    alert(`Submitting the following JSON: ${JSON.stringify(data)}`);
    return Promise.resolve();
  },
  // `fields` define the data model the form is going to deal with.
  // Expect the submitted data JSON to match this schema.
  fields: {
    rating: {
      type: "integer",
      required: true,
    },
    review: {
      type: "string",
      required: true,
      // Display this field only if condition is met...
      condition: (inputs) =>
        inputs.rating !== null && (inputs.rating as number) < 3,
    },
    // Type `null` means that the value of this field will not be included in submitted data.
    submit: {
      type: "null",
      submit: true,
    },
    message_good: {
      type: "null",
    },
    message_bad: {
      type: "null",
    },
  },
  // Now that fields are defined, you can organize them in a single or multiple steps,
  // depending on the UI you want to build!
  steps: {
    feedback: {
      fields: ["rating", "review", "submit"],
      // Whether to submit the form at the end of this step.
      submit: true,
      // Next step is conditionned to previous user inputs...
      nextStep: (inputs) =>
        (inputs.rating as number) < 3 ? "thanks_bad" : "thanks_good",
    },
    thanks_good: {
      fields: ["message_good"],
    },
    thanks_bad: {
      fields: ["message_bad"],
    },
  },
};

In dieser Konfiguration:

• Das Formular beginnt mit dem Feedback-Schritt.
• Das Formular enthält zwei Felder: Bewertung (erforderlich) und Rezension (optional, es sei denn, die Bewertung liegt unter 3).
• Basierend auf der Bewertung navigiert das Formular entweder zur „guten“ oder „schlechten“ Feedback-Nachricht.
• Beim Absenden des Formulars wird eine einfache Warnung mit den übermittelten Daten ausgelöst.

Der entscheidende Punkt, den es hier zu verstehen gilt, ist die Funktion der Fields-Eigenschaft. Es definiert die Struktur der Daten, die übermittelt werden und fungiert im Wesentlichen als Datenmodell. Im Gegensatz dazu beschreibt die Schritte-Eigenschaft den Formularablauf und bestimmt, wie diese Felder dem Benutzer präsentiert werden.

---

Schritt 2: Erstellen der Svelte-Komponenten des Formulars

Da wir nun die Konfiguration haben, ist es an der Zeit, die eigentliche Benutzeroberfläche zu erstellen, die das Formular rendert. Mit @perseid/form/svelte können wir benutzerdefinierte Feldkomponenten erstellen, um Benutzerinteraktionen für jeden Teil des Formulars zu verwalten.

Hier ist die Kernkomponente von Svelte:

<!-- The actual Svelte component, used to build the UI! -->
<script lang="ts" context="module">
import type { FormFieldProps } from "@perseid/form/svelte";
</script>

<script lang="ts">
export let path: FormFieldProps['path'];
export let type: FormFieldProps['type'];
export let value: FormFieldProps['value'];
export let Field: FormFieldProps['Field'];
export let error: FormFieldProps['error'];
export let status: FormFieldProps['status'];
export let engine: FormFieldProps['engine'];
export let fields: FormFieldProps['fields'];
export let isActive: FormFieldProps['isActive'];
export let activeStep: FormFieldProps['activeStep'];
export let isRequired: FormFieldProps['isRequired'];
export let setActiveStep: FormFieldProps['setActiveStep'];
export let useSubscription: FormFieldProps['useSubscription'];

let currentRating = 0;
$: currentValue = value as number;
$: fields, isActive, activeStep, setActiveStep, useSubscription, type, error, Field, isRequired;

const setCurrentRating = (newRating: number) => {
  currentRating = newRating;
};

const handleReviewChange = (event: Event) => {
  engine.userAction({ type: "input", path, data: (event.target as HTMLTextAreaElement).value })
};
</script>

 <!-- Display a different element depending on the field... -->

{#if path === 'thanks_good.1.message_good'}
  <div class="message">
    <h1>Thanks for the feedback ?</h1>
    <p>We are glad you enjoyed!</p>
  </div>
{:else if path === 'thanks_bad.1.message_bad'}
  <div class="message">
    <h1>We're sorry to hear that ?</h1>
    <p>We'll do better next time, promise!</p>
  </div>
{:else if path === 'feedback.0.review'}
  <div class={`review ${status === "error" ? "review--error" : ""}`}>
    <label for="#review">Could you tell us more?</label>
    <textarea
      id="review"
      on:change={handleReviewChange}
    />
  </div>
{:else if path === 'feedback.0.rating'}
  <!-- Depending on the field status, define some extra classes for styling... -->
  <div
    role="button"
    tabindex="0"
    class={`rating ${status === "error" ? "rating--error" : ""}`}
    on:mouseleave={() => {
      setCurrentRating(currentValue ?? 0);
    }}
  >
    <h1>How would you rate our service?</h1>
    {#each [1, 2, 3, 4, 5] as rating (rating)}
      <span
        role="button"
        tabindex="0"
        class={`rating__star ${currentRating >= rating ? "rating__star--active" : ""}`}
        on:mouseenter={() => {
          setCurrentRating(rating);
        }}
        on:keydown={() => {}}
        on:click={() => {
          // On click, notify the form engine about new user input.
          engine.userAction({ type: "input", path, data: rating });
        }}
    ></span>
    {/each}
  </div>
{:else}
  <!-- path === 'feedback.0.submit' -->
  <button
    class="submit"
    on:click={() => {
      engine.userAction({ type: "input", path, data: true });
    }}
  >
    Submit
  </button>
{/if}

Hier verwendet die Feldkomponente die Pfadstütze, um zu entscheiden, was gerendert werden soll:

• Eine Bewertungskomponente, in der Benutzer eine Sternebewertung auswählen können.
• Ein Textbereich für Benutzer, um zusätzliches Feedback zu geben.

„Dankeschön“-Nachrichten, die basierend auf der Bewertung angezeigt werden. Das Formular passt seine Felder und Schritte basierend auf Benutzereingaben dynamisch an.

Ziemlich cool, oder?

---

Schritt 3: Ausführen der Anwendung

Da nun unsere Formularkonfiguration und -komponente fertig sind, integrieren wir sie in eine einfache Svelte-App. Hier ist der Code zum Initialisieren und Rendern des Formulars:

// Let's run the app!
// Creating Svelte root...
const container = document.querySelector("#root") as unknown as HTMLElement;
container.innerHTML = '';
new Form({
  props: {
    Field: Field,
    configuration: formConfiguration,
  },
  target: container,
});

Dieser Code mountet das Formular im DOM. Die Formularkomponente, die unsere Konfigurations- und Feldkomponente verbindet, kümmert sich um alles andere.

Schritt 4: Stile hinzufügen

Okay, wir haben unsere App-Logik, aber wenn Sie den Code jetzt ausführen, werden Sie feststellen, dass er etwas... roh ist?

Also, lasst uns das Formular aufpeppen, indem wir einige Stile und Animationen hinzufügen! Unten finden Sie ein einfaches Stylesheet, das es viel ansprechender macht:

// A few animations for fun...

@keyframes swipe-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  75% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes swipe-in-one {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes swipe-in-two {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  75% {
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}

@keyframes bubble-in {
  0% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// Some global basic styling...

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  height: 100vh;
  color: #aaaaaa;
  align-items: center;
  font-family: "Helvetica", sans-serif;
}

// And form-specific styling.

.perseid-form {
  width: 100%;
  margin: auto;

  &__steps {
    display: flex;
    overflow: hidden;
  }

  &__step {
    min-width: 100%;
    padding: 1rem 3rem;
    animation: 500ms ease-in-out forwards swipe-out;

    &__fields {
      display: grid;
      row-gap: 2rem;
    }
  }

  &__step[class*="active"]:first-child {
    animation: 500ms ease-in-out forwards swipe-in-one;
  }
  &__step[class*="active"]:last-child:not(:first-child) {
    animation: 500ms ease-in-out forwards swipe-in-two;
  }
}

.submit {
  border: none;
  cursor: pointer;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: #fefefe;
  font-size: 1.25rem;
  background: #46c0b0;
  justify-self: flex-end;
  transition: all 250ms ease-in-out;

  &:hover {
    background: #4cccbb;
  }
}

.rating {
  position: relative;
  padding: 0.25rem 0;

  &__star {
    cursor: pointer;
    display: inline-block;
    font-size: 2rem;
    min-width: 2rem;
    min-height: 2rem;

    &::after {
      content: "⚪️";
    }

    &--active {
      animation: 250ms ease-in-out forwards bubble-in;
      &::after {
        content: "?";
      }
    }
  }

  &[class*="error"] {
    &::after {
      left: 0;
      bottom: -1.5rem;
      color: #f13232;
      position: absolute;
      font-size: 0.75rem;
      content: "? This field is required";
      animation: 250ms ease-in-out forwards fade-in;
    }
  }
}

.review {
  display: grid;
  row-gap: 1rem;
  position: relative;
  animation: 250ms ease-in-out forwards fade-in;

  label {
    font-size: 1.25rem;
  }

  textarea {
    resize: none;
    min-height: 5rem;
    border-radius: 8px;
    border: 1px solid #46c0b0;
    transition: all 250ms ease-in-out;
  }

  &[class*="error"] {
    &::after {
      left: 0;
      bottom: -1.5rem;
      color: #f13232;
      position: absolute;
      font-size: 0.75rem;
      content: "? This field is required";
      animation: 250ms ease-in-out forwards fade-in;
    }
  }
}

@media screen and (min-width: 30rem) {
  .perseid-form {
    max-width: 30rem;
  }
}

Und voilà ?

---

Abschluss

Herzlichen Glückwunsch! ? Sie haben gerade mit Perseid und Svelte ein dynamisches Benutzer-Feedback-Formular erstellt.

In diesem Tutorial haben wir besprochen, wie man:

• Definieren Sie eine Formularkonfiguration mit bedingter Logik.
• Erstellen Sie benutzerdefinierte Svelte-Komponenten, um Benutzerinteraktionen zu verarbeiten.
• Rendern Sie das Formular in Ihrer App und gestalten Sie es mit Animationen und benutzerdefiniertem CSS.

Fühlen Sie sich frei, mit zusätzlichen Feldern und Schritten zu experimentieren, die zu Ihrem Anwendungsfall passen. Viel Spaß beim Erstellen toller Formen! ?

---

• ? Weitere Beispiele
• ✅ Vollständige Dokumentation
• ? Treten Sie unserem Discord bei
• ? Starten Sie das Projekt auf GitHub
• ❤️Sponsor Perseid

Das obige ist der detaillierte Inhalt vonErstellen eines Benutzer-Feedback-Formulars mit Svelte und Perseid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!