[Resolved] Search form design

[Author]

Posts

[moriI8440]

I want the search form to be as simple as image 2, but it looks like image 1.
I have no knowledge of CSS.
Even if you look at the support Youtube, by default it has a search form like image 2.
Is there a reason for this?
Please let me know if there is any way.

[Christian Cox]

I'm not sure I understand what you mean by "simple", can you explain a bit more? Do you want to add columns to your search filter design, so that the select fields do not extend the full width? You can use grid cells to create rows and columns in the search filter editor, then place search filters in those grid cells.

[moriI8440]

I want to create a search form with a design like image 1.
Image 2 was created with VIEW.
Should I create with toolset block?
Can you make it without CSS knowledge?

Also, even if you make a loop design with 4 columns with toolset block, if you put VIEW on fixed page with elementor, it will be 1 column.

[moriI8440]

reference
referenceˈref(ə)rəns

[Christian Cox]

In Views, you can add a <br /> tag between the label and the filter shortcode to create a line break. For example:

<div class="form-group">
	<label for="wpv-wpcf-book-select-1">[wpml-string context="wpv-views"]Book Select 1[/wpml-string]</label><br />
	[wpv-control-postmeta field="wpcf-book-sel-1" url_param="wpv-wpcf-book-sel-1"]
</div>

To adjust the width of the select field to make it 100% width, you will probably need some custom CSS. To add columns, you will need some HTML and CSS.

If you create the View in Blocks, then you can use the Grid block to create column designs without HTML or CSS, but you don't have the same fine-level control over the search form design. You are limited to the styling options provided in Blocks. I am attaching a screenshot here showing the different design options provided for a select field filter. You can see margin, padding, and border options but no full-width or percentage width option. To achieve that style you would need some CSS knowledge.