Support » Plugin: Material Design for Contact Form 7 » demo problem ! can’t buy with this uggly design

  • Resolved rodrigomc2000

    (@rodrigomc2000)


    Hi,

    I’m thinking in buy this plugin, but I install the free version and customize just one field of my contact form 7 (the name field):

    And it already is not looking like your demo!

    How can I try this plugin and make the design works like your demo?
    [md-form spacing=”tight”]
    [md-text outlined=”yes” label=”Digite seu nome”]
    [text* your-name]
    [/md-text]
    [/md-form]

    Result in this: https://i.imgur.com/Wwjz7sW.png

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    Hi @rodrigomc2000

    Thanks for giving the plugin a go!

    It looks like your theme sets the HTML font size to a small value.

    Try adding this custom CSS under Appearance > Customize > Material Design Forms > Custom CSS.

    html {
        font-size: 16px !important;
    }

    It should fix your form, but may mess with the rest of your theme’s fonts. If it does, feel free to send me a link to your website and I’ll see if we can write some custom CSS to fix both issues.

    Thanks,
    Angus

    Hi,

    We add but the design still not looking like your demo! We add the code that you have in this page: https://cf7materialdesign.com/demos/all-field-types/ in our page and you can see difference in some fields…

    There’s no way to fix this?

    Thanks!

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @rodrigomc2000

    Your theme uses !important all throughout it’s CSS. That will make fixing these issues difficult, and using the customiser will also be difficult.

    Do you have access to change the child theme CSS? If so then I can tell you how to change it to make these issues go away.

    This is the file you’ll need to edit. It will probably be in your child theme folder.

    https://www.[yourwebsitedomain].com.br/?sccss=1

    Thanks,
    Angus

    Yes, I have access to this whole css !

    But we are using important because some css class are not applying without !important

    Thanks

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @rodrigomc2000

    If you just delete (or comment out) these sections, your issues should go away.

    input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="month"], input[type="week"], textarea, .chosen-container, .select2-container, .checkbox-sign, .radio-sign {
    	  color: #5f727f !important;
        background-color: transparent !important;
    }
    input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="month"], input[type="week"], textarea, .combobox-wrapper, #page .woocommerce .select2-container .select2-selection--single, .select2-container .select2-dropdown, .chosen-container-single .chosen-single, .select2-container .select2-choice, select.wpcf7-form-control.wpcf7-select {
    	  color: #5f727f !important;
        border: 1px solid #99a9b5 !important;
    }
    
    .wpcf7-form input.wpcf7-text, .wpcf7-form textarea {
        padding: 12px !important;
        padding-left: 20px !important;
        margin-top: 15px !important;
    }

    If you need those input styles in the first two rules for another part of your website, you can leave them there but prefix them all with .woocommerce (or some other class that specifies where to apply those styles).

    Thanks,
    Angus

    Hi,

    I delete this and now it looks like the demo! thank you, did you know why this email field is showing the field red yet if we fill a valid mail format: https://i.imgur.com/syUE6mn.png ???

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @rodrigomc2000

    I think it’s because you’ve got the field duplicated without Material Design styles below.

    Thanks,
    Angus

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.