How to get matrix editor into frontend?

Question

I've currently setup a matrix-field for adresses. I added the field as required field to my user-group "Customer". Which breaks the registration, as a user can only be registered, when the matrix has at last one entry.

What im missing now is the possibility to add the specific input elements for one single address-block (or matrix entry) so the user has to add at last one address at registration.

When logged in and viewing the profile, the user should also be able to manage his matrix entries, so managing multiple addresses.

Is there any documentation on how to get the backend-matrix-editor into the frontend? Can anyone link me an example without copying the whole backend stuff into the frontend?

Answer 1

Getting a Matrix field working on the front-end is going to require 2 things:

1. Setting up the field inputs so the data submits correctly.
2. Some custom JavaScript to make the blocks repeat and behave how you want them to.

Here's an example of the Matrix input code you'll need on the front-end. You'll need to update all of the field handle values to fit your situation:

{# You need to include the 'type' input to identify the matrix block type you are submitting. #}
<input type="hidden" name="fields[contact][new1][type]" value="contacts">

{# You should include the 'enabled' input to specify whether the block should be enabled. #}
<input type="hidden" name="fields[contact][new1][enabled]" value="1">

{# All of your custom fields must be within a 'fields' array. #}
<input type="text" name="fields[contact][new1][fields][contactName]">
<input type="text" name="fields[contact][new1][fields][contactEmail]">
<input type="text" name="fields[contact][new1][fields][contactPhone]">

{# For new blocks, you'll want to use the naming convention 'new1', 'new2', 'new3' for each of your blocks. For existing blocks, you can update those values to be the block IDs. #}
<input type="text" name="fields[contact][new2][fields][contactName]">
<input type="text" name="fields[contact][new2][fields][contactEmail]">
<input type="text" name="fields[contact][new2][fields][contactPhone]">

As for the JavaScript, I won't give an example here, but you'll want to create a way for users to create new blocks, update the ID value appropriately using the new1 convention for new entries and the actual IDs for entries that are being edited.