Lehel Szilard Marosi

Hey @yosmc,

Thank you for the suggestions,

1. Is only applied to a logged-in user, because we added a go to styling button on the top on each form, if there is one active.

2. As for the second one, we will take this into consideration to remove it in our next small release.

Best Regards,
Lehel

Hey @phrontis,

Our add-on only adds a look to the contact form 7 plugin, so please try on their support.
This add-on’s main purpose is to style the forms.

Regards,
Lehel

Greetings,

You can achieve that by setting the width of your inputs with a max of 50% of the current width.

Greetings @affordablewebsitesdenvercom,

We made this add-on to be customizable on multiple forms. Was your form on the same page?
Can you send us an example?

Best Regards,
Lehel

Hello @sharon-jackson,

I think you have posted your question on the wrong forum, our plugin is an add-on for the great Contact Form 7 plugin.

Here is the support forum for that plugin: https://www.ads-software.com/support/plugin/contact-form-7

But also if the following answer helps you in any way, we were glad that we could help you.

The answer to your question is here: https://contactform7.com/setting-up-mail/

If you don’t add all the shortcodes used in your mail tab of your CF7 form, it won’t be sent to your recipients as emails.

Best Regards,
Lehel

You can read more about floating elements here:

https://css-tricks.com/almanac/properties/f/float/

After I added the CSS snippet to my browser your Form looks like this:

https://www.screencast.com/t/GT7brWp1y1rW

Hello @itmonitor,

We have verified your page and styling setup on that page for your Contact Form 7 form and noticed that there are some .reponsiveforms wrappers which have float: left styling, which makes the elements not to fill the whole main container. This is the reason why the background does not cover the whole form.

To resolve this issue, you could do the following:
– if you can edit the HTML structure please add a
<div style="clear:both"></div> after the last reponsiveforms div.
– if you can’t edit the HTML structure, than you can add the following CSS snippet to our CSS editor(looks like this: https://ps.w.org/contact-form-7-style/trunk/screenshot-6.jpg?rev=1834625) :

.cf7-style-5982 .reponsiveforms {
    display: inline-block;
    float: none !important;
    width: 32%;
}
.cf7-style-5982 .reponsiveforms:last-of-type {
    width: 100%;
}
.cf7-style-5982 .reponsiveforms:last-of-type p {
    text-align: right;
}

Best Regards,
Lehel

Greetings @demenyzo and @seanrnicholson,

We have updated the plugin, please feel free to upgrade your version too, and please give us a feedback. Did the increased I/O gone to only one reading of the file?

Best regards,
Lehel

Hello @doriancioban,

We have created an update, which contains the option to deactivate the Contact Form 7 Style from the adminbar.

If you enjoy our work, please feel free to give us a five star rating or consider donating.

Hello @herofarm,

Thank you for the great review. That was the main reason we created this add-on so the froms used by the community could look a little better or even aweseome.

Hello @jgraham719,

Can you please give us a link to the page where the form is present and you want to change the look and feel of the checkboxes?

Best Regards,
Lehel

Greetings @wrathyimp and @globalluxurysuites,

Unfortunately, what you try to achieve is impossible with only HTML and CSS.
You could try the following solution for this: https://stackoverflow.com/questions/29292520/red-asterisk-directly-beside-placeholder-in-input-box
The main idea in that solution is to add a css pseudo element and position it with absolute positioning and try to style that separately. The problem with this solution is that the pseudo element will remain visible even the input is focused, so you should hide that element on input focus. You can achieve this behavior with jQuery, by adding a “focus” event on that form input, where you will hide the focus element. This part is a bit tricky, because hiding a :pseudo element can be done only with adding a class to it’s parent which has “display:none”.

Best Regards,
Lehel

Greetings @kevins1987,

If you add the following styling snippet to the Manual CSS editor of our plugin, the problem will be gone.
The manual CSS editor should look like this: https://ps.w.org/contact-form-7-style/trunk/screenshot-6.jpg?rev=1776662

body .twenty-fifteen-pattern {
    padding-top: 0 !important;
}

Best Regards,
Lehel

Hey @doriancioban,

This feature currently is not available, but we will add a settings option for this and will notice you, when it is added to the stable version of this add-on.

Thank you for this suggestion,
Lehel

Hello @boertje,

1. Can you please give us a screenshot?

2. Can you please check if you have any Javascript errors in your browser’s console?

Regards,
Lehel