Form Erstellung in Elementor

### Steps to Build the Form
1. **Create a New Section:**
– Open Elementor and create a new section with two equal-width columns.

2. **Add Headings:**
– In the left column, add a heading widget with the text "Persönliche Angaben."
– In the right column, add another heading widget with the text "Fahrzeugangaben."

3. **Add Form Widgets:**
– Use the **Form** widget from Elementor Pro or any form plugin like WPForms or Contact Form 7.

4. **Left Column Fields ("Persönliche Angaben"):**
Add these fields:
– **Firma** (Text)
– **Vorname** (Text, required)
– **Nachname** (Text, required)
– **Straße / Nr.** (Text)
– **PLZ** (Text)
– **Ort** (Text, required)
– **Telefon** (Text)
– **E-Mail-Adresse** (Email, required)

5. **Right Column Fields ("Fahrzeugangaben"):**
Add these fields:
– **Hersteller** (Text)
– **Erstzulassung** (Text)
– **Maße** (Text)
– **Weitere Ausstattung** (Textarea)
– **Preisvorstellung** (Text)
– **Bemerkung** (Textarea)
– **Bilder hochladen** (File Upload, allowed file types: PDF, JPG, PNG, etc., max file size: 10 MB)

6. **Add Checkbox for Consent:**
– Add a checkbox field below the forms for consent to data processing.

7. **Add Submit Button:**
– Add a submit button with the text "Anfrage absenden." Style it with a yellow background and black text to match the design.

8. **Styling:**
– Set the section's background to dark gray.
– Style the form fields with white borders and text.
– Use consistent spacing between fields for both columns.
– Align the submit button to the center or bottom of the form.

9. **Additional Features:**
– Enable validation for required fields.
– For file upload, ensure the limit is 10 MB and allowed file types are set correctly.

10. **Preview and Adjust:**
– Preview the form to ensure the alignment, spacing, and responsiveness are correct on all devices.

Let me know if you need detailed CSS or further assistance!

—

### **Steps to Build a Two-Column Form in Elementor**

1. **Add a New Section in Elementor:**
– Create a **one-column section** to hold the entire form.

2. **Insert the Form Widget:**
– Drag and drop the **Form** widget (requires Elementor Pro) into the section.

3. **Add Form Fields:**
– Add all the fields for both "Persönliche Angaben" and "Fahrzeugangaben" to the **same form** in the following order:
– **Firma** (Text)
– **Vorname** (Text, required)
– **Nachname** (Text, required)
– **Straße / Nr.** (Text)
– **PLZ** (Text)
– **Ort** (Text, required)
– **Telefon** (Text)
– **E-Mail-Adresse** (Email, required)
– Divider (optional, for visual clarity between sections)
– **Hersteller** (Text)
– **Erstzulassung** (Text)
– **Maße** (Text)
– **Weitere Ausstattung** (Textarea)
– **Preisvorstellung** (Text)
– **Bemerkung** (Textarea)
– **Bilder hochladen** (File Upload, set file types and max size to 10MB)
– **Checkbox for Consent** (Checkbox, required)
– **Submit Button** ("Anfrage absenden")

4. **Enable Multi-Column Layout:**
– Open the **Form Settings** in the Elementor editor.
– For each field:
– Go to the **Advanced Tab** for each field.
– Under **Custom CSS Classes**, assign a class for layout, e.g., `form-column`.
– Adjust the grid by wrapping the form in a custom class.

5. **Add Custom CSS for Columns:**
– Go to the **Page Settings** → **Advanced** → **Custom CSS**, and add the following:

.elementor-widget-form .form-column {
         width: 48%;
         display: inline-block;
         vertical-align: top;
         margin-right: 4%; /* Add space between columns */
     }
     .elementor-widget-form .form-column:nth-child(2n) {
         margin-right: 0; /* Remove margin for the second column */
     }

6. **Align Fields in Two Columns:**
– Assign the left-column fields (`Firma`, `Vorname`, etc.) to the first column by leaving them in order.
– Ensure right-column fields (`Hersteller`, `Erstzulassung`, etc.) appear aligned visually using the CSS.

