Customization of Forms and passing information from one form to another

Hello @carnagelp

They have selected the predefined template 11 and customized the form’s appearance. In fact, they did a great job. More information about the fields’ components, and how to customize their designs by reading the following post in the plugin’s blog:

https://cff.dwbooster.com/blog/2020/01/12/form-design

For passing the values from a form to another, insert the second form in the thank you page of the first, and the shortcode for results to populate the fields in the second form with the values submitted by the first one. More information in the following section of the plugin’s website:

https://cff.dwbooster.com/documentation#populate-form-b-with-a

Best regards.

The thank you page option is listed under the pro features. Is there no way to do the needful using the base plugin?

Hello @carnagelp

If both forms are on the same page, you can populate the fields by programming.

Assuming both forms are on the same page and you want to populate a field in the second form with the value of a field in the first one.

Assign unique class names to both fields, for example, field-a and field-b respectively.

The class names are assigned to the fields through their attributes: “Add CSS Layout Keywords.”.

Now, insert an “HTML Content” field in the first form with the following piece of code as its content:

<script>
jQuery(document).on('change', '.field-a input', function(){
jQuery('.field-b input').val(this.value).change();
});
</script>

And that’s all. The previous code populates the field in the second form with the field’s value in the first form.

If the forms are on different pages, you will need the commercial version of the plugin.

Best regards.

I’m a little confused as to how to apply the custom class name. The calculated field I’m trying to assign it to, already has the attribute “hide” added under “Add CSS Layout Keywords”.

I tried various combinations such as
hide, class:field-a
hide; class:field-a

Even tried #fbuilder .cff-calculated-field{display:none;class:field-a;} after looking at this page: https://cff.dwbooster.com/blog/2020/01/12/form-design#fields-class-names

None of these work to accomplish what I’m trying to. And only the first line allowed the field to stay hidden until calculate.

I’m sorry if this is very amateurish but I’m hoping you can guide me here

Hello @carnagelp

If you want to assign multiple class names to a field, separate them by blank characters.

Best regards.

To give you an idea of exactly what I’m trying to do, please see this:
https://www.fitgirls4life.com/testing-calculators/

Kindly fill in some dummy details for the first form and hit the Calculate button.

You’ll then see the calculated field titled “Your BMR is” show up with a value.

What I’m trying to do is to pass this value to the next form i.e “PCOS Macro Calculator” and assuming the first option selected in the drop down; either directly have the value ((BMRx0.2)/4) show up where it says “fieldname18” currently. Or have the calculation done in the field “Calculated value” which will be kept hidden and have that value passed on to where “fieldname18” is currently.

How do I do that?

So you mean put the following in Add CSS Layout Keywords:

hide class:field-a ?
OR
hide field-a ?

I tried the former too but didn’t work

Hello @carnagelp

It would be: hide field-a

Best regards.

Ok so I added the code you gave for HTML content in the first form. Named the field in form 1 as “bmr” and the one in form 2 as “carbs”

Then I tried the following:
1) Left “set equation” empty in the field of form 2 thinking the html code would directly pass the value to this field – Didn’t work.

2) Then set this equation (fieldname18*0.2)/4. fieldname18 is the id of BMR in the first form – Didn’t work.

3) Then tried (bmr*0.2)/4 since that’s the class name given to fieldname18 – Didn’t work either.

With each of the above, the field “Carbs” in form 2 turns out blank.

Not sure what I’m doing wrong here. This is the page where it’s being applied for your reference: https://www.fitgirls4life.com/testing-calculators/

Hello @carnagelp 

I've checked your forms. You have inserted an "HTML Content" field with the code:

<script>
jQuery(document).on(‘change’, ‘.bmr input’, function(){
jQuery(‘.carbs input’).val(this.value).change();
});
</script>

But there are no fields on the page with the class names <code>bmr</code> or 'carbs'. So the previous code is never evaluated.

Best regards.

Umm, there are.

Form 1 (bmr): https://ibb.co/TqLSs32

Form 2 (carbs): https://ibb.co/LvDyRb1

Hello @carnagelp

I don’t know where are the forms in the screenshots, but they are not on the page you sent me as a reference: https://www.fitgirls4life.com/testing-calculators/

Best regards.

It’s the same two forms that you see on the page.
The screenshots are taken from the field settings option of the respective selected fields that you can see there.

You can even see the labels “Your BMR is” and “Carbs” which are seen in the forms on https://www.fitgirls4life.com/testing-calculators/

Hello @carnagelp

I see the forms now. Your website lads cached versions of the pages.

I’ve visited your web page with the ?nocache=1 parameter, and I see the correct versions of the forms now.

If you are filling the value of the carbs field from the “HTML Content” field, you should use a different control, or if it is a calculated field, you must leave its equation empty.

Best regards.

I had already tried leaving the equation empty as mentioned before but it doesn’t work. The field still shows as blank.

I have removed the equation again now and you can see it still loads blank.

Also, what do you mean by “different control”?