Caldera Forms Change Css on File Upload

The general rule for edifice forms is that you should have as few fields as possible, as too many fields tin can lead to a drop in conversions. But you too take to avert creating a form that doesn't gather the information you demand. This is where the conditional logic in WordPress course builders is so bully — your form can tailor itself to the verbal needs of the person filling out the form.

If you're looking for a powerful and free conditional logic from a WordPress form builder plugin, Caldera Forms is a great selection. Caldera Forms has a page builder-like elevate-and-drop interface and an intuitive provisional logic system. As a free alternative to Gravity Forms and Ninja Forms, Caldera Forms conditional logic is a free feature.

Conditional logic allows course fields to bear witness, hibernate or be disabled based on conditions being met. Likewise, you lot can accomplish complex uses of conditional logic such as complex autoresponders, calculation fields, custom animations. With Caldera Forms, you tin even use provisional logic to customize email recipients based on user input. The latest version of Caldera Forms allows you to salvage and view all the changes you've fabricated to your form likewise.

This tutorial will bear witness you how and we'll use some examples. Permit'due south become started.

Hibernate And Testify Fields Based On The Number Of People Registering For An Outcome

Let's say that you want to build a registration form where the number of fields appearing tin change based on the number of people like shown in the pictures beneath. Caldera Forms Provisional Logic can do that.

To start, go to the Caldera Forms admin page and click the New Class button. This brings upwardly a selector for course templates. "Registration Form – with optional additional participants" template is a swell case of how to employ provisional logic. But for this tutorial, choose "Bare Form" so you lot can learn all of the steps.

Then, add together all the fields you need. In this case, add all the fields for three people to register. To add a field in Caldera Forms you lot drag the Add Field button into the form layout grid. The grade layout filigree is like a page builder that you can split upward into rows and columns.

For this course, let's utilize 3 rows. The beginning row will be to inquire for the number of people registering 1, 2 or iii. The second row will be for the details of each person, we volition apply the provisional logic on these fields. Then the third row will agree on our submit push.

Past default, the grade has ane row. Below that row is a big plus push. When you hover over that plus with your mouse information technology volition say "Click to add a new row to the layout." Click that twice to add two new rows.

Now click and drag the Add Field bar into the first row. This volition bring up the field chooser. Caldera Forms has a lot of field types. They organized into five categories you can cull from on the left side of this modal.

A toggle switch is a great pick. These fields look like a push button group but deed like a radio field. Click the select pick on the left side and and then find Toggle Switch and click the Set Field button.

This adds the field to the grade and brings up the field's settings on the right-hand side. Give the field a name "Number Of People." Caldera Forms has a ton of options for choosing the options of a select field, but we will merely add together three simple options. At the bottom is a button called Add Selection. Click that three times. In the value settings for the first option enter "One", in the second – enter "Two" and in the third – enter "Iii".

In this form, we'll inquire for each of the three people's proper noun and e-mail. To make it wait prissy and organized, carve up the second row into two columns by clicking hovering over that row and then clicking the button at the top of the row with two arrows. This splits the row into ii columns. Yous tin split the row up to twelve times. Considering Caldera Forms is responsive, on mobile devices the grid will collapse into ane column per row so your forms look and function groovy on mobile and desktop.

Now, add six more fields. Just like before, drag the Add Field bar into the grid where you want it and cull the field type you want. But this time, use a "Single Line Text" field and put it in the left-side columns and cull "Email" field and put in in the right side column. Call the single line text field "Person One Name" and the email field "Person One Proper noun". And so echo for 3 people. Make all six fields required by checking the Required setting for each field.

We're making each field required. Don't worry if the fields are hidden based on conditional logic, they volition not be required. Let's create that provisional logic. Click on the Conditionals tab to go to the conditional logic architect.

When you commencement go to the Conditionals tab and in that location are no conditionals in the form, the Add Conditionals push will be blinking, calling out to you to click it. Do what it wants, click that button.

When you click the push button a new conditional group will announced and you volition need to name this grouping. Telephone call this group "Iii People". The goal of this group volition be to go the field for person three to evidence if the number of people is three. At that place are three types of conditional groups:

• Show – This type shows fields when the conditions are met.
• Hide – This blazon hides fields when the weather condition are met.
• Disable – This type disables fields when the conditions are met.

For this group, choose the Show. Then click the Add Conditional Line. In the line that shows upward, you lot choose, from left to right, the field to base the condition on, how to evaluate the condition — is, is not,, greater than, less than or contains — and what value to evaluate the condition confronting. So choose for the field, "Number Of People", so "Is" for the comparing and then select "Three". On the right side, y'all choose which fields this affects. Cull the fields for person three.

That provisional group volition make information technology so the fields for person iii prove merely when the number of people is iii. Correct now, the fields for person i will always show, which is good, but also the fields for person two will show and that'south a problem. A trouble we can solve with one more provisional logic group!

Click the Add together Conditional Grouping push again and requite this group the proper noun "Two People". It will also be a evidence grouping. This time we will need to base the conditional logic on two different values of the Number of People field, and so click the Add Conditional Line button twice to add two lines.