7. **Style the Form:**
– Set the background color of the section to **dark gray (#333333)**.
– Add white input fields with a 1px border.
– Add padding inside each field for proper spacing.

8. **Add Final Touches:**
– Align the **submit button** to span across both columns (full width) or center it at the bottom.
– Test responsiveness by ensuring fields stack properly on mobile. If needed, add CSS to set fields to full width for smaller screens.

—

Let me know if you need more help with styling or specific Elementor configuration!

—

### **Steps to Add Headings Above Each Column in the Form**

1. **Add Headings Directly in the Form:**
Elementor's **Form** widget allows you to add **HTML fields**. You can use these to add headings within the form layout.

2. **Add HTML Fields for Headings:**
– Open the **Form Widget** in Elementor.
– Add a new field at the top of the form for **"Persönliche Angaben"**:
– Field Type: **HTML**
– Label: Leave it empty.
– Content: `Persönliche Angaben`
– Add another **HTML field** right after the last field in "Persönliche Angaben" for **"Fahrzeugangaben"**:
– Field Type: **HTML**
– Label: Leave it empty.
– Content: `Fahrzeugangaben`

3. **Position Headings Above Columns:**
– Drag the **"Persönliche Angaben"** HTML field so it appears at the very top of the left column fields.
– Drag the **"Fahrzeugangaben"** HTML field to appear at the top of the right column fields.

4. **Add Custom CSS for Alignment (Optional):**
To style the headings consistently with the design, add this CSS to the **Custom CSS** section of the page:

.elementor-widget-form h3 {
       font-size: 18px;
       color: #ffffff;
       margin-bottom: 10px;
   }

5. **Style and Spacing:**
– Ensure there's enough padding or margin between the headings and their respective fields.
– If needed, you can increase the spacing in Elementor by adjusting the **Form Padding** or using the Advanced settings for each field.

6. **Mobile Responsiveness:**
– On smaller screens, ensure the headings stack correctly with their respective fields. Elementor should handle this automatically, but you can fine-tune the CSS if needed.

—

### Final Layout
– **Left Column:**
– Heading: "Persönliche Angaben"
– Fields: Firma, Vorname, Nachname, Straße / Nr., PLZ, Ort, Telefon, E-Mail-Adresse.

– **Right Column:**
– Heading: "Fahrzeugangaben"
– Fields: Hersteller, Erstzulassung, Maße, Weitere Ausstattung, Preisvorstellung, Bemerkung, Bilder hochladen.

Let me know if you'd like further clarification or help!

—

### **Solution 1: Use "Column Width" for Form Fields**
Elementor Pro's **Form Widget** includes a built-in **Column Width** option for each field. You can use this to create the two-column layout:

1. **Open the Form Widget:**
– Add the **Form Widget** to your section.

2. **Set Column Width for Fields:**
– For all fields in the **left column** ("Persönliche Angaben"), set the **Column Width** to **50%**.
– For all fields in the **right column** ("Fahrzeugangaben"), also set the **Column Width** to **50%**.

3. **Add Headings as HTML Fields:**
– At the top of the form, add an **HTML field** for "Persönliche Angaben."
– Set its **Column Width** to **100%** to span across the full width of the row.
– Content: `Persönliche Angaben`.
– Add another **HTML field** above the right-hand fields for "Fahrzeugangaben."
– Set its **Column Width** to **100%**.
– Content: `Fahrzeugangaben`.

4. **Ensure Alignment:**
– Drag and reorder the fields to ensure the left-hand fields follow the "Persönliche Angaben" heading and the right-hand fields follow the "Fahrzeugangaben" heading.

—

### **Solution 2: Use Elementor Sections/Columns Inside the Form**
If you want more control over the layout, you can use **Elementor's Sections and Columns** to manually divide the form into two parts.

1. **Create a New Section:**
– Add a new **2-column section** in Elementor.

2. **Add Form Widget to Each Column:**
– Add **two separate Form Widgets**, one in each column.

3. **Customize Each Column Form:**
– In the **left column**, include only the "Persönliche Angaben" fields.
– In the **right column**, include only the "Fahrzeugangaben" fields.

4. **Combine the Forms with One Submit Button:**
– Add a single **Submit Button** field in one of the forms, or use JavaScript to combine the submission data if needed.

—

### **Solution 3: Use Custom CSS for Styling**
If you don't want to split the form into multiple widgets, you can use custom CSS to create the layout:

1. **Add All Fields in One Form Widget:**
– Add all fields in the order they appear on the form.
– Insert **HTML fields** for "Persönliche Angaben" and "Fahrzeugangaben" as headings.

2. **Target Specific Fields Using CSS:**
– Use Elementor's **Custom CSS** feature (available in Elementor Pro).
– Assign CSS based on field types or order:

/* Style headings */
     .elementor-widget-form .elementor-field-type-html h3 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #ffffff;
     }

     /* Left column fields */
     .elementor-widget-form .elementor-field:nth-child(-n+8) {
         width: 48%;
         float: left;
         margin-right: 4%;
     }

     /* Right column fields */
     .elementor-widget-form .elementor-field:nth-child(n+9) {
         width: 48%;
         float: right;
     }

