Signup Form Block
tibi/form-signup renders the borrower signup flow. Editors control the thank-you messages; the frontend React app handles validation, draft storage, categories, and submission to the NLB enrollment API.
Summary
| Item | Value |
|---|---|
| Block name | tibi/form-signup |
| Editor title | Skjema: Meld deg inn |
| Category | text |
| Render root | #signup-root |
| Frontend app | packages/wordpress/themes/tibi/src/signup.tsx |
| Block source | packages/wordpress/plugins/tibi-block-library/src/form-signup/ |
Editor Usage
Use this block only on the borrower signup page. The block exposes two editable messages:
| Attribute | Purpose |
|---|---|
thankYouPageMessageNb |
Thank-you message after a successful Bokmal signup. |
thankYouPageMessageNn |
Thank-you message after a successful Nynorsk signup. |
The block itself does not expose field configuration. Signup fields, validation, categories, and endpoints are maintained in code.
Frontend Flow
The React app supports four categories:
| Category | User type |
|---|---|
adult |
Adult borrower |
youth |
Child/youth borrower |
student |
Student borrower |
institution |
Institution |
The flow stores unfinished drafts in sessionStorage under tibi_signup_form. It clears or replaces that draft as the user progresses. The UI uses shared Ariakit form components and global error summaries that scroll/focus users to the first error.
API Flow
The theme exposes window.tibiApiData.apiBaseUrl.
| Environment | API base |
|---|---|
| Production | https://api.nlb.no |
| Non-production | https://api.dev.nlb.no |
| Category | Endpoint |
|---|---|
| Adult | /v1/enrollments/adult |
| Youth/child | /v1/enrollments/child |
| Student | /v1/enrollments/student |
| Institution | /v1/enrollments/institution |
Submissions use FormData. Empty values are removed before submission. The offline PDF fallback is read from ACF options pdf_schema_nb and pdf_schema_nn and exposed as window.tibiSignupFormData.pdf_schema.
Asset Loading
The theme enqueues the signup app only when the current page contains tibi/form-signup.
Reference:
packages/wordpress/themes/tibi/inc/assets.php
QA Checklist
- Test on stage:
https://beta.tibi.no. - Confirm both Bokmal and Nynorsk thank-you messages render after success.
- Test each category: adult, youth, student, institution.
- Refresh mid-flow and confirm draft restoration works.
- Submit with missing required fields and confirm the global error summary focuses the first error.
- Confirm the API base points to the expected environment.
When To Ask A Developer
Ask a developer before changing categories, fields, validation rules, consent text behavior, endpoint paths, or the PDF fallback logic.