Hello @anatomyinterior,
You can hide the progress bar and the skip button on a conversational form using custom CSS codes. You can use the following code snippet –
.vff-footer {
display: none;
}
.ff_conv_input .vff-animate {
display: none;
}
Thank you.
This code just hides the skip button, and not the progress bar/arrows for me. Inserted it like this
.fluent_form_10 {
.vff-footer {
display: none;
}
.ff_conv_input .vff-animate {
display: none;
}
}
URL to check: https://smartist-academy.de/?fluent-form=10
Also, how can I hide the key “A” and “B” (not just the hint) ? Would be really helpful if you had a CSS documentation, so I could search for myself
Hello @anatomyinterior,
You can try adding the important keyword to force the css style. So, to hide the footer progress bar update the code as –
.vff-footer {
display: none !important;
}
An to hide the Key “A” and “B” you can use the following CSS code –
.vff ul.f-radios li span.f-key {
display: none !important;
}
We do not have any CSS documentation. Basically, any standard CSS codes will work, you will just have to find the right selector.
Tryed adding all of this, still didn’t work – no matter where I put the css.
URL to check: https://smartist-academy.de/?fluent-form=10
Code I added in the integrations CSS tab
.fluent_form_10 {
.vff-footer {
display: none !important;
}
.ff_conv_input .vff-animate {
display: none !important;
}
.vff ul.f-radios li span.f-key {
display: none !important;
}
}
You can remove the class .fluent_form_10 and just add the following code directly in the custom CSS section of your Form –
.vff-footer {
display: none !important;
}
.vff ul.f-radios li span.f-key {
display: none !important;
}
I have tested it on our end and this code will work.
Regarding hiding the key “A” and “B”, from the next update the hide key hint option will also hide the “A” and “B” labels. So, you can use the CSS code for now as a workaround but after the next update you won’t need the CSS anymore to hide the key hints.
