Show / Hide a field in RSForm! Pro

in RSForm!Pro on 20 Feb 2012 having 53
RSForm!Pro Logo

With the latest revision of our Joomla! form builder RSForm! Pro we have added a much desired feature - conditional fields.

What are "Conditional Fields"?

Conditional fields allow you to show or hide a field based on the user's selections. With this article we will guide you in using these type of conditions. For a better understanding, we will start by modifying the "RSForm! Pro example" form. This form comes preinstalled with RSForm! Pro, so you should be good to go.

Let's add a new option to the "ContactBy" field.

Edit the field to add a new optionStart by editing the ContactBy field - next to each field you will find an Edit icon. Click on that icon and a new window will popup from the left. We already have a list of options here in the "Items" area so we will add a new one at the end, let's say "Other". Remember that each checkbox option will have to be a new line.

Adding the new optionAfter you're done, click on "Save". The final result we're trying to achieve here is to present a new field to the user if he selects the "Other" checkbox, so he can type in whatever he wants without being constraint by the predefined checkboxes.

We need a new textbox to show up now.

Adding the new textbox for the new optionNow it's time to create the textbox that will show up to the user. In the Form Fields list on the left, click on "Textbox". A window will popup from the left and you will be able to add "SpecifyBelow" as the field's name (this is the internal name that is used). Next, fill the caption as "Other".

The new textbox has been addedIf you want to specify additional options, feel free to do so - you can set "Required" to "Yes" (from the "Validations" tab) so that the field will become mandatory. Don't worry - this field will eventually be required just for people who will check the "Other" checkbox. Click on "Save".

Let's create a new condition.

Conditional FieldsThis is the part we've introduced with RSForm! Pro R43 - Conditional Fields. Head over to the "Properties" tab located on the top and then click on "Conditional Fields" from the left side. We don't have any conditions yet so we'll have to click on "New Condition". A modal window will popup.

Conditional FieldsHere you can specify if you want to show or hide the field (from the first dropdown). Let's select "Show". We'll select the "block (label + field)" option from the second dropdown so that the whole field, along with the caption, will be shown. In the third dropdown we will need to specify the field we would like to show, so let's click on "SpecifyBelow", which is the textbox we've added earlier. The last dropdown has no effect for our case now, since we will need to add only one condition, so we will skip it. Now, click on the "Plus" icon on the right.

New ConditionYou will notice that three new dropdowns have appeared below. The first dropdown shows a list of fields that are either "Dropdowns", "Radio Groups" or "Checkbox Groups". We need to show the "SpecifyBelow" field if the user selects "Other" from the "ContactBy" checkboxes - so, select "ContactBy" from the first dropdown, "is" from the second one (which contains a list of conditions) and "Other" from the last (which contains a list of all the values from the field you've selected in the first dropdown). We're all done, click on "Save" now. The conditions are saved without refreshing or saving the form, so we don't need to click on "Save" on the form.

Let's see it in action!

See the field in actionNow that we're done, click on "Preview" to preview your form. You will notice that the "Other" textbox is not shown. Tick the "Other" checkbox - the textbox will appear below.



Subscribe to our blog

Found this article interesting? Subscribe to our blog for more.



Gravatar
Andrei Cristea - 17.03.2016 (09:16:02)

Quote :
Is there a way to make this work with a group of fields? The client has three payment options, one of which is credit card. I was hoping when the user selected that option, the entire billing information form could appear. Otherwise, so far so good.


Yes, you can hide and show multiple fields using the same selection. Another possible solution is described in the online documentation:

https://www.rsjoomla.com/support/documentation/rsform-pro/frequently-asked-questions/set-up-conditionals-for-groups-of-fields.html

Quote
0

Gravatar
RANDY GARBIN - 16.03.2016 (16:40:28)
Toggle a Group of fields together

Is there a way to make this work with a group of fields? The client has three payment options, one of which is credit card. I was hoping when the user selected that option, the entire billing information form could appear. Otherwise, so far so good.

Quote
-1

Gravatar
Alexandru Plapana - 18.11.2015 (04:06:39)

Quote :
Not wroking for me. i try with 3 diffrent joomla and RSFROM.

Can you please tell me What was the problem ?


Please submit a support ticket about this. We can't determine the problem unless we actually have a look at the form and your configuration.

Quote
0

Gravatar
gova123 - 17.11.2015 (23:29:24)

Not wroking for me. i try with 3 diffrent joomla and RSFROM.

Can you please tell me What was the problem ?

Quote
0

Gravatar
Alexandru Plapana - 20.03.2015 (04:21:53)
@francese

As long as you maintain container CSS classes, conditionals will continue to work properly.

Quote
0

Gravatar
francese - 19.03.2015 (18:44:48)
conditional fields auto generator off

Hi how can i use conditional fields when auto generator is turned off , if i apply my 2 column lay out conditions are gone
tks for ur help

Quote
0

Gravatar
Alexandru Plapana - 28.10.2014 (03:47:41)

Quote :
I did it in a popup, however the condition does not work but if it is on a menu such works. I wonder if there is another way to solve this occasion?


Please submit a support request so our staff members can have a look at this.

Quote
0

Gravatar
Willian - 27.10.2014 (12:02:27)
Error

I did it in a popup, however the condition does not work but if it is on a menu such works. I wonder if there is another way to solve this occasion?

Quote
0

Gravatar
Alexandru Plapana - 20.10.2014 (02:28:50)

Quote :
I want 4 check boxes aligned vertically. I want a text field to appear NEXT to each when they're checked - not below on a separate line. I thought I would use a table but you don't have that functionality either. Although you have a nice product, I feel as if I'm reverting back 10 yrs in web development - no tables at all?
Do you have any plans for horizontal alignment?

Thanks


So let me get this straight... you feel that you are reverting back with 10 years because you can't align a checkbox group with tables ? Not sure how "the web" was for you 10 years ago, but you can do this by customizing the actual form layout. It will come down to basic HTML editing.

Quote
1

Gravatar
dachief - 18.10.2014 (12:56:13)
nice feature but...

I want 4 check boxes aligned vertically. I want a text field to appear NEXT to each when they're checked - not below on a separate line. I thought I would use a table but you don't have that functionality either. Although you have a nice product, I feel as if I'm reverting back 10 yrs in web development - no tables at all?
Do you have any plans for horizontal alignment?

Thanks

Quote
0

1000 Characters left

Antispam Refresh image Case sensitive