Contact Form 7

Hi, Vlad!
I need your support again.
I have installed the Contact Form 7. It is all ok in the whole, but I would like to tune it a bit ))
Here is the screenshot. Can I make the same form as in the demo?
I mean:

  1. the same width. Not full width for each field like on my screenshot ))
  2. How can I move the description foe each field right into the field, like in your demo?

Thanks in advance!


Have a look at this chapter in the documentation at no. 3. The template we’re using for the demo is already available for you.

Got it, thank you!
But it looks not as it has to be ))
How can I correct it?

Could you post a link to your website?

Here it is:
m e n z c a f e . m c d i r . r u / k o n t a k t y /
without spaces. If I post normal link, my post does not appear.

This is only draft with temporary domain.

You’ve added <br> tags before each of your input fields. Remove them and the form will look exactly like the demo.

doesn’t work.
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>

<p>Ваш e-mail (обязательно)<br />
[email* your-email] </p>

<p>Тема<br />
[text your-subject] </p>

<p>Сообщение<br />
[textarea your-message] </p>

<p>[submit “Отправить”]</p>

<p>Ваше имя (обязательно)
[text* your-name] </p>

<p>Ваш e-mail (обязательно)
[email* your-email] </p>

[text your-subject] </p>

[textarea your-message] </p>

<p>[submit “Отправить”]</p>

I still see <br> tags on your site. You need to remove them or see if you have a caching plugin and clear the cache from the plugin’s options.

Sorry, I was wrong. The Contact Form 7 temlplate on my site is:

<div class=“col-md-6”>
<p>[text* your-name placeholder “Ваше имя”]</p>
<p>[email* your-email placeholder “Ваш E-mail”]</p>
<p>[text your-subject placeholder “Тема”]</p>
<div class=“col-md-6”>
[textarea your-message placeholder “Сообщение” ]
<p>[submit “Отправить”]</p>

But I just don’t see anything like <br>

I took it from here

I don’t know, they are outputted on the page from somewhere, that’s why it doesn’t look like the demo.
If you really can’t find them then do this to hide them:

.wpcf7 br {
   display: none;

Vlad, excuse me for my bad computer literacy ))
I just don’t know where should I paste this code.

I went to your link - chapter in the documentation at no. 3.
A link there.
I saw the code and copy-pasted it. It contains no br tag.

Use that code in a custom CSS plugin.

It does not contain a br tag, yes, but nevertheless it is being outputted. I’m guessing the contact plugin adds it automatically. But use the code I gave you in a custom CSS plugin and it should be fine.

Cool, Vlad! You are a real wizard! ))
Thanks a lot!

This is super. Helped me too!