Elementor Form Erstellung

make elementor form like attached

To create an Elementor form resembling the design in the screenshot, follow these steps:

### 1. **Create a Two-Column Layout**
– Edit the page with Elementor.
– Add a new section with a **two-column structure**.
– Adjust the column width ratio (e.g., 50% each) to align the "Persönliche Angaben" and "Fahrzeugangaben" sections.

### 2. **Add Headings**
– Drag the **Heading widget** into each column.
– Set the text to "Persönliche Angaben" for the left column and "Fahrzeugangaben" for the right column.
– Style the headings (font size, weight, and spacing) according to the screenshot.

### 3. **Add Form Fields**
– Drag the **Form widget** into each column and customize the fields:
– **Left Column (Persönliche Angaben):**
– Firma (Text)
– Vorname* (Text – Required)
– Nachname* (Text – Required)
– Straße / Nr.* (Text – Required)
– PLZ* (Text – Required)
– Ort* (Text – Required)
– Telefon* (Text – Required)
– E-Mail-Adresse* (Email – Required)

– **Right Column (Fahrzeugangaben):**
– Hersteller* (Text – Required)
– Erstzulassung* (Text – Required)
– Maße (Text)
– Weitere Ausstattung (Textarea)
– Preisvorstellung (Text)
– Bemerkung (Textarea)
– Bilder hochladen* (File Upload – Max Size: 10MB, Allowed Types: PDF, JPG, PNG)

### 4. **Customize Field Styles**
– Go to the **Style** tab of the Form widget and adjust:
– **Typography**: Match font size and family.
– **Spacing**: Add vertical spacing between fields (e.g., 20px).
– **Field Background**: Set to a light gray (#ffffff or similar).
– **Border**: Use 1px solid border and rounded corners if necessary.

### 5. **Adjust Submit Button**
– Edit the **Submit button**:
– Text: "Anfrage absenden".
– Style: Set the background color to yellow and text color to black to match the design.

### 6. **Add File Upload Information**
– Use a **Text widget** below the file upload field to display the note:
– "Hier können Sie Bilder und Dokumente hochladen (max. 10 MB). Unterstützte Formate: PDF, JPG, PNG, …".

### 7. **Add Required Field Indicator and Privacy Checkbox**
– For required fields, ensure the asterisk (*) appears next to the field label.
– Add a checkbox at the bottom for terms and conditions, such as:
– Label: "Zustimmung zur Datenverarbeitung, Datenschutz, etc."
– Make it a required field.

### 8. **Customize Background and Alignment**
– Set the background of the entire section to dark gray to match the design.
– Align text and fields appropriately within each column.

### 9. **Mobile Responsiveness**
– Switch to **Mobile View** in Elementor.
– Stack the columns vertically and adjust spacing for smaller screens.

### 10. **Publish the Form**
– Save and preview the form to ensure it matches the attached design.

If you need further assistance or code snippets for specific styling, feel free to ask!

but we want all fields in one form

To create a single Elementor form with all fields from the attached design, here’s how you can achieve it:

—

### 1. **Add a Two-Column Layout**
– Edit the page with Elementor.
– Add a new **two-column section**.
– Set both columns to equal width (50% each).

—

### 2. **Add the Form Widget**
– Drag the **Form widget** into the section.
– In the **Form widget settings**, configure all the fields to match your design, grouping fields logically between the two columns.

—

### 3. **Arrange Fields in Columns**
Use Elementor's **"Custom Positioning"** and **"Inline Width"** features:
– Under **Advanced → Custom Positioning**, set:
– Inline Width: 50% for fields that should appear side-by-side (e.g., Vorname and Nachname).
– Full Width: For fields that should span the entire row (e.g., Straße / Nr. or Bemerkung).
– Set the column layout:
– Fields under "Persönliche Angaben" in the left column.
– Fields under "Fahrzeugangaben" in the right column.

—

### 4. **Configure Form Fields**
Below are the fields to add, in order:

#### **Left Column (Persönliche Angaben)**
1. **Firma**: Text (Optional)
2. **Vorname***: Text (Required)
3. **Nachname***: Text (Required)
4. **Straße / Nr.***: Text (Required)
5. **PLZ***: Text (Required)
6. **Ort***: Text (Required)
7. **Telefon***: Text (Required)
8. **E-Mail-Adresse***: Email (Required)

#### **Right Column (Fahrzeugangaben)**
1. **Hersteller***: Text (Required)
2. **Erstzulassung***: Text (Required)
3. **Maße**: Text (Optional)
4. **Weitere Ausstattung**: Textarea (Optional)
5. **Preisvorstellung**: Text (Optional)
6. **Bemerkung**: Textarea (Optional)
7. **Bilder hochladen***: File Upload (Required)
– Set **Max File Size**: 10MB.
– **Allowed File Types**: PDF, JPG, PNG.

—

### 5. **Add a Submit Button**
– Label the button: **"Anfrage absenden"**.
– Under **Content → Actions After Submit**, configure the desired action (e.g., email or database submission).

—

### 6. **Style the Form**
Go to the **Style tab** and adjust:
– **Form Title and Labels**:
– Typography: Match font size and weight.
– Color: White text for dark backgrounds.
– **Field Design**:
– Background: Light gray (#ffffff).
– Padding: 10px inside fields.
– Border: 1px solid, rounded corners.
– **Button Design**:
– Background: Yellow (#FFCC00).
– Text Color: Black.
– Padding: Add extra spacing around the text.

—

### 7. **Add Field Description for File Upload**
Use the **"File Upload"** field's description feature:
– Add: *"Hier können Sie Bilder und Dokumente hochladen (max. 10 MB). Unterstützte Formate: PDF, JPG, PNG, …"*.

—

### 8. **Add Required Field Indicator**
– Elementor automatically adds an asterisk (*) for required fields.
– Ensure that the **Required toggle** is enabled for mandatory fields.

—

### 9. **Add Privacy Agreement Checkbox**
– Add a **Checkbox field** below the form.
– Label: *"Zustimmung zur Datenverarbeitung, Datenschutz, etc."*
– Make it a **required field**.

—

### 10. **Test the Form**
– Save and preview the form to ensure all fields are correctly aligned and functional.

—

If any issues arise with the field arrangement or styling, let me know!