Form label sub-titles

For example, the Volume correction field should have Volume correction, and then in smaller text underneath the title, it should have the extra information.

Hello!

So you would like an additional text below the label (with an smaller font i guess)? If so that is not possible in the designer but i think it can be done with some javascript. If this is what you need i can try to build this javascript for you =).

Regards!

Hi Edgar,
Sounds interesting.
Can you send more info on how this arrangement will work?
Cheers,
Richard
[email protected]
Richard dot eden at switchwise do co do uk

Sure a javascript(which you can add in the javascript tab of your form) should work:

  //AUTO GENERATED CODE, DO NOT DELETE
(function(){var javaObject={

//YOU CAN PUT YOUR CODE BELLOW

//jQueryFormReference:A jquery reference of the loaded form
AfterFormLoaded:function(jQueryFormReference){
rnJQuery('#rnField46 .rednao_label_container').append('<label style="display:block;font-size:12px;color:#5f5f5f;font-style:italic;">Test description</label>');
},

//jQueryFormReference:A jquery reference of the loaded form
//formData:An object with the information that is going to be submitted
BeforeFormSubmit:function(formData,jQueryFormReference){
    //Here you can put code that you want to be executed before the form is submitted
}

//MORE AUTO GENERATED CODE, DO NOT DELETE
}; return javaObject;})    

all you need to do is change rnField46 for your field id (which you can find in the advanced tab of each field settings). If you want to add many descriptions like this you can repeat that line to add more than one description like this:

rnJQuery('#rnField46 .rednao_label_container').append('<label style="display:block;font-size:12px;color:#5f5f5f;font-style:italic;">Test description</label>');
rnJQuery('#rnField47 .rednao_label_container').append('<label style="display:block;font-size:12px;color:#5f5f5f;font-style:italic;">Test description 2</label>');

Regards!

Hi Edgar,
I’ve added the first section above in the Javascript and changed the field to 12 but no showing any change. Looks as though it should do the job though but not quite working.
https://www.switchwise.co.uk/gas-cost-calculator/
Thanks,
Richard

Ah! It does appear on the form but not online. Still trying.

I’ve got one field showing online now. Still trying.

Success! Your code works perfectly! Good result! Thank you!!

Hi Edgar,

Everything except 1 bit works very well. But one field sub title is being obstinate and I can’t figure out why.

Here’s the code and filed 10 doesn’t show on the form.

//jQueryFormReference:A jquery reference of the loaded form
AfterFormLoaded:function(jQueryFormReference){
rnJQuery(‘#rnField10 .rednao_label_container’).append(‘<label style=”display:block;font-size:12px;color:#5f5f5f;font-style:italic;”>This number 2.83 is to convert from imperial ft3 units to metric m3 units. For m3 meters, this number is 1.</label>’);
rnJQuery(‘#rnField11 .rednao_label_container’).append(‘<label style=”display:block;font-size:12px;color:#5f5f5f;font-style:italic;”>This corrects the volume of gas to account for temperature and pressure – per gov.uk website</label>’);
rnJQuery(‘#rnField12 .rednao_label_container’).append(‘<label style=”display:block;font-size:12px;color:#5f5f5f;font-style:italic;”>Measure of the heat energy – The default is National average. This can be adjusted as per your bill.</label>’);
rnJQuery(‘#rnField13 .rednao_label_container’).append(‘<label style=”display:block;font-size:12px;color:#5f5f5f;font-style:italic;”>Convert to kWh by dividing by 3.6. This factor is prescribed in the Government Gas Regulations.</label>’);
},

and here’s the form link: https://www.switchwise.co.uk/gas-cost-calculator/

Any suggestions?

Thanks,

Richard