[Gelöst] Dropdown multi select field

[Author]

Artikel

[SteffenM1628]

Tell us what you are trying to do?

Hey there, couldn´t find a answer in the forum.
How can i built a multiselect field for the front end forms.

The checkboxes do look pretty ugly and is not really user friendly when there are a lot of options to choose from.

Any ideas or alternatives?

cheers and thanks.
your support is absolutly awesome!!!!!!!!!!!!!!!!

[Nigel]

Hi Steffen

You mean you have added a Types checkboxes custom field to a Form? (We are talking about custom fields, not taxonomies, right?)

There is no provision in Forms to style a checkboxes field as anything other than checkboxes.

However, you can add a generic field which is a multiselect.

(See https://toolset.com/documentation/user-guides/inserting-generic-fields-into-forms/)

In the form, use the Add Generic Fields option and use it to add a multi-select field, setting up the options as required.

By default generic field values as discarded once the form submission is complete, but if you want it to be saved to the database you can manually add the "persist":1 option, like so:

[cred_generic_field field='my-multiselect' type='multiselect' class='' urlparam='']
{
"required":0,
"validate_format":0,
"default":[],
"options":[
{"value":"1","label":"First"},
{"value":"2","label":"Second"},
{"value":"3","label":"Third"}
],
"persist":1
}
[/cred_generic_field]

Note that if you want to output this field it is a non-Types field, which will be output using the wpv-post-field shortcode instead of the usual Types shortcode.

[SteffenM1628]

Hey Nigel,

i mean the select field (pic attached). How can i modify this to be multi select?

[Nigel]

You can't.

You could simply add the "multiple" attribute to the select input using JS (see screenshot for an example), but it wouldn't save the results correctly, because a Types Select field expects only one option to be selected.

If you are using a custom field in front-end Forms then a generic multi-select field is your only option that will save multiple options to the database correctly.

[SteffenM1628]

Allright thank you.

i will try a generic field. But is a generic field also visible and usable in the back-end of the ctp or only in the front end?

Why is this so a big problem to have a multi-select field and will some solution come to toolset?
Sorry i am an non dev and therefore this stupid questions?

[SteffenM1628]

just testing it.

sorry but this is no good looking front end solution as well. (pic)

Can i have a dropdown instead of displaying all options to choose. Than i can also take the checkboxes. no difference!

[SteffenM1628]

do you know how i can display the checkboxes inline? (pic)

[Nigel]

To display the checkboxes inline

1. edit the form and add a class to the markup that wraps the shortcode which inserts the checkboxes field, e.g. add a class of "inline-list" like so:

	<div class="form-group inline-list">
		<label>Multiple Choices</label>
		[cred_field field='multiple-choices' value='' urlparam='' output='bootstrap']
	</div>

That class will help us target the right field with custom CSS, such as this:

.inline-list li.checkbox {
  display: inline-block;
  margin-right: 10px;
}

I'm going to submit a feature request to add a multi-select Types field.

[SteffenM1628]

Hey Nigel just found out that i can´t set the checkboxes field to mandantory?!

How can i set this up?

The css is working fine. Thank you

[Nigel]

Checkboxes are a complex field type, and it is not possible to make it required without adding some code to enforce this with server-side validation.

There is a good explanation of what's required in another thread here: https://toolset.com/forums/topic/cant-validate-checkboxes/