GusRuss89

This is what I see on your url.

Screenshot https://imgur.com/gallery/2RfBWdt

If you see that black box on your front end then it is definitely not an issue with the live preview plugin. Live preview just shows your form on the back end, it doesn’t edit it.

This support question would be better directed to contact form 7 support.

Thanks,
Angus

What do you see in the live preview window? Can you screenshot it?

Hi @akshaykuri

Your problem doesn’t look related to the live preview plugin.

The page you linked shows that either contact form 7 is not installed, or you’re trying to display a form that doesn’t exist.

Thanks,
Angus

Hi @smiklau

It looks like your website is using the Roboto font, which is also the default Material Design font. That’s why you’re seeing only one font option (usually it shows all the fonts used in your theme).

If you want the font to be lighter, you could try adding this CSS rule:

* {
  -moz-osx-font-smoothing: grayscale;
}

Let me know if that doesn’t do what you were hoping.

This plugin costs a lot but can do almost nothing. No offense but thats the true

The plugin adds Material Design to your forms for free. The premium version lets you integrate it into your theme better with custom colours, fonts and layouts, but it still sticks to Material Design guidelines. It is not meant to be a “design your own contact form” plugin and is not advertised as such. If you have any ideas for further customization, please let me know as I’m always keen to improve the plugin ??

Thanks,
Angus

Hi @denniswitt ,

Thanks for using my plugin!

Could you please post your form code?

Thanks,
Angus

Hi @fabrikka

Sorry, when I said I need to see your front end I meant a live version (so that I could inspect your CSS). Is it possible for you to send me a link rather than a screenshot? I will not need any kind of admin access.

Thanks,
Angus

Hi @fabrikka

Sorry for the late reply.

I can’t help with styling unless I can see your website (just the front end). If you can send me a link to your form then I’d be happy to address your issues.

Thanks,
Angus

Hi @lawipac

So sorry for the late reply. You should know for the future, that since you have purchased the premium version you are actually able to receive priority email support. Details can be found in the premium version.

The file field should definitely show a notice for invalid file types or missing files. To make it required, you just need to edit your CF7 file tag from [file …] to [file* …].

Thanks,
Angus

Hi @webwow

The plugin actually creates a page template specifically for previewing your form. If you’re seeing your home page, it means your theme is not using the traditional WordPress template hierarchy and unfortunately that means the plugin won’t work for you. Sorry about that.

If you’re working on big forms and really want the live preview, you can activate the default theme temporarily while developing the forms. You won’t see your theme’s styles, but you’ll still be able to preview the field types, messages, etc.

Thanks,
Angus

Hi, no that’s not possible sorry, you can only add icons to the field label, not the individual options.

Thanks,
Angus

Is that all the page says?

There may just be some temporary downtime with Freemius. If you try again in an hour or so it should hopefully work again. Please let me know if it doesn’t.

Thanks,
Angus

Hello @taylan407

Could you please provide a bit more information? What have you done, and what result are you getting?

Thanks,
Angus

Hi @aurelienghose

No that’s not normal. I can’t imagine why your form would disappear actually, can you try disabling your other plugins and see if it still occurs?

Thanks,
Angus

HI Scott,

It looks like you’ve updated the icon to float down the page, which is a nice touch.

If you still want to hide it then I would suggest hiding the icon with JavaScript rather than trying to get it inside the form. The email form needs to be exactly the size of the input for the button positioning to work correctly.

Thanks,
Angus

Hi Scott,

The issue with the text going behind the button on mobile is because of your min-width rule in this media query.

@media (max-width: 959px) and (min-width: 481px) {
  #wpcf7-f234-p173-o1 input[type="email"] {
    padding-right: 100px;
  }
}

If you get rid of and (min-width: 481px) that should be fine.

To ensure the button is always positioned correctly, we can take a slightly different approach.

1. Remove the CSS I gave you previously (apart from the right padding one mentioned above).

2. Add this CSS

#wpcf7-f234-p173-o1 .mdc-layout-grid {
    position: relative;
}
#wpcf7-f234-p173-o1 .cf7md-submit-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 16px;
}
#wpcf7-f234-p173-o1 .cf7md-spinner {
    position: absolute;
    top: 15px;
    right: 110px;
}

3. Move your explanation text to outside the [/md-form] tag.

Thanks,
Angus