[Resolved] Search Forms

[Author]

Posts

[CharlesB2907]

The current view displays the image in the attached screenshot and this is also the view that I need to show in the search results from, both the homepage and the product page.

The search form, to display this view, will need to have many more field available to query but should result in one or any number of this view type.

Consider that this is the view that I want to be displayed in search results, shouldn't the form be created and linked to this view and used for both the homepage and the product page?

This is still very confusing for me and I would greatly appreciate any tips and direction you can provide.

Thank you.

[Waqar]

Hi Charles,

Thanks for asking! I'd be happy to help.

To better understand the relationship between the search form ( in Toolset Views it is called search filters ) and the search results ( the actual content list that the view generates ), following are some useful points:

1. A single view can consist of both these elements:
a). search filters
b). search results

2. Search filters can be included in the view, even if they were not included initially at the time of the view's creation.
( details are available in this guide: https://toolset.com/documentation/user-guides/front-page-filters/ )

3. Once a view includes both (search form and the search results), you'll have the flexibility to:
a). show both these together on page
b). or, show only the search filters on page
c). or, show only the search results on page

You'll see these options while inserting the view's shortcode, from the "Fields and Views" button:

Screenshot 1: hidden link
Screenshot 2: hidden link

With the above points, it can be concluded that a single created view can be used in many different ways on different pages/locations on a website. You'll need to create a new one, only if you have a different requirement to show the search filter fields or the search results format/data.

Hope this helps and let me know if you have any further questions around these points.

regards,
Waqar

[CharlesB2907]

Hi Waqar,

I took the preexisting View used to populate a table-based grid of product thumbnails as you are aware. That worked out perfectly except that table-based grid loads unreasonably slowly. I am hoping that it will perform much quicker once the custom search form can filter results.

The problem is I tried to follow your instructions provided in the previous post but I can not make ANY sense of is in terms of implementation.

1. In the existing View, I added Filters for each of the fields needed to search. (these fields are displaying prepopulated when I need them to be initially blank and optional).

2. I added the submit and clear buttons.

3. Updated the View.

4. First attempted to add the form ONLY shortcode to a Divi Overlay using the Fields and Views link from within a text module added to the overlay page. The overlay is designed to open on top of the trigger page to reveal the content which in this case is the search form, but it only displayed the search form shortcode and not the form.

5. I created a static page "Search Form" enabled the Divi builder, opened a Text Module and clicked the Fields and Views link to add the View I had previously created with the custom filters.

The problems are the form shows in one very long column, but the form not only does not return results, but it also displays an older version of the homepage and I can not find out why. Although the basic form is unsightly, I attempted to follow the tutorial for breaking the form into columns (which I think is incorrect). The tutorial acknowledges that the grid display could be used to divide the form into columns without having to use Bootstrap and then closed the statement by instructing the reader to enable Bootstrap... makes no sense. Please see the screenshot I took of this.

I am completely lost on this. The static page with the form is hidden link I do not think it will serve any purpose but the overplay where I placed the form shortcode from the field and views link in the top navigation bar "Search Form Overlay".

Help, please.

[Waqar]

Hi Charles,

Thanks for writing back.

I see a couple of different questions in your last reply and I'd request you to use separate tickets for each issue/question in the future ( as per our support policy - https://toolset.com/toolset-support-policy/ ).

This will make things easier and less confusing to understand, for you and anyone else looking for the information on the topic.

> these fields are displaying prepopulated when I need them to be initially blank and optional

- When we're adding a new search filter, there is a field to include a default option, as shown in this screenshot:
hidden link

> First attempted to add the form ONLY shortcode to a Divi Overlay using the Fields and Views link from within a text module added to the overlay page. The overlay is designed to open on top of the trigger page to reveal the content which in this case is the search form, but it only displayed the search form shortcode and not the form

- Since the overlay page feature is being controlled from the theme, I'll recommend getting in touch with the theme's support team, to see how it can be made to allow the use of shortcodes in it.

As you noted the Toolset shortcodes are working as expected when added into a regular page.
( e.g. hidden link )

> The problems are the form shows in one very long column, but the form not only does not return results, but it also displays an older version of the homepage and I can not find out why. Although the basic form is unsightly, I attempted to follow the tutorial for breaking the form into columns (which I think is incorrect). The tutorial acknowledges that the grid display could be used to divide the form into columns without having to use Bootstrap and then closed the statement by instructing the reader to enable Bootstrap... makes no sense. Please see the screenshot I took of this.

- To better understand the limitation you're currently facing, I'll share a brief explanation of the relationship between, Toolset, Bootstrap, and Divi.

a). By default, the Toolset plugins make use of Bootstrap styles, to show content in grids (rows and columns).

b). Unfortunately, the Divi theme/plugin includes its own styles for grid content, which are known to result in a conflict with the Bootstrap styles.

For this reason and as an exception, we suggest Divi users, to make use of its built-in styles and disable the Bootstrap styles.

And, when Bootstrap styles are not loaded on a website, the guides like the one you mentioned ( https://toolset.com/documentation/user-guides/displaying-content-using-grids/ ), won't be applicable.

c). In this scenario, no matter what type of content you would like to show in grids or columns, you can either use tables (like you used for showing the search results) or add custom CSS code and classes for this.

You'll find a number of useful articles online, on using custom CSS styles for showing content in a grid format:

hidden link
hidden link
hidden link

I hope the above points will help and let me know if you have any questions related to them.

regards,
Waqar

[CharlesB2907]

My apologies for the combustion of questions. However, imagine my frustration from heaving deadlines on one side and on the other, your support team members are sending me links to articles for HELP when those articles SENT "won't be applicable" to my needs even though I have made it repeatedly clear that I am using Divi builder and not Bootstrap. This mistake has occurred several times before and the result is my scrambling to understand while trying to manage a product deadline.

