Line break in Wizard headings

Forms Public Forms
1

Is it possible to insert a line break in Wizard headings?

I'm trying to achieve something like this - English with a translation below:

image

2

Hello @danNZ,

You can add text under the title of each wizard step using jQuery, like this:

var firstTab = $(fd.container('Wizard0').$el).find('.stepTitle')[0]
firstTab.after('New text')
3

Thanks for the reply. Beginner here, so having a bit of trouble with this. Needs to be included in fd.spRendered? And '.stepTitle' is presumably 'About this process' in my case? Appreciate if you could please assist further.

4

Hello @danNZ,

I'm sorry, let me provide more details.

Yes, you need to add the code under spRendered event, like this:

fd.spRendered(function(){
    var firstTab = $(fd.container('Wizard0').$el).find('.stepTitle')[0]
    //add new line of text
    firstTab.after('New text')
});

Where Wizard0 is the internal name of the wizard container and stepTitle is the name of the CSS class of steps titles.

find('.stepTitle')[0] - in this part of the code, 0 is the index of the step. Note, that the count starts from 0, thus find('.stepTitle')[0] is the title of the first step.

5

Sorry to say, still not working for me. Do I need to do something specific for CSS?

6

Hello @danNZ,

Please share the code that you are using.

Are you getting any errors in the browser console (F12) on form load? Could you please share the screenshot.

Thank you!