skip to Main Content

Can something like this be done on CF7? Can it be done with CSS, I’ve done considerable reasearch and havent found a way to do this..ideally I’d like to do this with an existing form/plugin and not do it all from scratch

enter image description here

Don’t know how to create/customize

2

Answers


  1. Chosen as BEST ANSWER

    This will disable the click event

    `.hybriddd-option .hybriddd-l0  {
     pointer-events: none;
    }`
    

    This will hide the checkbox .hybriddd-option .hybriddd-l0 .hybridddcb { display: none; }


  2. I developed a JavaScript plugin, the HybridDropddown field for this kind of listing.

    In addition, the Smart Grid-layout extension for CF7 allows you to builf dynamic_checkbox field tags which you can populate with your WordPress categories and format as a HybridDowdown field. The HybridDrodown uses checkbox inputs, but you can change thier visibilty using CSS as the entire dropdown is can be customised with CSS.

    The following CF7 tag,

    [dynamic_checkbox cat-list limit class:cf7sg-treeview "slug:category:tree"]
    

    would use the category terms to populate the dropdown,

    HybridDrodpdown list

    The above displays terms with parent (as label), children (as option), grandchildren (as option), by default it uses the first level as labels and the subsequent branch of terms as options with each child branch indented relative to its parent.

    If you need to customise this layout, say you want the 1st 2 level of branching to be labels and the 3rd level of branching to be options, then you have 3 ways to achieve this

    1. you can use CSS to convert the 2nd level option as a label (remember the HybridDropdown is a pure HTML/CSS construct). You can disable each 2nd level option to ensure a misplaced click does not actually select it.
    2. The Smart Grid-layout allows you to filter a taxonomy query, so you can use a specific branch of a taxonomy as a listing. See this tutorial on how to filter the query.
    3. For more complex custom lists, the Smart Grid-layout plugin’s dynamic list fields have a filter option to populate its dropdown, so you can programmatically query your cetegories and select the terms, see this online tutorial.

    For more information on dynamic checkbox fields see this tutorial.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search