Extending/overriding CF7 classes

  • Hello. I am building a site with the latest Understrap, which uses BS5.

    I am using contact-form7 for forms. In a previous Understrap there was a contact-form7.scss file in the sass/theme folder that extended the CF7 classes. So that a submit button got the BS .btn and .btn-primary classes. Like so:

    // submit button, inherit .btn and .btn-primary classes.
  input[type=submit] {
    @extend .btn;
    @extend .btn-primary;
  }

    I copied this contact-form7.scss file to my theme folder and import it from my child-theme.scss
    This seems to work (the file gets imported) however the submit button in my forms do not get the BS classes.

    What am I missing here?
    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • We still have the import for the Contact Form 7 styles: https://github.com/understrap/understrap/blob/main/src/sass/theme/_contact-form7.scss – are you using a child theme?

    Another option is to use the class: feature in the Contact Form 7 setup:

    [submit class:btn class:btn-primary “Submit”]

    Thread Starter eagerbob

    (@eagerbob)

    I am indeed using a child theme.
    We still have the import for the Contact Form 7 styles:

    It was not in my install, don’t know why. I added it myself in the sass/theme folder of my child-theme. The thing that confused me, I think, is that you have to fill in the required fields to get rid of the “disabled” style. The disabled style seems to draw the button as an outline, instead of the normal Bootstrap disabled style.

    Another option is to use the class: feature in the Contact Form 7 setup:

    Ah, I never used that. Yes that works. Although my button still shows as an outline. But I’ll figure that out.

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Extending/overriding CF7 classes’ is closed to new replies.