Capture or pass a class name or a variable from a button and a tab

Hello @lastpriceca

You’re merging different contexts in your question:

>> When a user clicks btn1, the popup pops up but I need to open tab1 meaning tab1 becomes active.
>> When a user clicks btn2, the popup pops up but I need to open tab2 meaning tab2 becomes active.
>> When a user clicks btn3, the popup pops up but I need to open tab3 meaning tab3 becomes active.

The buttons and tabs are not components of the form, your tabs contain the forms. So, the action of these buttons are not part of our plugin.

About your other equations. Yes, you can assign a class name to the form through its shortcode:

[CP_CALCULATED_FIELDS id="35" class="tab1"]

In this case, the <form> tag will have assigned the class name tab1.

If you want to evaluate the equations in a form by pressing a button. For example, evaluate the equations in the form with class name tab1. You can enter the following piece of code as part of the button onclick event:

EVALEQUATIONS(jQuery('form.tab1'));

Best regards.

Thank you.

You are right it is kind of a complicated setup or requirement. But, I found a solution that allows to capture what tabs is active using its herf that has #<value> when clicked and so I can get its URL and process it in a calculated field, return a value and show/hide or add options according to the returned value that indicate the active tab. And/or, use JS or jQury. Also, creating CFF JS variables can help linking the buttons and tabs described in my previous scenario.

However, I discarded my previous setup because it makes the website slow (having 8 tabs (external of the form) each of which loading the same Form). Instead, the good solution is to create and design the tabs in the Form itself and so no need for external tabs each has the form short-code added and also one form short-code is used. (My purpose of using external tabs is that I have more options and control in design beautiful and professional tabs)

In CFF there are many field types but there is no specific fields for adding tabs, pills or accordions. Of course, there are div, html and field set that can be used for designing tabs. What is the recommend way to create tabs, pills or accordions using CFF?

Thank you.

Hello @lastpriceca

You can create accordions using Fieldset fields. Insert fieldset fields in the form, and tick their attributes “Make it collapsible” and “Only one opened at a time”.

Best regards.

Thank you.
Fieldsets and their properties are great and easy to use.
Could you please help me with the following.

My Fieldsets are all in the same level inside the same div.
Please check them on this link.

I added the following CSS style to align my Fieldsets horizontally:

#fbuilder .cff-container-field {
  display: inline-block !important;
  vertical-align: top !important;
}

I added the following CSS style to change the color of the legend text:

#fbuilder .cff-container-field>fieldset>legend {
	font-size: 11px !important;
	text-align: center !important;
	color: #154d5e !important;
	border:0 !important;
	margin-bottom: 0 !important;
	padding: 2px !important;
}

I added the following CSS style to change the color of the legend text on hover:

#fbuilder .cff-container-field>fieldset>legend:hover {
	background: #1bc744 !important;
	color: #000000 !important;
}

However, the legend text color did not change but it did change on hover.
How can I change the color of the legend text?

In each fieldset below the legend there is some space and three dots (…).
How can I remove the space and the dots below the legend title?

How can I change or remove the left arrow (>) shown at the end of the legend title?
For example, suppose I want to remove it or change its direction on collapse and expend since now the Fieldsets are aligned horizontally.

In this layout each fieldset takes a small space when expended.
How can I make any fieldset that is clicked to expend to take the whole column (div) horizontal space (width 100%)?
So, to resemble the behaviour of tabs which takes the available space both on its left and right.

Is it possible to separate the legend and the content or body of the fieldset such that I choose where to show the content?
For example, suppose I want to add some content like an image or div to show just right below the legends and when a legend is clicked the content or the body of the fieldset show below the image or div content?

Thank you very much for help and for the fixable CFF plugin ( I consider CFF as a framework, not just any plugin)

Hello @lastpriceca

To display the containers, side by side, you only should move them into a DIV field with the number of columns selected through its “Columns” attribute.

The hover styles are not applied because you have commented the CSS rules:

You must insert the CSS styles with no comments:

#fbuilder .cff-container-field>fieldset>legend:hover{
background: #154d5e !important;
color: #aaaaaa !important;
}

Best regards.

Thank you. I am experimenting differencing CSS styles on Fieldsets.

I see from my browser inspect that CFF by default applies: color: #2196f3 !important; in this style:

#fbuilder .cff-container-field>fieldset>legend {
    cursor: pointer !important;
    color: #2196f3 !important;
}

Maybe that is the reason my change of legend color did not take effect.

I am trying to use Fieldsets as a navigation menu, but I think eventually I will give up the use of Fieldsets and creating my own navigation menu that has toggle effect and grape a common class of these navigation menu, process it in a calculated filed to know which nav is clicked and so show/hide some Divs, set up some fields values accordingly and so I will have more control on spacing, positioning and styling.

Here is some CSS styles I am experimenting with that may be of help for anybody.

/* div element contains all Fieldsets*/
.fieldsets-div{
	width: 100% !important;
}

/*display: inline-block !important; and vertical-align: top !important; - display Fieldsets horizontally*/
#fbuilder .cff-container-field{
  /*display: inline-block !important;*/
  /*vertical-align: top !important;*/
  /*width: 100% !important;*/ /* set a fixed width of 20% */
  /*overflow: auto !important;*/ /* allow overflow content to scroll */
}

/*removes the arrow after the legend text */
#fbuilder .cff-container-field>fieldset>legend:after{
display: none !important;
}

/*margin-bottom -10px - removes the space after legend*/
/*All styles works except for color: #1bc744 !important; DOES NOT work?*/
#fbuilder .cff-container-field>fieldset>legend{
  margin: 0px !important;
  margin-bottom: -15px !important;
  padding: 2px !important;
  border: none !important;

  text-transform: uppercase !important;
  color: #1bc744 !important;
 font-size: 12px !important;
}

/* display: none !important; hides the body of the fieldset*/
/* so we can position the body of fieldset away from its legend,*/
/* but still needs some work*/
.cff-container-field>fieldset>div{
  /*display: none !important;*/
  /*width: 100% !important;*/
  /*position: absolute !important;*/
  /*left: 20px !important;*/
  /*top: 100px !important;*/
  margin-left: 20px !important;
}

/*removes the the three dots after legend*/
.cff-collapsed fieldset:after{
  display: none !important;
}

/*changes legend text color on hover*/
#fbuilder .cff-container-field>fieldset>legend:hover{
	/*background: #154d5e !important;*/
	/*color: #aaaaaa !important;*/
}

Thank you very much.

Hello @lastpriceca

You can emulate your own navigation with buttons and div fields instead of fieldsets.

For example, assuming you have three DIV fields, fieldname1, fieldname2, and fieldname3.

1. Enter the ignorefield class name through the “Add CSS Layout Keywords” attributes in the fieldname2, and fieldname3 fields settings.
2. Insert three button fields in the form to activate or deactivate the different DIV fields, and enter the following onclick events:

For the first button:

ACTIVATEFIELD('fieldname1');IGNOREFIELD('fieldname2');IGNOREFIELD('fieldname3');

For the second button:

IGNOREFIELD('fieldname1');ACTIVATEFIELD('fieldname2');IGNOREFIELD('fieldname3');

For the third button:

IGNOREFIELD('fieldname1');IGNOREFIELD('fieldname2');ACTIVATEFIELD('fieldname3');

Best regards.