• Resolved reginaplichta

    (@reginaplichta)


    Hi,
    I am using this form on a page built by Elementor and I have multiple issues.

    I set some button-styles in the fluent form’s preview & design section. If I choose to show my form via elementor widget, i lose all my settings that I made in the form’s editor, and it is not responding to any changes I make in the widget – just nothing happens. (I then reseted the design changes and tried to only use the widget’s styling – also not working)

    So then I tried showing my form using a shortcode. That works – kinda okay. Even that I have set the buttons not to have borders – they have a 1px border… I set my submit button to have no rounded corners – it has rounded corners… I really don’t see the reason of all this. I checked the errors log, and it mentions no conflict with any other plugins – I use Elementor’s Hello theme, nothing special. I have very few plugins, but I already tried turning them all off and see what happens – nothing changes really.

    Can you maybe give me a hint why this is happening? I use your plugin on other sites as well and I didn’t have these problems.

    And my other topic:

    I would like to customize my multi-step header, but I can’t make any design changes on it except the active color. I cannot change the number’s sizes, the title sizes, nothing. I tried using CSS, but it seems that I can’t find the right selector to change anything that way.

    My idea of the header would be like this (all the character sizes are the same that my page uses already):

    Is it even achiavable in any way? I would be okay using the style the form already has – but if I cannot change the sizes of the numbers and titles it just really doesn’t fit my site’s style.

    Thank you in advance for any help, I look forward to your respond. Have a nice day!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Abul Khoyer

    (@hellokhoyer)

    Hello @reginaplichta,

    Thank you for sharing your concern. It seems the style was overridden by the theme or page builder, as they typically take precedence. In such a situation, you may consider using the custom CSS for any modifications.

    Regarding customization, I managed to customize it and attempted to replicate it precisely as shown in the screenshot. Please use the provided CSS below in the custom CSS section of the form and adjust it according to your requirements. Please note that you may need to use the !important attribute to enforce certain changes.

    .fluentform .ff-step-titles li,
    .fluentform .ff-step-titles li:before {
    color: #000 !important;
    font-size: 26px;
    line-height: 20px;
    font-weight: 900;
    background: #eeeeee !important;
    border: none !important;
    padding: 10px 0;
    } .fluentform .ff-step-titles li:is(.ff_active),
    .fluentform .ff-step-titles li:is(.ff_active):before,
    .fluentform .ff-step-titles li:is(.ff_completed) {
    color: #0db1cb !important;
    } .fluentform .ff-step-titles li:is(.ff_active),
    .fluentform .ff-step-titles li:is(.ff_completed),
    .fluentform .ff-step-titles li:is(.ff_active.active),
    .fluentform .ff-step-titles li:is(.ff_active.active):before,
    .fluentform .ff-step-titles li:is(.ff_completed):before {
    color: #0db1cb !important;
    background: #eeeeee !important;
    } .fluentform .ff-step-titles li:after {
    top: 30px;
    } .fluentform .ff-step-titles li.ff_active:after,
    .fluentform .ff-step-titles li.ff_completed:after {
    background: #0db1cb !important;
    } .fluentform .ff-step-titles li:not(:last-child) {
    border-right: 10px solid #fff !important;
    }

    Hope this helps.

    Thank you.

    Thread Starter reginaplichta

    (@reginaplichta)

    Hi @hellokhoyer,

    I changed Elementor’s css style on buttons, but that did not change my button’s borders or rounded corners. But I added these codes to the form’s CSS section, and it worked:

    .ff-btn {
        border-radius:0px;
        border-style: none;
        border-width: 0px;
    }
    
    .ff-default .ff_btn_style {
        border-radius:0px;
    }

    I noticed that in the form’s styling, I set custom borders with no width added, but the style set to solid, which is why I think these codes didn’t work before.

    Also, thanks a lot for the code you provided for customizing my step-titles, it solved my problem and made it very easy to style that section.

    Thanks again, have a nice day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Multi-step header customization’ is closed to new replies.