Hello!
Is there a way to control the layout of field groups within a front-end channel form?
I am working on a long form, so I divided form input sections in to smaller Field Groups. However, when I add the Field Group to the Channel Fields the Channel Form front-end display becomes erratic with various inputs placed throughout the form. - Inputs from different groups are displayed together out of order from both the Channel Layout and the field order within the Field Group.
This is a long form with over 250 inputs, so manually dragging and dropping fields in order in the Field Group page is cumbersome.
Your help is hugely appreciated!!
Have you considered a multi-page form approach? 250 inputs for one form submit is a lot, especially if there is error handling required. I know both Form module from eeharbor and Freeform make it easy.
For a form like that, I’d likely be using the {field:field_name} approach to handle layout in a more manual level.
Hi, yes absolutely. You can set the front end forms up pretty much anyway you want. If I were in your place, I would not use the {custom_fields} tag pair, but build it all out manually in HTML. Its quite a large chunk of work with 250 fields… So good luck! Here is a link to the docs: https://docs.expressionengine.com/latest/channels/channel-form/fields.html
Hey folks! I am kinda responding to my own question, and other’s comments here in case anyone else is looking for info on this. I hope to update more once I wrap up the project.
@bree: Yes, those are all good addons and I have used them all. This site does utilize FreeForm. We chose to use Channel Form due to the complexity of this form. Channel Form ultimately gives us the most flexibility and is easiest to manipulate with javascript / jquery all the conditional fields, nested conditional fields and changing required attributes based on user responses etc… Additionally, this form needs Save As You Go functionality with ability for users to edit, and for admins to review, change status etc… The form responses ultimately need to be displayed in various differing templates. Yes, we will use tabbed/paginated functionality (manually added with JS) to break the form down in to smaller parts.
@RobinSowell & @avori: We initially did a test build using completely manually created fields. It was a ton of work but was pretty! In the end we went back to a hybrid method using customization in the Custom Fields tag for each field type. Styling has taken a temporary hit until we get all the functionality worked out. Thanks to your & Yulya’s help on the toggle fields, this is going well!
In my opinion, the best decision we made when creating the individual fields within the CP was planning/following a naming pattern / encoding for the field short names. It is a challenge to encode with the 32 character limit while also short naming the fields with recognizable names. However the field short name patterns gave us great IDs and strings to use with conditionals, jquery functions etc… needed for proper ordering, grouping, column sizing etc…
Back to my original question above:
You cannot control the order of fields rendered by the Channel Form tag if your channel form uses more than one field group. Other than possibly by entering each field in the exact order you will finally need it and never insert a new field except at the end form.
Turns out, If your Channel Form is using only one field group, you can control the order of inputs generated in the Custom Fields loop by dragging/dropping fields up/down in the Field Group page. However there are some caveats: You can only do this successfully when your field group page is listing all your fields at the same time. If you reorder in a paginated view, or in a filtered view, all hell will break lose and the demons will come out and swallow your soul!
Hey, I was reading your response and had a thought cross my mind… Have you tried seeing if Channels Layout affect the front end forms at all if you use the custom fields tag? You can select which roles the layout applies to, so it might transfer over in the custom fields tag in channel forms.
/admin.php?/cp/channels/layouts/1 (the 1 is the ID of the channel)
Edit: Nevermind, I just re-read your first message.
Channel form, with the custom fields loop, can do anything you need! If you call the custom fields loop through an embedded template, you can pass what fields to show or require through the template, even if a field is not required in the CMS. If you need some radios to function one way, or another, you can use logic based on your naming conventions how to format or what to require etc in the custom fields loop.
@avori: Ha! Thank you for the response and looking in to this! I love channel layouts on the CP side. I found a potential option for re-ordering the fields. I have not tried this, but if you export the channel set, open the channel_set.json file, under the field_groups array, you can manually reorder the fields there and then re-import the channel set. Again, I have not tried this, but it is on the list of things to dabble with.
@bree: Yes the Custom Fields loop in Channel Form has worked really well. At the moment the entire form is in one template, but I like your comment about moving it to an embed. I will look in to that next week.
In another part of this project we display a single entry from this form in a regular channel:entries loop. It basically renders as a 2-column table with labels in one column, values in the right column and using the DataTables (JS) plugin (A great tool for working with tables). I found that putting the channel:entries loop in a partial sped up the page rendering a lot. Now I am wondering if moving the Channel Form and custom fields loop to a partial might have the same effect? Have you ever tried that? I will try these options out next week and let you know what I find.
Do you need the order of your fields to be ordered differently in different templates?? Or, just differently than they are in the database? In EE2 you could assign the field order to the field. They don’t make that easy anymore but you can, in the database, still find the field table and change the field order values manually if needed.
Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.