– Adjust the `nth-child` values to match the exact positions of your fields.

3. **Test Responsiveness:**
– Use Elementor's responsive settings to ensure the fields stack properly on mobile.

—

### Conclusion
The simplest method is **Solution 1**, using Elementor's **Column Width** settings for the fields and adding headings as **HTML fields**. This approach avoids custom CSS and works natively with Elementor Pro.

Let me know if you need help implementing this!

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

1. **Check Elementor Version**: Ensure that you're using an up-to-date version of Elementor. Some features may be missing or not functioning correctly in older versions.

2. **Form Field Type**: The "Custom CSS Classes" option is typically available for most form field types, but make sure you're selecting a field type that supports this feature (like Text, Email, etc.). If you are using custom widgets or third-party addons, they might not have this option.

3. **Check Permissions and Settings**: If you're using a custom theme or have specific user role settings in your WordPress admin, it’s possible that some options are disabled based on your user role. Make sure you have the necessary permissions to access all Elementor features.

4. **Disable Conflicting Plugins**: Sometimes, plugins can conflict with Elementor, causing certain features to not display. Try disabling other plugins to see if the "Custom CSS Classes" option appears.

5. **Clear Cache**: If you have caching plugins enabled, clear your cache to ensure that you're seeing the most recent version of your settings.

6. **Inspect in Different Browsers**: Occasionally, browser-specific issues may cause certain elements not to display correctly. Check your Elementor settings in different browsers.

7. **Recreate the Field**: If all else fails, try deleting the field and recreating it from scratch. Sometimes, elements can become corrupted or misconfigured.

8. **Contact Support**: If none of the above solutions work, consider reaching out to Elementor support for assistance. They can provide insights specific to your setup.

If you can provide more details about your Elementor setup, like whether you're using Elementor Pro or any specific third-party plugins, I can offer more targeted advice.

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

seperate above form in 2 coulmns

1. Create a wrapper `div` around the fields and set a grid or flexbox layout to create two columns.
2. Distribute the form fields between the two columns as desired.

Here's a modified version of your form that splits it into two columns:

“`html

Persönliche Angaben

Firma

Vorname

Nachname

Straße / Nr.

PLZ

Fahrzeugangaben

Ort

Telefon

E-Mail-Adresse

Hersteller

Erstzulassung

Maße

Weitere Ausstattung

Preisvorstellung

1. **Add Custom CSS**: Go to your WordPress admin panel and navigate to **Appearance > Customize** or go to the Elementor page editor and find the Custom CSS option.

2. **Insert the CSS**: Add the following CSS code to create a two-column layout for the form fields:

/* Style the form fields */
   .elementor-form-fields-wrapper {
       display: flex;
       flex-wrap: wrap;
   }

   .elementor-field-group {
       width: 50%; /* Adjust the width as needed */
       box-sizing: border-box; /* Include padding and borders in width */
       padding: 0 10px; /* Optional: Add some padding between columns */
   }

   /* Optional: Adjust the field labels for better alignment */
   .elementor-field-label {
       margin-bottom: 5px; /* Adjust spacing between label and input */
   }

3. **Adjust the Field Width**: If you have specific fields that need to take up more space or need to stay as full-width (like the upload field), you can add specific classes to those fields and modify the CSS accordingly.

4. **Check Responsiveness**: Make sure to check how the form looks on different screen sizes. You might want to add media queries to stack the fields in a single column on smaller screens.

This way, you can achieve a two-column layout without modifying the HTML structure of the Elementor form.