Wordpress Question posted in
The official Wordpress documentation can be found here.

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:

enter image description here

Currently the form looks like this.

I want to achieve this design:

enter image description here

How can I achieve that?

I tried CSS modification but this didn’t work for me.

Tags:

2

Answers


  1. 0

    Try this in you css file:

    .wpcf7-form p {
  display: flex;
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search