Form Layout Anpassung

User

Persönliche Angaben

Firma

Vorname

Nachname

Straße / Nr.

PLZ

Ort

Telefon

E-Mail-Adresse

Fahrzeugangaben

Hersteller

Erstzulassung

Maße

Weitere Ausstattung

Preisvorstellung

Bemerkung

Bilder hochladen

Hier können Sie Bilder und Dokumente hochladen (max. 10 MB).  Unterstützte Formate: PDF, JPG, PNG, …
*Pflichtfeld

Zustimmung zur Datenverarbeitung, Datenschutz, etc.

Anfrage absenden

break form in two columns in desktop fields under Persönliche Angaben in one column and under Fahrzeugangaben in one column

Assistant

To break the form into two columns for the fields under "Persönliche Angaben" and "Fahrzeugangaben" in your Elementor form, you'll need to adjust the HTML structure and apply appropriate CSS styling. Here's how you can modify your existing code:

### HTML Modification

You can wrap the fields in a “ with a class for column layout. Here's how to modify the existing code:

“`html

Persönliche Angaben

Firma

Vorname

Nachname

Straße / Nr.

PLZ

Ort

Telefon

E-Mail-Adresse

Fahrzeugangaben

Hersteller

Erstzulassung

Maße

Weitere Ausstattung

Preisvorstellung

Assistant

-label">Zusätzliche Informationen

### CSS Styling

To ensure the columns display correctly, you can add custom CSS. You might want to include this in your Elementor Custom CSS section or your theme's stylesheet:

css
.elementor-columns {
display: flex;
justify-content: space-between;
}

.elementor-column {
flex: 1;
margin-right: 20px; /* Adjust spacing as needed */
}

.elementor-column:last-child {
margin-right: 0; /* Remove margin for the last column */
}
“`

### Summary
This modification wraps the fields under "Persönliche Angaben" and "Fahrzeugangaben" in separate columns, allowing for a two-column layout. The CSS will ensure that the columns are displayed side by side, and you can adjust the `margin-right` value to control the spacing between the columns. Adjust the structure and styles as necessary based on your design requirements.

Leave a Comment Cancel