[Resolved] Conditional Frontend Form Field Labels

[Author]

Posts

[cynthiaC]

Tell us what you are trying to do?
I am creating a frontend form for users to record their sources with fields for author, title, publisher, etc. There are more than 100 source types and each source type requires slightly different treatment regarding which of about 20 different fields to use. I am able to show/hide the fields for each source type by placing each field in a Conditional Group block. My problem: I need to change the field label based on the context. For example, "Author/Editor/Compiler" is correct for a book, but the same field should be labeled "Interviewer" when the source is an audio file/transcript. I can't just create a different field for each source type as I need for them for sortable lists and in exports.

Is there any documentation that you are following?
https://toolset.com/course-lesson/conditional-display-for-form-inputs/

Is there a similar example that we can see?
Easybib.com

What is the link to your site?
It is inaccessible right now.

[Shane]

Hi Cynthia,

Thank you for getting in touch.

Given that you're sharing the fields for the multiple option then you won't be able to do this, at least not in the visual builder mode.

In the expert mode for the form you are able to separate the label from the field, however this is just a visual effect on the frontend only. When you view the post on the backend it will have the original labels still added over the field name.

Based on these name Author/Editor/Compiler the field I wouldn't advise using 1 field to store the names.

I would recommend using separate custom fields for these or just use a general name field and then the option that the user selected will let you know what source type it is and whether it is an Author/Editor/Compiler .

Thanks,
Shane

[cynthiaC]

Thank you for the prompt response, Shane. I guess I wasn't clear in stating my problem. You suggest creating different fields, but this is not an option. Users of my website will expect to sort all their sources by the source author - whether the author is an author, a photographer, an interviewer, a producer or an organization. Likewise, users will expect that when they export their sources for use in another program, they will be able to export all these author types in one field. Likewise for the other fields.

Users will have no access to the backend, so it doesn't matter what those field labels say. So how can I use the expert mode to accomplish what I want?

Alternatively, is there a way to hide the labels and use html to create the labels I need?

[Shane]

Hi Cynthia,

Alternatively, is there a way to hide the labels and use html to create the labels I need?

As mentioned in the expert mode you are able to hide/show the labels for e.g you can create 3 different label tags for your field and add them to different conditional tags.

The labels are created as an html tag, so if you switch the form to the expert mode you will see the setup like this

	<div class="form-group">
		<label>[cred_i18n name='image-label']Image[/cred_i18n]</label>
		[cred_field field='image' force_type='field' class='form-control' output='bootstrap' previewsize='thumbnail']
	</div>

As you can see there is a Label tag for the image field below, so you can use the conditional button to add the conditional then add the label tag within that conditional. See my example below.

<div class="form-group">
[cred_show_group if="( $(post_title) eq 'test' )" mode="fade-slide"]
<label>[cred_i18n name='image-label1']Image Label 1[/cred_i18n]</label>
[/cred_show_group]
[cred_show_group if="( $(post_title) eq 'test2' )" mode="fade-slide"]
<label>[cred_i18n name='image-label2']Image Label 2[/cred_i18n]</label>
[/cred_show_group]

		
		[cred_field field='image' force_type='field' class='form-control' output='bootstrap' previewsize='thumbnail']
	</div>

This will allow you to change the label based on the option that the user has selected.

Please let me know what you think of this.
Thanks,
Shane

[cynthiaC]

My issue is resolved now. Thank you!