CODEWITHSUNDEEP
htmlcsswordpress
vladxvlad
vladxvlad

Reputation: 53

Contact form 7 - change style

Hi guys I need some help with Contact form 7 now all input areas are vertically in one column , is it possible to make one input area to the right side,I have attached the links to screenshots? How i could do this in Wordpress?

How it looks now: https://ibb.co/MMKnf6L

How it should looks(right side one input area): https://ibb.co/vJxJ7kk

WP code

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Upvotes: 1

Views: 298

Answers (1)

Arno Tenkink
Arno Tenkink

Reputation: 1528

Yes! With some CSS magic you can get any layout you want. So even this layout can be achieved with some code. I used some flexbox code to make the structure.

More about flexbox can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Demo

I replaced the shortcodes with HTML to make my demo more visible. Please replace the inputs with your own CF7 shortcodes.

.prefix-form-container {
 display: flex;
}

.prefix-column {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.prefix-label {
  display: block;
}

/* demo code */
input, textarea {
 width: 100%;
}
<div class="prefix-form-container">
  <div class="prefix-column">
    <label class="prefix-label"> Your Name (required)
      <input type="text"> </label>

    <label class="prefix-label"> Your Email (required)
      <input type="text"> </label>

    <label class="prefix-label"> Subject
      <input type="text"> </label>
  </div>
  <div class="prefix-column">
    <label class="prefix-label"> Your Message
      <textarea></textarea> </label>
  </div>
</div>
  <div>
    <button type="submit">Send form</button>
  </div>

Upvotes: 2

Related Questions