I thank you for the code tutorial links you provided. Your platform advertising might consider that people who do not code are attracted by offers of "... With No Coding Needed".... but may not be aware that Toolset obviously does NOT regard CSS code.

[Waqar]

Hi Charles,

I can understand the frustration in a situation like this and sorry to learn that some of the replies from our team resulted in further confusion and delay.

But I assure you on behalf of the whole team that we'll do our best to improve your future support experience and you're welcome to keep sharing your questions, concerns, and feedback.

At the very core of ever-evolving Toolset plugins is the idea that users with different technical backgrounds and expertise can effectively enhance the power of WordPress to make dynamic and data-driven websites.

But with a wide range of project/client requirements, third-party plugins, and themes, the use of custom CSS and JavaScript code may not always be avoided.

Please let me know if you have any further questions - we're here to help!

regards,
Waqar

[CharlesB2907]

Hi Waqar,

Regarding your previous post:

c). In this scenario, no matter what type of content you would like to show in grids or columns, you can either use tables (like you used for showing the search results) or add custom CSS code and classes for this.

> Is there any available information on how I can add tables to the existing form?

You'll find a number of useful articles online, on using custom CSS styles for showing content in a grid format:

hidden link
hidden link
hidden link

These links seem helpful with side by side reference between the html and the css styling. From a code novice point of view, but where would I access the forms html to identify the elements to style?

[CharlesB2907]

Actually Waqar, the search form doesn't work. I am completely confused.

I am so completely turned around that I do not know how to ask for help with this insanity.

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-search-forms-doesnt-work-as-expected/

[CharlesB2907]

Based on my individual experience, no Elegant Themes user should ever consider this integration.

[Waqar]

Hi Charles,

I'll continue the conversation around the visual aspect of the search form in this thread.

For the functional part, I will follow-up with you through a newly created ticket.
( https://toolset.com/forums/topic/split-search-forms-doesnt-work-as-expected/ )

If you'll check your View's "Search and Pagination" section after adding the search filters, you'll find the HTML code for each filter field in it.
( screenshot: hidden link )

To wrap those individual search form filter fields in a custom HTML table or a grid, you can first prepare it's HTML code in your text/code editor like this:

<table style="width:100%">
	<tr>
		<td>Filter 1</td>
		<td>Filter 2</td>
		<td>Filter 3</td>
		<td>Filter 4</td>
	</tr>
	<tr>
		<td>Filter 5</td>
		<td>Filter 6</td>
		<td>Filter 7</td>
		<td>Filter 8</td>
	</tr>
</table>

The above example assumes that you'd like to show your search filters in 4 columns, but you can adjust the HTML code for the table as needed.
( ref: hidden link )

Once the HTML structure is ready, you can replace the actual code for each search filter from the "Search and Pagination" section, into the relevant custom HTML structure cell in the editor (i.e. in place of text "Filter 1", "Filter 2" etc ) and then once all filter fields have been included in the code, move the entire code back inside the shortcode [wpv-filter-controls] ... [/wpv-filter-controls] (in that same "Search and Pagination" section).

This way, you'll be able to show your search form fields in the desired structure or layout.

Note: if you're interested in learning more about HTML and CSS code in general, you'll find some useful links at:
https://toolset.com/faq/learning-basic-html-and-css/

regards,
Waqar.

[CharlesB2907]

Hi Waqar,

I am beginning to understand the table column and row structure and I have several table CSS samples I am eager to try.

However, do you have a responsive html table sample or can the current code be made responsive?

Thank you.

[Waqar]

Hi Charles,

I've checked your view ( Single Product List Entry ) and it already includes the custom CSS code that was added for making the search results table, responsive.
( ref: https://toolset.com/forums/topic/list-posts-with-custom-search-s/#post-1138017 )

To make that CSS code apply to all tables on the page (i.e. search form table as well as the search results table), you can update it and remove the class restriction ("wpv-loop" & "js-wpv-loop"), so that it becomes:

table { 
    width: 100%; 
    border-collapse: collapse; 
}
 
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
 
    /* Force table to not be like tables anymore */
    table, table thead, table tbody, table th, table td, table tr { 
        display: block; 
    }
     
    /* Hide table headers (but not display: none;, for accessibility) */
    table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
     
    table td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; 
    }
}

This way, both those tables from the view will become responsive.

regards,
Waqar

[CharlesB2907]

Hi Waqar,

Yes, this worked perfectly but I still have to finalize a couple of form field choices before I can finalize the form. I can not express how greatly I am for your assistance with pushing this project along.

Can you tell me how to remove the light grey border around the column div area?

How can I assign an id(s) to the table html elements to add CSS?

[Waqar]

Hi Charles,

I'm glad the search form is shaping up nicely and my messages helped.

You can use Chrome browser's dev tools to see the styles and their sources which are applying to the different page elements.
( ref: hidden link )

You'll find that the border that is being applied to the "table" and "td" tags is coming from the following CSS code in the theme:

.entry-content table, body.et-pb-preview #main-content .container table {
	width: 100%;
	margin: 0 0 15px;
	border: 1px solid #eee;
	text-align: left;
}

.entry-content tr td, body.et-pb-preview #main-content .container tr td {
	padding: 6px 24px;
	border-top: 1px solid #eee;
}

You can include your custom CSS code, to override those default border styles.

The actual input field elements are created by the shortcodes in the "Search and Pagination", but you can add custom IDs and classes to the wrapping div with "form-group" class or the td tag and the target those elements through CSS selectors.

To learn about the CSS selectors, classes and IDs, I'll highly recommend these links:
hidden link
hidden link

regards,
Waqar