WordPress Contact Form 7 – Display Label and input field on the same line

I created a form using the Contact Form 7 plugin. I replaced the label with an image. Now I want to display the label and the input field on the same line. I am getting this result: Currently the form looks like this. I want to achieve this design: How can I achieve that? I tried CSS modification but this didn't work for me.

Comment (2)

Jese Leos

August 19, 2024

Verified user

Try this in you css file: .wpcf7-form p { display: flex; }

Jese Leos

August 19, 2024

Verified user

Can try this: <label class="custom-field" for="namefield">Your Name [text* your-name id:namefield]</label> or if use below label: <div class="form-field"> <label class="custom-field" for="namefield">Your Name</label> [text* your-name id:namefield] </div> CSS: .form-field { display: flex; align-items: center; margin-bottom: 15px; }

You’ll be in good company