Neos 9: Working with Forms

Using Neos & Flow
1

Hi, I am new in neos and wanted to ask, how to implement my own form processing in neos 9 (what is the architecture to achieve that). I couldn’t find any proper tutorial for that, only outdated examples.
For example I try to create User system (login/register), later booking system I defind my RegisterForm.yaml

'Custom.Site:Content.RegisterForm':

  superTypes:

    'Neos.Neos:Content': true

  ui:

    label: 'Register Form'

    icon: 'fa-user-plus'

    group: 'forms'

    position: 1

    help:

      message: |

        A simple registration form.

    inspector:

      tabs:

        editTab:

          label: 'Edit'

          icon: 'icon-pencil'

      groups:

        generalGroup:

          label: 'General'

          tab: 'editTab'

  properties:

    ...

RegisterForm.fusion

 prototype(Custom.Site:Content.RegisterForm) < prototype(Neos.Neos:ContentComponent) {

  debug = true

  renderer = afx`
    <div class="container py-5">
      <form method="post" action="/register" class="row g-3">
 
  <div class="col-md-6">
      <label for="firstName" class="form-label">First Name<span class="required-star">*</span></label>
      <input type="text" class="form-control" id="firstName" name="firstName" @if.debug={"required"}/>
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last Name<span class="required-star">*</span></label>
      <input type="text" class="form-control" id="lastName" name="lastName" @if.debug={"required"}/>
    </div>

    <div class="col-md-6">
      <label for="password" class="form-label">Password<span class="required-star">*</span></label>
      <input type="password" class="form-control" id="password" name="password" @if.debug={"required"}/>
    </div>
    <div class="col-md-6">
      <label for="passwordConfirm" class="form-label">Reenter Password<span class="required-star">*</span></label>
      <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" @if.debug={"required"}/>
    </div>

    <div class="col-md-6">
      <label for="gender" class="form-label">Gender<span class="required-star">*</span></label>
      <select class="form-select" id="gender" name="gender" @if.debug={"required"}>
        <option value="" selected disabled>Select gender</option>
        <option>Male</option>
        <option>Female</option>
        <option>Other</option>
      </select>
    </div>
    <div class="col-md-6">
      <label for="birthday" class="form-label">Birthday<span class="required-star">*</span></label>
      <input type="date" class="form-control" id="birthday" name="birthday" @if.debug={"required"}/>
    </div>

    <div class="col-md-6">
      <label for="phone" class="form-label">Phone</label>
      <input type="text" class="form-control" id="phone" name="phone" />
    </div>
    <div class="col-md-6">
      <label for="email" class="form-label">Email<span class="required-star">*</span></label>
      <input type="email" class="form-control" id="email" name="email" @if.debug={"required"}/>
    </div>

    <div class="col-md-6">
      <label for="address" class="form-label">Address<span class="required-star">*</span></label>
      <input type="text" class="form-control" id="address" name="address" @if.debug={"required"}/>
    </div>
    <div class="col-md-6">
      <label for="city" class="form-label">City<span class="required-star">*</span></label>
      <input type="text" class="form-control" id="city" name="city" @if.debug={"required"}/>
    </div>
    <div class="col-md-6">
      <label for="postalCode" class="form-label">Postal Code<span class="required-star">*</span></label>
      <input type="text" class="form-control" id="postalCode" name="postalCode" @if.debug={"required"}/>
    </div>
    <div class="col-md-6">
      <label for="country" class="form-label">Country<span class="required-star">*</span></label>
      <select class="form-select" id="country" name="country" @if.debug={"required"}>
        <option value="" selected disabled>Select country</option>
        <option>Germany</option>
        <option>USA</option>
        <option>Other</option>
      </select>
    </div>

    <div class="col-12 text-center">
      <button type="submit" class="btn btn-success btn-lg mt-3">Sign Up</button>
    </div>

    <div class="col-12 text-center mt-3">
      <small class="text-muted">
        <span>Already registered? </span>
        <a href="/login" class="text-success fw-bold">Log in here</a>.
      </small>
    </div>
  </form>
</div>

`
}

Do I need additional Settings.yaml configuration? I need to define Model, Controller and maybe something else needed. There are a certain paths for that, but I am lost what I need for this purpose. Thank you.

2

@Serhiy Have a look at GitHub - neos/fusion-form · GitHub

btw: you flagged your post as off-topic, but I assume that this wasn’t intentionally?!

3

@bwaidelich you can safly delete this topic, because neos cms has no built in user system (only for editors). I cannot delete it by myself.

4

If you don’t mind, I’ll rather keep this posts for others that might have the same question

Neos absolutely has a user system and you can use neos/fusion-form to create user accounts using so called Form Actions. There is none built-in for creating Neos Accounts, but you could add a custom one.

1 Like