CODEWITHSUNDEEP
csswordpresscontact-form-7
Bern
Bern

Reputation: 65

Inline align CF7 fields

Working on CF7 form, but have one issue that i need help to resolve. I want label and field to be into same line. I tried already to put display:inline into class CSS but doesn't make any change:

div.register-form {
  display: inline;
  width: 50%;
}

and this is entire code from my CF7 form:

<div class="register-form">
  <label> Name*
        [text* name-418] </label>

  <label> Last name*
        [text* lastname-418] </label>

  <label> Address*
        [text* address-418] </label>

  <label> Postal Code*
        [text* postalcode-418] </label>

  <label> City*
        [text* city-418] </label>

  <label> Country*
        [select* country-736 "United Kingdom" "Austria" "Belgium" "Bulgaria" "Canada" "Croatia" "Cyprus" "Czech Republic" "Denmark" "Estonia" "Finland" "France" "Germany" "Greece" "Hungary" "Ireland" "Italy" "Latvia" "Lithuania" "Luxembourg" "Malta" "Mexico" "Netherlands" "Poland" "Portugal" "Romania" "Slovakia" "Slovenia" "Spain" "Sweden" "United Arab Emirates" "United Kingdom" "United States of America"] </label>

  <label> Email*
        [email* email-638] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Batch Number*
        [number* batchnumber1-616] </label>

  <label> Batch Number 2*
        [number* batchnumber2-616] </label>

  <label> Batch Number 3*
        [number* batchnumber3-616] </label>

  <h3>Workshop Information</h3>

  <label> Id/Name*
        [text* idname-418] </label>

  <label> City*
        [text* workshopcity-418] </label>

  <label> Postal Code*
        [text* workshoppostalcode-418] </label>

  <label> Phone*
        [tel* telephone2-531] </label> [acceptance acceptance1-220] Yes, I agree to the terms and conditions of the Warranty and Data Protection Policy.* [/acceptance] [acceptance acceptance2-220] I give my consent to my personal data being processed
  for the execution of commercial, promotional and/or advertising shipments, including communications by email. [/acceptance]

  <small>* Mandatory Fields</small> [submit "Register"]
</div>

I want to look like this one Any help here?

Upvotes: 1

Views: 3510

Answers (3)

Aurovrata
Aurovrata

Reputation: 2279

Use the Smart Grid-Layout Responsive Design extensions for Contact Form 7.

It has a UI editor that allows you to design a form as a set of columns in a row, with each cell containing a field.

Upvotes: 0

Shado
Shado

Reputation: 135

You can do it with HTML and CSS

In Contact Form 7 form box add your HTML. Then in your CSS style for sired effect.

<div class="col-4"><label>Name*</label></div>
<div class="col-8">[text* name-418]</div>

Upvotes: 1

m4n0
m4n0

Reputation: 32285

You just need to follow the code of the Compac site.

.wpcf7 span.wpcf7-form-control-wrap {
    float: right;
    margin-top: -30px;
    position: relative;
    width: 80%;
    border-bottom: 1px solid grey;
}

Remove the commented

.wpcf7-form label {
    text-transform: uppercase;
    font-size: 13px;
    color: #1a1a1a;
    display: block;
    position: relative;
    /* padding-bottom: 15px; */
    /* border-bottom: 2px solid #e5e5e5; */
}

Output:

enter image description here

Upvotes: 1

Related Questions