CF7 Light Beauty 1.1 breaks CF7 datepicker plugin

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 6 years, 10 months ago.

Author Posts

racingbob

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

I had a great Contact Form 7 form created, using the Contact Form 7 Datepicker plugin to make user entry of dates slick and easy.

All I needed was to make the form look nicer so installed CF7 Light Beauty Plugin Pack and Microloader. It certainly looks good but now when clicking in the date field, no datepicker appears.

Any thoughts anyone? Cheers in advance


racingbob

I disabled the theme in the Microloader settings but it didn’t fix it

I disabled the microloader plugin and datepicker started working.

Hmmmm


Sebastian

Hi there,

Thanks for bringing this to our attention. It sounds like there is a javascript conflict between Microloader and the date picker plugin.

I will look into a solution to this problem. Is this the plugin you’re using? http://wordpress.org/extend/plugins/contact-form-7-datepicker/

Cheers,

Sebastian


racingbob

Hi Sebastian – yes that’s the plugin.

Hope you can find a fix – the themes you’ve developed are fantastic!

Bob


Sebastian

Hi Bob,

I’ve fixed the issue now. The fault was with Microloader, not the date-picker plugin. You can download the fixed version (1.4.1.1) from WordPress here: http://wordpress.org/extend/plugins/microloader/

Cheers,

Sebastian


racingbob

This is great, thank you for your prompt response – it works well. Now I just need a way to make the form look good in a narrow space. The labels need to sit above each field for this to work.


Sebastian

Hi Bob,

You can either purchase Microthemer so that you can change the styles via the Microthemer UI, or you can add the following CSS to your style.css stylesheet:

form.wpcf7 textarea,
form.wpcf7 input[type="text"],
form.wpcf7 select,
form.wpcf7 input.wpcf7-submit[type="submit"] {
margin-top:0;
float: none;
}
form.wpcf7 .wpcf7-list-item {
position:static;
float: none;
}

That should make the form fields move below the labels.

Cheers,

Sebastian

You must login or register to reply to this topic.