I am trying to include multiple field groups in a frontend post form - this part is working correctly, but the fields are all on the same level and not separated by which custom field group they belong to. Ideally, I'm hoping there is a fieldset-esque way of grouping the fields in the frontend edit form based on which custom field group they came from and including a label so the user knows what custom field group they are working on.
Is there any documentation that you are following?
No documentation I could find about similar issues.
Is there a similar example that we can see?
No documentation I could find about similar issues.
Ideally, I'm hoping there is a fieldset-esque way of grouping the fields in the frontend edit form based on which custom field group they came from and including a label so the user knows what custom field group they are working on.
The fields would normally retain the order in which they appear on the backend, however if that is not the case you will need to manually drag and drop and re-arrange them on the backend.
You can also use the HTML content widget to add your section titles and other elements that you want to attach that are not standard element from the form.
With the HTML Content widget any valid html markup can be added there.
Thanks for the point about the HTML content widget, that did give us a few ideas, but let me give you an overview of what our end goal is.
The end goal is to have N many custom field groups, each representing a design component/section on the front end (hero, image slider, text block w/ image, etc), and we'll associate some subset of those field groups with a given page through taxonomy terms. So far, this has all been working (if custom field groups 1, 2, and 3 have been assigned to page X via a taxonomy term, but custom field groups 4 and 5 have not, then in the frontend edit form only fields from groups 1, 2, and 3 are shown), but the fields all render at the same level and it isn't clear which fields belong to which field group. I'm hoping there is a simple and dynamic way to wrap all fields from any given field group in some type of wrapping element and also include the custom field group's title in that wrapping element - basically, it would be great if the frontend fields from the same custom field group could render inside of a fieldset element with a label.
Does that end goal make sense? Please let me know whatever insights you might have to implement this or something similar. Thanks!
I understand what you want to achieve, however this will only be possible in one of 2 ways.
1. Using the visual builder for the form, you can re-arrange the fields in the groupings they will fall under then using the HTML content widget add a title to the section. This is with minimal coding experience.
2. This method requires that you edit the form in Expert mode. This will allow you more control over the flow of the form as your can re-arrange your field elements and then even add a wrapper div around each section so that they can be styled differently.
Essentially the expert mode will allow you to achieve your goal, the only disadvantage is that some HTML and css knowledge is required to achieve this but the possibilities in terms of design can be limitless.
To get to this end solution, we ended up creating a new post type (Design Component) and giving it a one to many relationship with the default wordpress Page post type. Then, we gave Design Components a dropdown with the slugs of our N many layouts, and inside the create/edit post form for Design Components we only showed the particular field group selected for that Design Component. Lastly, we rendered a view of all the related Design Components, along with their create/edit forms, to achieve our goal of grouped fields.
This differs a bit from our original goal of having groups within a single form as this solution will show N many instances of a form, but should work well enough as we can submit these forms through AJAX.
