Text questions in the CF7 overlap [how to word wrap?]

Author Posts

mandan November 28, 2013 at 1:47 am

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 am trying to use microloader and Cf7 White Beauty 1.1 to create a contact form.
However when I try to enter something like
Please enter your name as NAME SURNAME (Required) [text* your-name]
the text overlaps onto the text box .

What I would like to do is the text to wrap to second line and the input box to be in the middle of these. However the themes don’t help.

Is it possible for the text to wrap?

Thanks

Sebastian November 28, 2013 at 10:47 am

Hi there,

It would help if you could provide me with a link to your website. It may not be possible. Another alternative would be to try to reduce the length of the label. Use an asterix (*) instead of the word “Required” and maybe just say “Enter FULL NAME*”.

Cheers,

Seb

mandan November 28, 2013 at 11:03 am

Hi,
The website is under development so these forms are not visible.
The problem I am facing is with Name I can use your suggestions but there are other questions that are long and need to be written completely and as they over lap the text entry box it doesn’t look user friendly. Any help would be appreciated.

Sebastian November 28, 2013 at 11:24 am

I recommend trying the demo version of Microthemer, double-clicking on the text inputs, and setting the value of float (in the behaviour section) to “none”.

https://themeover.com/microthemer-free-trial/

You can learn how to use Microthemer by watching the demo videos here:https://themeover.com/support/microthemer-tutorials/

If you can get the hang of Microthemer you will have much more control over your form. But if you want a quick fix you might get what you want by adding the following CSS code to your style.css file.

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
float:none !important;
}

Cheers,

Seb

You must login or register to reply to this topic.