Contact form w 2 columns

Hi!

I copied some code from another thread here to create 2 columns in my wpcf7. How do I decrease the space under NAMN and ÖNSKAD OPTIMERING and the inner gutter? I want it to look like the second image. The gap HTML didn’t work. I want less space.

Site:https://torqueup.se/#kontakt

<div class="x-column x-sm x-1-2">
<label> [text* your-name id:your-name watermark "Namn *"] 
</label>
<label> [text* your-email id:your-email watermark "Epost *"] 
</label>
</div>

<div class="x-column x-sm x-1-2 mrn">
<label> [text text-optimering id:text-optimering watermark "Önskad optimering"]
</label>
<label> [text text-regnr id:text-regnr watermark "Registreringsnummer"]
</label>
</div>

<div class="x-column x-sm x-1-1">
<label> [textarea your-message id:your-message watermark "Meddelande"]
</label>
[submit "Skicka"]
</div>

Hello @Lobsterass,

Thanks for writing in!

To resolve your issue, please have your code updated and use this instead:


<div class="x-container man marginless-column">
  <div class="x-column x-sm x-1-2 prs">
    <label> [text* your-name id:your-name watermark "Namn *"]</label><label> [text* your-email id:your-email watermark "Epost *"] </label>
  </div>

  <div class="x-column x-sm x-1-2 mrn">
    <label> [text text-optimering id:text-optimering watermark "Önskad optimering"]</label><label> [text text-regnr id:text-regnr watermark "Registreringsnummer"]</label>
  </div>
</div>


<div class="x-container man">
  <div class="x-column x-sm x-1-1">
    <label> [textarea your-message id:your-message watermark "Meddelande"]</label>
    [submit "Skicka"]
  </div>
</div>

We would love to know if this has worked for you. Thank you.

1 Like

GREAT! Thank you. Could we also decrease current the gutter gap from 50px to 10px? Please see attached image.
<3

Hello @Lobsterass,

Thanks for updating the thread. :slight_smile:

Please update the code with following:

<div class="x-container man marginless-column">
  <div class="x-column x-sm x-1-2 prs" style=" margin-right: 0; width: 50%; ">
    <label> [text* your-name id:your-name watermark "Namn *"]</label><label> [text* your-email id:your-email watermark "Epost *"] </label>
  </div>

  <div class="x-column x-sm x-1-2 mrn" style=" width: 50%; ">
    <label> [text text-optimering id:text-optimering watermark "Önskad optimering"]</label><label> [text text-regnr id:text-regnr watermark "Registreringsnummer"]</label>
  </div>
</div>


<div class="x-container man">
  <div class="x-column x-sm x-1-1">
    <label> [textarea your-message id:your-message watermark "Meddelande"]</label>
    [submit "Skicka"]
  </div>
</div>

Let us know how it goes.

Thanks.

1 Like

PERFECT! Thanx so much!
<3

Glad to hear that. :slight_smile:

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.