Your first line will exist identical to the final line we created in the other grouping — if Number of People is Three. In the other line, it volition be similar, merely nosotros will use if Number of People is Two.

Considering these are two different lines, the conditional volition exist met if line 1 OR line 2 is met. This status acts if Number of people is Two or Number of People is Iii. If you wanted an "and" status, you would click the Add Condition button within the line. Yous can combine multiple ANDs and ORs based on dissimilar fields and go really circuitous.

Before you go out this conditional logic group, make sure to assign the person three fields past selecting them on the right under Practical Fields.

Almost washed. We just need to add a submit button. Go back to the Layout tab and drag the Add Field bar into the third row. Choose a Button field from the Basic category. Caldera Forms buttons can exist submit buttons, next page or previous page buttons — for multi-folio forms –, reset buttons or generic buttons. In this case, leave the field as the default button.

You should name this field what you want the button to say. For example, you might want to name it "Sign Up" or some other telephone call to activeness.

Click the Save Form button at the pinnacle of the form and then you can use the Preview Form button adjacent to it to meet the form in action in the front-end.

Sending Conditional Auto Responder Emails

To continue with this registration instance, permit's say that y'all want to ship a different automated message to each person who has registered, we can use provisional automobile-responders for that, Caldera Forms Conditional Logic is bachelor both for fields and processors.

This will let the states to send an email to person two if there are two people registering or to person three if iii people are registering. Later on you build the form, click the Processors tab and Add Processor button. This will bring up the processor chooser. When yous encounter the Auto Responder, click Employ Processor.

After calculation Auto Responder, you'll see the Settings folio by default. The field after From Name volition be the place to put the proper noun of the person or company that the e-mail will appear to accept been sent from. The Recipient Name is the place for the name to whom you want to send an email. You lot can blazon in the recipient name and e-mail address, or save some job by selecting %person_one_name%. %person_one_name% is the magic tag that will be replaced with the value of the field "Person One Name". Similarly, %person_one_email% will be replaced with the value of the field "Person I Email". Next, you can edit the email content in Message field.

Since this email volition ever exist sent, we don't demand any provisional logic, but the other two auto-responders we're nearly to add volition.

Next, let'southward discover out how to do that when the number of people is ii! At present that you take the kickoff Car Responder, you but demand to add some other one for "person_two".  Click on Add Processor button similar you've washed before, choose Auto Responder and edit email content under Settings. Since this message is simply going to "perosn_two", but choose %person_two_name% and for Recipient Name and %person_two_email% for Recipient E-mail.

Each Caldera Forms processor has a conditionals tab that works just similar the conditional logic for fields we looked at before. The conditional group will make it and so the email is sent merely when the conditions are met.

Afterward y'all're done with the settings, click on Conditions. Just like before, choose Utilise, then Add Conditional Group. For the email going to "person_two", since the information of "preson_two" appears when the number of people is ii and when the number of people is three, the e-mail will go out nether these 2 conditions. Therefore, yous tin set the condition as "if Number of People is Two", and so click on Add Conditional Grouping, and prepare another condition every bit "if Number of People is Three". These atmospheric condition will make it so that this email volition be sent to "perosn_two" when the number of people is two or three.

Additionally, you can add together atmospheric condition by clicking Add Condition push button nether "if" statement. The difference betwixt this and Add Conditional Group is that Add Condition will add additional conditions, which means the e-mail will simply be sent when all the conditions are met. If you want to delete any condition, click " – " button on the right.

Now you're washed setting the second auto responder. The side by side and final footstep is to gear up the third machine responder to send an email when a number of people are three. Don't worry, there's nothing new for this step and it's a perfect hazard for yous to practise what you lot've washed before. Every bit you lot'll get the information of person_three just when the number of people is three, simply set the condition equally "if Number of People is Iii". Forget how to do that? Never mind. Let's go through it together one terminal fourth dimension.

Click on Add Processor push button on the left, and select Car Responder. By default, y'all'll become to the setting folio where you lot can edit the email content. Since this 1 is going to person_three, enter your proper name for From Name and your electronic mail address for From Email. Then double click to select %perosn_three_name% for Recipient Name and %person_three_email% for Recipient Electronic mail.

After done editing email bulletin, click on the Atmospheric condition button on the right next to Settings button. Choose Use in the dropdown menu, then set the status as "if Number of People is Three". This will make the tertiary machine responder send this email to person_three when the number of people is three.

Once yous have gone through all these steps, click the Save Form button at the tiptop of the form. So, you can use the Preview Form button next to it to see the form in activity in the front-finish.

Conditional Logic Is A Powerful Feature of Caldera Forms

If you lot've never used Caldera Forms, you might be shocked that conditional logic is a free feature. None of the other major form builders include provisional logic in their gratuitous plugin. With this dandy feature, you can build custom registration forms, payment forms with multiple payment methods and whatsoever other type of forms you or your clients need.

bowlingyoustion.blogspot.com

Source: https://www.ostraining.com/blog/wordpress/conditional-logic-with-caldera-forms/

Share this post