GusRuss89

Hi Scott,

Make sure your button is always the smallest it can be (1/12 desktop, 1/8 tablet, 1/4 mobile). That should be all that’s missing I think. You may need to adjust the margin sizes I gave you depending on your button width/height.

Thanks,
Angus

Hi Scott,

The way you’ve done it looks ok. If you want to overlay the button entirely you’ll need to make sure you put right padding on the email input or the text will be obscured by the button.

If you want to do the full overlay, try this. You can adjust the IDs and class names for better selectors if you like.

@media (max-width: 479px) {
  #wpcf7-f234-p173-o1 .cf7md-submit {
    grid-column-start: 4;
  }
  #wpcf7-f234-p173-o1 .submit1 {
    margin-top: -98px;
  }
  #wpcf7-f234-p173-o1 input[type="email"] {
    padding-right: 100px;
  }
}

Thanks,
Angus

The latest release of the plugin fixes this bug. You may need to force-refresh on your form page to be able to see the admin notice about validation.

The latest release of the plugin fixes this bug. You may need to force-refresh on your form page to be able to see the admin notice about validation.

Hi @scott74

It looks like you’ve updated it to drop down to the next line on mobile. That’s probably a better solution because otherwise the email input becomes quite short.

If you still want to get them both on the one line, the issue will be fixed in the next release (you actually made me realise there is a bug that stops mobile sizing from working).

Thanks,
Angus

Hi @itmonitor

Thanks for using the plugin!

The label text is supposed to be smaller than the text in the fields – it’s not a bug.

However, you can change it if you like, with some custom CSS. Add this under Appearance > Customize > Material Design Forms > Custom CSS.

#cf7md-form .cf7md-label--static, #cf7md-form .cf7md-help-text, #cf7md-form .wpcf7-not-valid-tip {
    font-size: 0.875em;
    letter-spacing: 0;
}

Thanks,
Angus

Hi @lhvcfamily

Thanks for using the plugin ??

I’m not sure if it will work with the conditional fields plugin or not. If it works on your front end but not in the preview, there must be something preventing the preview from executing the conditional logic.

I’ll add it to my to-do list to support conditional logic in the preview.

Thanks,
Angus

Hi @vaskrupp

You can do this with some custom CSS. Add this under Appearance > Customize > Material Design Forms > Custom CSS, then play with the pixel values to get it to your liking.

#cf7md-form .mdc-button {
    font-size: 20px;
    padding: 20px 40px;
    height: 75px;
    width: 100%; /* Delete this line if you don't want it to be full-width */
}

Thanks,
Angus

Hi @usat009

You can target those labels using this CSS selector:

#cf7md-form .cf7md-label--static

As an example, add this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

#cf7md-form .cf7md-label--static {
  color: black;
}

Thanks,
Angus

Hi @usat009

Adding classes using the CF7 tags is the intended method – it’s perfectly fine to do that.

Regarding md-raw, the purpose of that tag is to wrap arbitrary html. To add your labels with bold text, you could do something like this:

[md-raw]
<h3>Your Information</h3>
[/md-raw]

Note that headings would be more appropriate than labels here – a label us meant to be associated with a single form element.

The other thing you could do – because you have the pro version – is to use the [md-card] feature to separate your field groups. E.g.

[md-card title="Your Information"]
... subject, name etc
[/md-card]
[md-card title="Device Information"]
... device, serial, etc
[/md-card]

Here’s an example of what that might look like, including source code – https://cf7materialdesign.com/demos/field-groups/

Thanks,
Angus

Hi @usat009

Thanks for purchasing! If you have the pro version you have access to priority support via email. It’s forbidden by WordPress to provide support for paid plugins on this forum.

Please send an email to the support address listed in your WordPress admin area (on the Contact > Material Design page) and include a link to your website – I will provide you with some custom CSS if necessary to fix your issue.

Thanks,
Angus

Ah I see – the issue is that your theme loads pages dynamically with JavaScript.

All you need to do is hook in to the page load and call window.cf7mdInit() after the page transition. Whether your theme makes this easy or not I don’t know, but it should be possible because lots of plugins that rely on JavaScript will have this same issue.

Could you contact your theme’s support and refer them to this support thread?

Worst case – if the theme provides no way to hook into page transitions, you would have to disable ajax page loading to allow the material design JavaScript to load.

Thanks,
Angus

Hi @nyceone1

Are you saying that 1) they don’t load at all on the first page load, and you have to refresh to see them? Or are you saying that 2) as the page is loading, the labels are invisible for a while?

2 is expected, because the plugin uses JavaScript to manipulate the contact form 7 html. To reduce the impact of this flash of unstyled content, you can use caching and minification plugins to speed up the loading of your website.

If it’s 1, then that’s unexpected and I will need to help you debug – but I haven’t been able to replicate that behaviour on the link you sent.

Thanks,
Angus

Hi @nyceone1

What browser are you using? It seems to work properly for me in Chrome.

Thanks,
Angus

Hi @majdalkouifi

Thanks for using the plugin, I’m glad you like it!

Unfortunately there is not currently any RTL support. I’ve looked at adding it before, and it’s still on my list, but it’s not yet been started.

I’m really sorry about that.

Thanks again,
Angus