Appearance

Contact ​

🧱 Container / Wrapper Level ​

css
--ca-widget-contact-container-bg
--ca-widget-contact-container-min-height
--ca-widget-contact-container-margin
--ca-widget-contact-container-border-radius

🧩 Contact Area ​

css
    --ca-widget-contact-area-bg
    --ca-widget-contact-area-height
    --ca-widget-contact-area-width
    --ca-widget-contact-area-gap
    --ca-widget-contact-area-padding
    --ca-widget-contact-area-border-radius
    --ca-widget-contact-area-padding-lg

🧾 Contact Info Panel ​

css
    --ca-widget-contact-info-min-height
    --ca-widget-contact-info-bg-repeat
    --ca-widget-contact-info-bg-position
    --ca-widget-contact-info-bg-size
    --ca-widget-contact-info-bg-color
    --ca-contact-area-info-bg
    --ca-widget-contact-info-color
    --ca-contact-area-info-color
    --ca-widget-contact-info-width
    --ca-widget-contact-info-width-lg
    --ca-widget-contact-info-aspect-ratio

✍️ Form Container ​

css
    --ca-widget-contact-form-align-items
    --ca-widget-contact-form-justify-content
    --ca-widget-contact-form-gap
    --ca-widget-contact-form-min-height
    --ca-widget-contact-form-bg
    --ca-contact-area-form-bg
    --ca-widget-contact-form-color
    --ca-contact-area-form-color
    --ca-widget-contact-form-border
    --ca-contact-area-form-border
    --ca-widget-contact-form-padding

🏷️ Headings ​

css
    --ca-widget-contact-h4-color
    --ca-contact-area-form-h4-color
    --ca-widget-contact-form-h4-font-size
    --ca-widget-contact-form-h4-line-height
    --ca-widget-contact-form-h4-font-weight
    --ca-contact-area-form-h5-color
    --ca-contact-area-form-h5-font-weight
    --ca-contact-area-form-h5-font-size
    --ca-contact-area-form-h5-line-height
    --ca-contact-area-form-h5-text-align
    --ca-contact-area-form-h5-margin
    --ca-widget-contact-form-margin

Template for forms v2 ​

Efter sidste opdatering i develop (2025-06-16) er det muligt at lave custom forms

css
#contactForm [data-form="testdrive"]{
    grid-template-columns: 50%;
    grid-template-rows: min-content;
    grid-template-areas:
      "firstname lastname"
      "phoneno mail"
      "message message"
      "submit submit";
}

#contactForm [data-form="testdrive"] .form-field{
    grid-area: var(--field-name, start);
}

Template for forms v1 (deprecated) ​

Dette var lidt hacky måde og lave template på og meget extra line css. derfor brug version to istedet fra efter 2025-06-16

css
.custom-form-area{
    grid-template-columns: 50%;
    grid-template-rows: min-content;
    grid-template-areas: 
			"fornavn efternavn"
			"nummerplade mail"
			"besked besked";
}

.form-field{
    grid-column: 1 / 1;
}

.form-field[data-field="fornavn"]{
    grid-area: fornavn;
}

.form-field[data-field="efternavn"]{
    grid-area: efternavn;
}

.form-field[data-field="nummerplade"]{
    grid-area: nummerplade;
}

.form-field[data-field="mail"]{
    grid-area: mail;
}

.form-field[data-field="besked"]{
    grid-area: besked;
}

```css

.contact-form-area{
    grid-template-columns: 33%;
    grid-template-rows: min-content;
    grid-template-areas: "name lastname phone";
}

.form-field{
    grid-column: 1 / -1;
}
.form-field[data-field="fornavn"]{
    grid-area: name;
}
.form-field[data-field="efternavn"]{
    grid-area: lastname;
}
.form-field[data-field="telefonnummer"]{
    grid-area: phone;
}

hvis du kun vil ramme bestem form

css
.contact-form-area[data-form="testdrive"]{
    grid-template-columns: 33%;
    grid-template-rows: min-content;
    grid-template-areas: "name lastname phone";
}
.contact-form-area[data-form="testdrive"] .form-field{
    grid-column: 1 / -1;
}
.contact-form-area[data-form="testdrive"] .form-field[data-field="fornavn"]{
    grid-area: name;
}
.contact-form-area[data-form="testdrive"] .form-field[data-field="efternavn"]{
    grid-area: lastname;
}
.contact-form-area[data-form="testdrive"] .form-field[data-field="telefonnummer"]{
    grid-area: phone;
}