{"id":104,"date":"2026-07-19T21:51:54","date_gmt":"2026-07-19T19:51:54","guid":{"rendered":"https:\/\/new.mailfino.com\/formulare-double-opt-in\/"},"modified":"2026-07-19T23:17:03","modified_gmt":"2026-07-19T21:17:03","slug":"formulare-double-opt-in","status":"publish","type":"page","link":"https:\/\/new.mailfino.com\/en\/formulare-double-opt-in\/","title":{"rendered":"Formulare dort einsetzen, wo Kontakte entstehen"},"content":{"rendered":"\n<style>\n:root {\n  --mf-ink: #14242c;\n  --mf-muted: #5b6b72;\n  --mf-blue: #287fc1;\n  --mf-blue-dark: #185e91;\n  --mf-navy: #07163d;\n  --mf-green: #103f39;\n  --mf-red: #df5948;\n  --mf-yellow: #f2c14e;\n  --mf-soft: #f4f7f6;\n  --mf-line: #dce4e1;\n  --mf-white: #fff;\n  --mf-shadow: 0 18px 50px rgba(20, 36, 44, 0.09);\n}\n\n#header .sub-menu {\n  padding: 8px;\n  border: 1px solid rgba(17, 51, 79, 0.12);\n  border-radius: 6px;\n  background: #ffffff;\n  box-shadow: 0 16px 38px rgba(17, 51, 79, 0.16);\n}\n\n#header .sub-menu .ct-menu-link {\n  min-height: 0;\n  padding: 12px 14px;\n  border-radius: 4px;\n  color: #172b38;\n}\n\n#header .sub-menu .menu-item:hover > .ct-menu-link,\n#header .sub-menu .menu-item:focus-within > .ct-menu-link,\n#header .sub-menu .current-menu-item > .ct-menu-link {\n  background: #edf4f8;\n  color: #24587b;\n}\n\nbody.page {\n  color: var(--mf-ink);\n  background: var(--mf-white);\n}\n\nbody.page .hero-section,\nbody.page #footer {\n  display: none;\n}\n\nbody.page .ct-container-full[data-vertical-spacing] {\n  --theme-content-vertical-spacing: 0;\n}\n\nbody.page .entry-content {\n  max-width: none;\n  margin: 0;\n  padding: 0;\n}\n\nbody.page .entry-content > * {\n  margin-block: 0;\n}\n\nbody.page header.ct-header {\n  position: sticky;\n  z-index: 80;\n  top: 0;\n}\n\nbody.admin-bar.page header.ct-header {\n  top: 32px;\n}\n\nbody.page .ct-header [data-row*=\"middle\"] {\n  --height: 82px;\n  background: rgba(255, 255, 255, 0.97);\n  border-bottom: 1px solid var(--mf-line);\n}\n\nbody.page .ct-header [data-id=\"menu\"] > ul > li > a {\n  color: var(--mf-ink);\n  font-size: 15px;\n  font-weight: 650;\n  letter-spacing: 0;\n  text-transform: none;\n}\n\nbody.page .ct-header [data-id=\"logo\"] .site-title a {\n  display: block;\n  width: 190px;\n  height: 48px;\n  overflow: hidden;\n  background: url(\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-logo.png\") center \/ contain no-repeat;\n  color: transparent;\n  font-size: 0;\n  white-space: nowrap;\n}\n\nbody.page .ct-header [data-id=\"search\"] {\n  display: none;\n}\n\n.mf-shell {\n  width: min(1240px, calc(100% - 64px));\n  margin-inline: auto;\n}\n\n.mf-page-hero {\n  position: relative;\n  width: 100vw;\n  max-width: none !important;\n  min-height: 590px;\n  margin-left: calc(50% - 50vw);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  background-color: var(--mf-navy);\n  background-image: var(--mf-page-art);\n  background-position: right center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  color: var(--mf-white);\n}\n\n.mf-page-hero::before {\n  position: absolute;\n  inset: 0;\n  background: rgba(4, 19, 58, 0.16);\n  content: \"\";\n}\n\n.mf-page-hero-inner {\n  position: relative;\n  z-index: 2;\n  width: 50%;\n  padding: 78px 0 86px;\n}\n\n.mf-kicker {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 20px;\n  color: #7ddcf0;\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: 0;\n  text-transform: uppercase;\n}\n\n.mf-kicker::before {\n  width: 34px;\n  height: 2px;\n  background: var(--mf-yellow);\n  content: \"\";\n}\n\n.mf-page-hero h1 {\n  max-width: 690px;\n  margin: 0 0 26px;\n  color: var(--mf-white);\n  font-size: 58px;\n  line-height: 1.03;\n  letter-spacing: 0;\n}\n\n.mf-page-hero-copy {\n  max-width: 630px;\n  margin: 0;\n  color: #dbe6f6;\n  font-size: 20px;\n  line-height: 1.55;\n}\n\n.mf-cloud-hero {\n  min-height: 520px;\n  background: var(--mf-navy);\n}\n\n.mf-cloud-hero::before {\n  display: none;\n}\n\n.mf-cloud-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: 0.88fr 1.12fr;\n  gap: 70px;\n  align-items: center;\n  padding: 62px 0;\n}\n\n.mf-cloud-copy h1 {\n  margin: 0 0 24px;\n  color: var(--mf-white);\n  font-size: 54px;\n  line-height: 1.04;\n}\n\n.mf-cloud-copy p:not(.mf-kicker) {\n  margin: 0;\n  color: #dbe6f6;\n  font-size: 19px;\n}\n\n.mf-cloud-screen {\n  margin: 0;\n  padding: 22px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.mf-cloud-screen img {\n  display: block;\n  width: 100%;\n}\n\n.mf-cloud-proof {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-cloud-proof div {\n  padding: 34px;\n}\n\n.mf-cloud-proof div + div {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-cloud-proof strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 18px;\n}\n\n.mf-cloud-proof span {\n  color: var(--mf-muted);\n}\n\n.mf-cloud-choice {\n  display: flex;\n  gap: 38px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 34px 40px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-soft);\n}\n\n.mf-cloud-choice h2 {\n  margin: 0 0 8px;\n  font-size: 28px;\n}\n\n.mf-cloud-choice p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-editor-hero {\n  min-height: 650px;\n  background: var(--mf-soft);\n  color: var(--mf-ink);\n}\n\n.mf-editor-hero::before {\n  display: none;\n}\n\n.mf-editor-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: 0.8fr 1.2fr;\n  gap: 72px;\n  align-items: center;\n  padding: 78px 0;\n}\n\n.mf-editor-copy .mf-kicker {\n  color: var(--mf-blue-dark);\n}\n\n.mf-editor-copy h1 {\n  margin: 0 0 24px;\n  color: var(--mf-ink);\n  font-size: 56px;\n  line-height: 1.03;\n}\n\n.mf-editor-copy p:not(.mf-kicker) {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 19px;\n}\n\n.mf-editor-copy .mf-button-secondary {\n  border-color: var(--mf-blue-dark);\n  color: var(--mf-blue-dark);\n}\n\n.mf-editor-stage {\n  margin: 0;\n  padding: 16px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-stage img {\n  display: block;\n  width: 100%;\n}\n\n.mf-form-hero {\n  min-height: 650px;\n  background: var(--mf-navy);\n}\n\n.mf-form-hero::before {\n  display: none;\n}\n\n.mf-form-hero-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: 0.88fr 1.12fr;\n  gap: 72px;\n  align-items: center;\n  padding: 72px 0;\n}\n\n.mf-form-hero-copy h1 {\n  margin: 0 0 24px;\n  color: var(--mf-white);\n  font-size: 56px;\n  line-height: 1.03;\n}\n\n.mf-form-hero-copy > p:not(.mf-kicker) {\n  margin: 0;\n  color: #dbe6f6;\n  font-size: 19px;\n}\n\n.mf-form-preview {\n  margin: 0;\n  padding: 18px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.07);\n}\n\n.mf-form-preview-window {\n  overflow: hidden;\n  border-radius: 6px;\n  background: var(--mf-white);\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);\n}\n\n.mf-form-preview-bar {\n  display: flex;\n  gap: 7px;\n  padding: 12px 15px;\n  background: #e8f2ef;\n}\n\n.mf-form-preview-bar i {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mf-green);\n}\n\n.mf-form-preview-body {\n  display: grid;\n  grid-template-columns: 0.7fr 1.3fr;\n  min-height: 390px;\n}\n\n.mf-form-preview-aside {\n  padding: 34px 28px;\n  background: var(--mf-blue);\n  color: var(--mf-white);\n}\n\n.mf-form-preview-aside strong {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 23px;\n  line-height: 1.15;\n}\n\n.mf-form-preview-aside span {\n  color: #d7effb;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.mf-form-preview-fields {\n  display: grid;\n  gap: 13px;\n  align-content: center;\n  padding: 42px;\n  color: var(--mf-ink);\n}\n\n.mf-form-preview-fields > strong {\n  margin-bottom: 4px;\n  font-size: 23px;\n}\n\n.mf-form-preview-fields > span {\n  margin-bottom: 8px;\n  color: var(--mf-muted);\n  font-size: 13px;\n}\n\n.mf-form-preview-input {\n  padding: 13px 15px;\n  border: 1px solid #cfdad7;\n  border-radius: 4px;\n  color: #718087;\n  font-size: 13px;\n}\n\n.mf-form-preview-consent {\n  display: grid;\n  grid-template-columns: 18px 1fr;\n  gap: 10px;\n  align-items: start;\n  color: var(--mf-muted);\n  font-size: 12px;\n  line-height: 1.45;\n}\n\n.mf-form-preview-consent::before {\n  width: 16px;\n  height: 16px;\n  border: 1px solid #a9b9b5;\n  border-radius: 3px;\n  content: \"\";\n}\n\n.mf-form-preview-submit {\n  padding: 13px 18px;\n  border-radius: 4px;\n  background: var(--mf-red);\n  color: var(--mf-white);\n  font-size: 14px;\n  font-weight: 800;\n  text-align: center;\n}\n\n.mf-form-elements {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-form-element {\n  min-height: 195px;\n  padding: 26px;\n  border-right: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n  background: var(--mf-white);\n}\n\n.mf-form-element-symbol {\n  display: grid;\n  width: 58px;\n  height: 48px;\n  margin-bottom: 22px;\n  place-items: center;\n  border: 1px solid var(--mf-line);\n  border-radius: 6px;\n  background: var(--mf-soft);\n  color: var(--mf-blue-dark);\n  font-size: 14px;\n  font-weight: 850;\n}\n\n.mf-form-element h3 {\n  margin: 0 0 7px;\n  font-size: 18px;\n}\n\n.mf-form-element p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-form-field-properties {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  margin-top: 34px;\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-form-field-properties div {\n  padding: 24px;\n}\n\n.mf-form-field-properties div + div {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-form-field-properties strong {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--mf-ink);\n}\n\n.mf-form-field-properties span {\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-editor-proof {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-editor-proof article {\n  padding: 32px 28px;\n}\n\n.mf-editor-proof article + article {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-proof strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 17px;\n}\n\n.mf-editor-proof span {\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-editor-elements {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-element {\n  min-height: 238px;\n  padding: 28px;\n  border-right: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n  background: var(--mf-white);\n}\n\n.mf-editor-element-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  min-height: 78px;\n  margin-bottom: 20px;\n}\n\n.mf-editor-element-head img {\n  display: block;\n  width: 76px;\n  height: 76px;\n  object-fit: cover;\n  border: 1px solid #d9e2e0;\n  border-radius: 6px;\n  background: #fff;\n}\n\n.mf-editor-element-head span {\n  display: block;\n  color: var(--mf-blue);\n  font-size: 12px;\n  font-weight: 800;\n}\n\n.mf-editor-element h3 {\n  margin-bottom: 8px;\n  font-size: 19px;\n}\n\n.mf-editor-element p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-editor-detail {\n  display: grid;\n  grid-template-columns: 0.92fr 1.08fr;\n  gap: 76px;\n  align-items: center;\n}\n\n.mf-editor-detail-reverse {\n  grid-template-columns: 1.08fr 0.92fr;\n}\n\n.mf-editor-detail-reverse .mf-editor-detail-copy {\n  order: 2;\n}\n\n.mf-editor-detail-reverse .mf-editor-shot {\n  order: 1;\n}\n\n.mf-editor-detail-copy > p:not(.mf-eyebrow) {\n  color: var(--mf-muted);\n  font-size: 17px;\n}\n\n.mf-editor-shot {\n  margin: 0;\n  padding: 14px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-shot img,\n.mf-editor-shot video {\n  display: block;\n  width: 100%;\n}\n\n.mf-editor-shot video {\n  aspect-ratio: 16 \/ 10;\n  background: #eef1f0;\n  object-fit: cover;\n}\n\n.mf-editor-shot figcaption {\n  padding: 12px 4px 0;\n  color: var(--mf-muted);\n  font-size: 13px;\n}\n\n.mf-editor-wide-shot {\n  margin: 40px 0 0;\n  padding: 14px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-editor-wide-shot img,\n.mf-editor-wide-shot video {\n  display: block;\n  width: 100%;\n}\n\n.mf-editor-wide-shot video {\n  aspect-ratio: 16 \/ 10;\n  background: #eef1f0;\n  object-fit: cover;\n}\n\n.mf-editor-wide-shot figcaption {\n  padding: 12px 4px 0;\n  color: var(--mf-muted);\n  font-size: 13px;\n}\n\n.mf-editor-wide-shot-dark {\n  border-color: rgba(255, 255, 255, 0.2);\n  background: #1b3138;\n}\n\n.mf-editor-wide-shot-dark figcaption {\n  color: #c9dbd7;\n}\n\n.mf-editor-tools {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-editor-tool {\n  padding: 30px;\n}\n\n.mf-editor-tools-visual .mf-editor-tool {\n  min-height: 360px;\n}\n\n.mf-editor-tool-icon {\n  display: block;\n  width: 96px;\n  height: 96px;\n  margin-bottom: 22px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  object-fit: cover;\n  background: var(--mf-soft);\n}\n\n.mf-editor-tool + .mf-editor-tool {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-tool span {\n  display: block;\n  margin-bottom: 18px;\n  color: var(--mf-red);\n  font-size: 12px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-editor-tool p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-editor-tools-six {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-editor-tools-six .mf-editor-tool:nth-child(n + 4) {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-editor-tools-six .mf-editor-tool:nth-child(4) {\n  border-left: 0;\n}\n\n.mf-editor-tools-four {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.mf-editor-tools-four .mf-editor-tool:nth-child(n + 3) {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-editor-tools-four .mf-editor-tool:nth-child(3) {\n  border-left: 0;\n}\n\n.mf-editor-note {\n  margin-top: 30px;\n  padding: 22px 24px;\n  border-left: 4px solid var(--mf-blue);\n  background: #eef5f8;\n  color: var(--mf-ink);\n}\n\n.mf-editor-note strong {\n  display: block;\n  margin-bottom: 5px;\n}\n\n.mf-editor-routes {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n}\n\n.mf-editor-routes-three {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-editor-route {\n  padding: 36px;\n}\n\n.mf-editor-route + .mf-editor-route {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-editor-route p {\n  color: var(--mf-muted);\n}\n\n.mf-text-link {\n  color: var(--mf-blue-dark);\n  font-weight: 750;\n  text-decoration: none;\n}\n\n.mf-feature-rows {\n  border-top: 1px solid var(--mf-line);\n}\n\n.mf-feature-row {\n  display: grid;\n  grid-template-columns: 110px 0.72fr 1.28fr;\n  gap: 28px;\n  padding: 34px 0;\n  border-bottom: 1px solid var(--mf-line);\n}\n\n.mf-feature-row > span {\n  color: var(--mf-red);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-feature-row h3,\n.mf-feature-row p {\n  margin: 0;\n}\n\n.mf-feature-row p {\n  color: var(--mf-muted);\n}\n\n.mf-section-dark .mf-feature-row {\n  border-color: rgba(255, 255, 255, 0.18);\n}\n\n.mf-section-dark .mf-feature-row p {\n  color: #c9dbd7;\n}\n\n.mf-architecture {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  overflow: hidden;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-architecture-step {\n  position: relative;\n  min-height: 250px;\n  padding: 36px;\n}\n\n.mf-architecture-step + .mf-architecture-step {\n  border-left: 1px solid var(--mf-line);\n}\n\n.mf-architecture-step span {\n  display: block;\n  margin-bottom: 42px;\n  color: var(--mf-blue);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-architecture-step p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-directory-nav {\n  position: sticky;\n  z-index: 40;\n  top: 82px;\n  width: 100vw;\n  max-width: none !important;\n  margin-left: calc(50% - 50vw);\n  border-bottom: 1px solid var(--mf-line);\n  background: rgba(255, 255, 255, 0.97);\n}\n\n.mf-directory-nav-inner {\n  display: flex;\n  gap: 28px;\n  overflow-x: auto;\n  padding: 18px 0;\n}\n\n.mf-directory-nav a {\n  flex: 0 0 auto;\n  color: var(--mf-ink);\n  font-size: 14px;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.mf-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 32px;\n}\n\n.mf-button {\n  display: inline-flex;\n  min-height: 50px;\n  align-items: center;\n  padding: 13px 20px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: var(--mf-red);\n  color: var(--mf-white);\n  font-weight: 750;\n  text-decoration: none;\n  transition: transform 160ms ease;\n}\n\n.mf-button:hover {\n  color: var(--mf-white);\n  transform: translateY(-2px);\n}\n\n.mf-button-secondary {\n  border-color: rgba(255, 255, 255, 0.7);\n  background: transparent;\n}\n\n.mf-section {\n  width: 100vw;\n  max-width: none !important;\n  padding: 104px 0;\n  margin-left: calc(50% - 50vw);\n}\n\n.mf-section-soft {\n  background: var(--mf-soft);\n}\n\n.mf-section-dark {\n  background: var(--mf-green);\n  color: var(--mf-white);\n}\n\n.mf-section-head {\n  max-width: 820px;\n  margin-bottom: 48px;\n}\n\n.mf-eyebrow {\n  margin: 0 0 16px;\n  color: var(--mf-blue);\n  font-size: 13px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-section h2 {\n  max-width: 820px;\n  margin: 0 0 20px;\n  color: var(--mf-ink);\n  font-size: 46px;\n  line-height: 1.09;\n  letter-spacing: 0;\n}\n\n.mf-section h3 {\n  margin: 0 0 12px;\n  color: var(--mf-ink);\n  font-size: 22px;\n  letter-spacing: 0;\n}\n\n.mf-section-lead {\n  max-width: 760px;\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 19px;\n  line-height: 1.6;\n}\n\n.mf-section-dark h2,\n.mf-section-dark h3 {\n  color: var(--mf-white);\n}\n\n.mf-section-dark .mf-section-lead {\n  color: #c9dbd7;\n}\n\n.mf-grid-2,\n.mf-grid-3,\n.mf-grid-4 {\n  display: grid;\n  gap: 16px;\n}\n\n.mf-grid-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.mf-grid-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.mf-grid-4 {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.mf-card {\n  min-height: 210px;\n  padding: 30px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: 0 7px 22px rgba(20, 36, 44, 0.04);\n}\n\n.mf-card p {\n  margin: 0;\n  color: var(--mf-muted);\n}\n\n.mf-card-mark {\n  display: block;\n  margin-bottom: 24px;\n  color: var(--mf-red);\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.mf-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 72px;\n  align-items: center;\n}\n\n.mf-visual {\n  margin: 0;\n}\n\n.mf-visual img {\n  display: block;\n  width: 100%;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-checks {\n  margin: 28px 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mf-checks li {\n  position: relative;\n  margin: 12px 0;\n  padding-left: 28px;\n  color: var(--mf-ink);\n}\n\n.mf-checks li::before {\n  position: absolute;\n  left: 0;\n  color: var(--mf-green);\n  font-weight: 900;\n  content: \"\u2713\";\n}\n\n.mf-section-dark .mf-checks li {\n  color: #e6f0ed;\n}\n\n.mf-compare {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  border-collapse: separate;\n  border-spacing: 0;\n  background: var(--mf-white);\n}\n\n.mf-compare th,\n.mf-compare td {\n  padding: 20px;\n  border-right: 1px solid var(--mf-line);\n  border-bottom: 1px solid var(--mf-line);\n  text-align: left;\n  vertical-align: top;\n}\n\n.mf-compare th {\n  background: var(--mf-soft);\n  color: var(--mf-ink);\n}\n\n.mf-compare tr:last-child td,\n.mf-compare tr:last-child th {\n  border-bottom: 0;\n}\n\n.mf-compare th:last-child,\n.mf-compare td:last-child {\n  border-right: 0;\n}\n\n.mf-faq {\n  display: grid;\n  gap: 10px;\n}\n\n.mf-faq details {\n  padding: 22px 24px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n}\n\n.mf-faq summary {\n  color: var(--mf-ink);\n  font-weight: 750;\n  cursor: pointer;\n}\n\n.mf-faq p {\n  margin: 14px 0 0;\n  color: var(--mf-muted);\n}\n\n.mf-integration-groups {\n  display: grid;\n  gap: 54px;\n}\n\n.mf-integration-group h3 {\n  margin-bottom: 20px;\n  font-size: 26px;\n}\n\n.mf-integration-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 12px;\n}\n\n.mf-integration {\n  display: block;\n  position: relative;\n  min-height: 150px;\n  padding: 24px;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: var(--mf-white);\n  color: inherit;\n  text-decoration: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;\n}\n\na.mf-integration:hover,\na.mf-integration:focus-visible {\n  border-color: var(--mf-blue);\n  box-shadow: 0 12px 28px rgba(17, 51, 79, 0.12);\n  transform: translateY(-2px);\n}\n\n.mf-integration strong {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--mf-ink);\n  font-size: 17px;\n}\n\n.mf-integration p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 14px;\n}\n\n.mf-integration-detail-hero-layout {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);\n  gap: 80px;\n  align-items: center;\n}\n\n.mf-integration-detail-hero-layout .mf-page-hero-inner {\n  width: auto;\n}\n\n.mf-integration-detail-brand {\n  display: grid;\n  min-height: 250px;\n  margin: 0;\n  padding: 42px;\n  place-items: center;\n  border: 1px solid rgba(255, 255, 255, 0.28);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);\n}\n\n.mf-integration-detail-brand img {\n  display: block;\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  max-height: 150px;\n  object-fit: contain;\n}\n\n.mf-integration-detail-brand-duo {\n  grid-template-columns: 1fr 1fr;\n  gap: 28px;\n}\n\n.mf-api-brand {\n  background: #f7faf9;\n}\n\n.mf-api-brand-window {\n  width: min(100%, 390px);\n  overflow: hidden;\n  border: 1px solid var(--mf-line);\n  border-radius: 8px;\n  background: #0d2429;\n  box-shadow: 0 18px 42px rgba(7, 22, 61, 0.18);\n}\n\n.mf-api-brand-bar {\n  display: flex;\n  gap: 7px;\n  padding: 12px 15px;\n  background: #e8f2ef;\n}\n\n.mf-api-brand-bar i {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mf-green);\n}\n\n.mf-api-brand-window code {\n  display: block;\n  padding: 24px;\n  background: transparent;\n  color: #d7ece6;\n  font-size: 14px;\n  line-height: 1.75;\n  white-space: pre-wrap;\n}\n\n.mf-api-brand-window code strong {\n  color: var(--mf-yellow);\n}\n\n.mf-integration-flow {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);\n  gap: 18px;\n  align-items: stretch;\n  margin-top: 42px;\n}\n\n.mf-integration-flow-node {\n  min-width: 0;\n  padding: 28px;\n  border: 1px solid var(--mf-line);\n  border-top: 3px solid var(--mf-blue);\n  border-radius: 8px;\n  background: var(--mf-white);\n  box-shadow: var(--mf-shadow);\n}\n\n.mf-integration-flow-node:nth-of-type(2) {\n  border-top-color: var(--mf-green);\n}\n\n.mf-integration-flow-node:nth-of-type(3) {\n  border-top-color: var(--mf-red);\n}\n\n.mf-integration-flow-node span {\n  display: block;\n  margin-bottom: 12px;\n  color: var(--mf-blue-dark);\n  font-size: 12px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-integration-flow-node h3 {\n  margin: 0 0 10px;\n  color: var(--mf-ink);\n  font-size: 21px;\n}\n\n.mf-integration-flow-node p {\n  margin: 0;\n  color: var(--mf-muted);\n  font-size: 15px;\n}\n\n.mf-integration-flow-arrow {\n  display: grid;\n  width: 38px;\n  place-items: center;\n  color: var(--mf-green);\n  font-size: 26px;\n  font-weight: 800;\n}\n\n.mf-status {\n  display: inline-block;\n  margin-bottom: 16px;\n  padding: 3px 7px;\n  border-radius: 4px;\n  background: #e5f2ed;\n  color: #235c4f;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.mf-status-beta {\n  background: #fff1ce;\n  color: #73510a;\n}\n\n.mf-final {\n  text-align: center;\n}\n\n.mf-final .mf-section-head {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n.mf-final .mf-section-head h2,\n.mf-final .mf-section-lead {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n.mf-final .mf-actions {\n  justify-content: center;\n}\n\n.mf-final .mf-button-secondary {\n  border-color: var(--mf-blue-dark);\n  color: var(--mf-blue-dark);\n}\n\n.mf-footer {\n  width: 100vw;\n  max-width: none !important;\n  padding: 54px 0 28px;\n  margin-left: calc(50% - 50vw);\n  background: #102027;\n  color: #b8c5ca;\n}\n\n.mf-footer-grid {\n  display: grid;\n  grid-template-columns: 1.45fr 1fr 1fr 1fr;\n  gap: 40px;\n}\n\n.mf-footer-logo {\n  width: 180px;\n  margin: 0 0 16px;\n  filter: brightness(0) invert(1);\n}\n\n.mf-footer h3 {\n  margin: 0 0 14px;\n  color: var(--mf-white);\n  font-size: 15px;\n}\n\n.mf-footer p,\n.mf-footer a {\n  color: #b8c5ca;\n  font-size: 14px;\n  text-decoration: none;\n}\n\n.mf-footer a {\n  display: block;\n  margin: 8px 0;\n}\n\n.mf-footer-bottom {\n  margin-top: 38px;\n  padding-top: 22px;\n  border-top: 1px solid #314149;\n  font-size: 13px;\n}\n\n@media (max-width: 999px) {\n  .mf-cloud-layout,\n  .mf-editor-layout,\n  .mf-form-hero-layout {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-form-elements,\n  .mf-form-field-properties {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-form-field-properties div:nth-child(3) {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-form-field-properties div:nth-child(4) {\n    border-top: 1px solid var(--mf-line);\n  }\n\n  .mf-editor-detail,\n  .mf-editor-detail-reverse {\n    grid-template-columns: 1fr;\n    gap: 42px;\n  }\n\n  .mf-editor-detail-reverse .mf-editor-detail-copy,\n  .mf-editor-detail-reverse .mf-editor-shot {\n    order: initial;\n  }\n\n  .mf-editor-proof {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-editor-elements {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-editor-proof article:nth-child(3) {\n    border-left: 0;\n  }\n\n  .mf-editor-proof article:nth-child(n + 3) {\n    border-top: 1px solid var(--mf-line);\n  }\n\n  .mf-architecture {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-architecture-step + .mf-architecture-step {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-cloud-screen,\n  .mf-editor-stage {\n    max-width: 760px;\n  }\n\n  .mf-page-hero-inner {\n    width: 64%;\n  }\n\n  .mf-page-hero h1 {\n    font-size: 46px;\n  }\n\n  .mf-section {\n    padding: 80px 0;\n  }\n\n  .mf-section h2 {\n    font-size: 38px;\n  }\n\n  .mf-grid-4,\n  .mf-integration-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .mf-split {\n    grid-template-columns: 1fr;\n    gap: 46px;\n  }\n\n  .mf-integration-detail-hero-layout {\n    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);\n    gap: 42px;\n  }\n\n  .mf-integration-detail-brand {\n    min-height: 210px;\n    padding: 32px;\n  }\n\n  .mf-integration-flow {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-integration-flow-arrow {\n    width: 100%;\n    height: 30px;\n    transform: rotate(90deg);\n  }\n\n  .mf-footer-grid {\n    grid-template-columns: 1.4fr 1fr 1fr;\n  }\n}\n\n@media (max-width: 689px) {\n  body.admin-bar.page .ct-header {\n    top: 46px;\n  }\n\n  body.page .ct-header [data-id=\"logo\"] .site-title a {\n    width: 150px;\n    height: 40px;\n  }\n\n  .mf-shell {\n    width: min(100% - 32px, 1240px);\n  }\n\n  .mf-page-hero {\n    min-height: 760px;\n    align-items: flex-start;\n    background-position: center bottom;\n    background-size: auto 36%;\n  }\n\n  .mf-cloud-hero,\n  .mf-editor-hero,\n  .mf-form-hero {\n    min-height: 0;\n    background-image: none;\n  }\n\n  .mf-cloud-layout,\n  .mf-editor-layout,\n  .mf-form-hero-layout {\n    gap: 38px;\n    padding: 48px 0 58px;\n  }\n\n  .mf-cloud-copy h1,\n  .mf-editor-copy h1,\n  .mf-form-hero-copy h1 {\n    font-size: 38px;\n  }\n\n  .mf-form-preview-body {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-form-preview-aside {\n    padding: 26px;\n  }\n\n  .mf-form-preview-fields {\n    padding: 28px;\n  }\n\n  .mf-cloud-proof {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-cloud-proof div {\n    padding: 26px 0;\n  }\n\n  .mf-cloud-proof div + div {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-cloud-choice {\n    display: block;\n    padding: 28px;\n  }\n\n  .mf-cloud-choice .mf-button {\n    margin-top: 22px;\n  }\n\n  .mf-feature-row {\n    grid-template-columns: 1fr;\n    gap: 10px;\n    padding: 28px 0;\n  }\n\n  .mf-editor-proof,\n  .mf-editor-elements,\n  .mf-editor-tools,\n  .mf-editor-routes,\n  .mf-form-elements,\n  .mf-form-field-properties {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-editor-proof article + article,\n  .mf-editor-proof article:nth-child(3),\n  .mf-editor-tool + .mf-editor-tool,\n  .mf-editor-tools-six .mf-editor-tool:nth-child(4),\n  .mf-editor-tools-four .mf-editor-tool:nth-child(3),\n  .mf-editor-route + .mf-editor-route {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-editor-element {\n    min-height: 0;\n  }\n\n  .mf-editor-tools-visual .mf-editor-tool {\n    min-height: 0;\n  }\n\n  .mf-editor-proof article:nth-child(n + 3) {\n    border-top: 1px solid var(--mf-line);\n  }\n\n  .mf-form-field-properties div + div,\n  .mf-form-field-properties div:nth-child(3),\n  .mf-form-field-properties div:nth-child(4) {\n    border-top: 1px solid var(--mf-line);\n    border-left: 0;\n  }\n\n  .mf-directory-nav {\n    top: 70px;\n  }\n\n  .mf-page-hero-inner {\n    width: 100%;\n    padding: 48px 0 300px;\n  }\n\n  .mf-integration-detail-hero-layout {\n    grid-template-columns: 1fr;\n    gap: 0;\n    padding: 48px 0 58px;\n  }\n\n  .mf-integration-detail-hero-layout .mf-page-hero-inner {\n    padding: 0;\n  }\n\n  .mf-integration-detail-brand {\n    min-height: 180px;\n    margin-top: 36px;\n    padding: 28px;\n  }\n\n  .mf-integration-detail-brand img {\n    max-height: 105px;\n  }\n\n  .mf-page-hero h1 {\n    font-size: 38px;\n  }\n\n  .mf-page-hero-copy {\n    font-size: 17px;\n  }\n\n  .mf-section {\n    padding: 66px 0;\n  }\n\n  .mf-section h2 {\n    font-size: 32px;\n  }\n\n  .mf-grid-2,\n  .mf-grid-3,\n  .mf-grid-4,\n  .mf-integration-grid,\n  .mf-footer-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .mf-card {\n    min-height: 0;\n    padding: 26px;\n  }\n\n  .mf-compare {\n    display: block;\n    overflow-x: auto;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mf-button {\n    transition: none;\n  }\n}\n\n<\/style>\n\n\n\n<section class=\"mf-page-hero mf-form-hero\">\n  <div class=\"mf-shell mf-form-hero-layout\">\n    <div class=\"mf-form-hero-copy\">\n      <p class=\"mf-kicker\">Formulare &amp; Double-Opt-In<\/p>\n      <h1>Formulare dort einsetzen, wo Kontakte entstehen<\/h1>\n      <p class=\"mf-page-hero-copy\">Erstellen Sie Formulare, binden Sie sie in Websites ein und verbinden Sie Anmeldung, Best\u00e4tigung, Liste und Folgekommunikation in mailfino.<\/p>\n      <div class=\"mf-actions\">\n        <a class=\"mf-button\" href=\"https:\/\/app.mailfino.de\/?mode=trial\">Demo-Konto anlegen<\/a>\n        <a class=\"mf-button mf-button-secondary\" href=\"\/kontakt\/\">Formular-Workflow besprechen<\/a>\n      <\/div>\n    <\/div>\n    <figure class=\"mf-form-preview\" aria-label=\"Beispiel eines Newsletter-Anmeldeformulars\">\n      <div class=\"mf-form-preview-window\">\n        <div class=\"mf-form-preview-bar\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/div>\n        <div class=\"mf-form-preview-body\">\n          <div class=\"mf-form-preview-aside\">\n            <strong>Newsletter f\u00fcr klare Kommunikation<\/strong>\n            <span>Neuigkeiten, Termine und Fachwissen direkt per E-Mail.<\/span>\n          <\/div>\n          <div class=\"mf-form-preview-fields\">\n            <strong>Newsletter abonnieren<\/strong>\n            <span>Mit aktiver Einwilligung und Double-Opt-In.<\/span>\n            <div class=\"mf-form-preview-input\">Vorname<\/div>\n            <div class=\"mf-form-preview-input\">E-Mail-Adresse *<\/div>\n            <div class=\"mf-form-preview-consent\">Ich m\u00f6chte den Newsletter erhalten und kann mich jederzeit abmelden.<\/div>\n            <div class=\"mf-form-preview-submit\">Anmeldung absenden<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<nav class=\"mf-directory-nav\" aria-label=\"Inhalte dieser Seite\">\n  <div class=\"mf-shell mf-directory-nav-inner\">\n    <a href=\"#prozess\">Prozess<\/a>\n    <a href=\"#einsatzbereiche\">Einsatzbereiche<\/a>\n    <a href=\"#editor\">Formular-Editor<\/a>\n    <a href=\"#elemente\">Elemente<\/a>\n    <a href=\"#einbindung\">Einbindung<\/a>\n    <a href=\"#fragen\">H\u00e4ufige Fragen<\/a>\n  <\/div>\n<\/nav>\n\n\n\n<section class=\"mf-section\" id=\"prozess\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Ein zusammenh\u00e4ngender Ablauf<\/p>\n      <h2>Vom ersten Formular bis zur weiteren Kommunikation<\/h2>\n      <p class=\"mf-section-lead\">Formulare sind nicht nur einzelne Eingabefelder. Sie verbinden die Erfassung eines Kontakts mit dem vorgesehenen Best\u00e4tigungsprozess, der passenden Liste und den n\u00e4chsten Schritten.<\/p>\n    <\/div>\n    <div class=\"mf-architecture\">\n      <article class=\"mf-architecture-step\">\n        <span>01<\/span>\n        <h3>Kontakt erfassen<\/h3>\n        <p>Das Formular passend zum Zweck aufbauen und die vorgesehene aktive Einwilligung abbilden.<\/p>\n      <\/article>\n      <article class=\"mf-architecture-step\">\n        <span>02<\/span>\n        <h3>Anmeldung best\u00e4tigen<\/h3>\n        <p>Bei Newsletter-Anmeldungen den vorgesehenen Double-Opt-In-Prozess verwenden.<\/p>\n      <\/article>\n      <article class=\"mf-architecture-step\">\n        <span>03<\/span>\n        <h3>Kontakt weiterf\u00fchren<\/h3>\n        <p>Best\u00e4tigte Kontakte einer Liste zuordnen und Weiterleitung, Beleg oder vorbereitete Folgekommunikation ausl\u00f6sen.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\" id=\"einsatzbereiche\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Mehr als Newsletter-Anmeldung<\/p>\n      <h2>Formulare f\u00fcr unterschiedliche Kontaktpunkte<\/h2>\n      <p class=\"mf-section-lead\">Der Formularzweck bestimmt, welche Angaben ben\u00f6tigt werden und welcher Prozess nach dem Absenden folgt.<\/p>\n    <\/div>\n    <div class=\"mf-grid-4\">\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">NEWSLETTER<\/span>\n        <h3>Anmeldungen<\/h3>\n        <p>Neue Interessenten erfassen und die Anmeldung mit einem Double-Opt-In-Prozess verbinden.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">KONTAKT<\/span>\n        <h3>Kontaktw\u00fcnsche<\/h3>\n        <p>Anfragen strukturiert aufnehmen und f\u00fcr die weitere Bearbeitung bereitstellen.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">ANFRAGE<\/span>\n        <h3>Prospekt und Termin<\/h3>\n        <p>Prospektanfragen oder Terminw\u00fcnsche mit den jeweils ben\u00f6tigten Angaben erfassen.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">EVENT<\/span>\n        <h3>Veranstaltungen<\/h3>\n        <p>Anmeldungen f\u00fcr Events und die anschlie\u00dfende Kommunikation vorbereiten.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\" id=\"editor\">\n  <div class=\"mf-shell mf-split\">\n    <div>\n      <p class=\"mf-eyebrow\">Formular-Editor und Vorlagen<\/p>\n      <h2>Formulare per Drag-and-Drop zusammenstellen<\/h2>\n      <p class=\"mf-section-lead\">Der Formular-Editor funktioniert \u00e4hnlich wie der Newsletter-Editor. Neue Formulare k\u00f6nnen aus Vorlagen erstellt und f\u00fcr den jeweiligen Einsatzzweck angepasst werden.<\/p>\n      <ul class=\"mf-checks\">\n        <li>Formulare per Drag-and-Drop erstellen<\/li>\n        <li>Mit einer Formularvorlage beginnen<\/li>\n        <li>Felder passend zum vorgesehenen Prozess ausw\u00e4hlen<\/li>\n        <li>Formularverhalten nach dem Absenden konfigurieren<\/li>\n      <\/ul>\n    <\/div>\n    <figure class=\"mf-editor-shot\">\n      <img decoding=\"async\" src=\"https:\/\/new.mailfino.com\/wp-content\/uploads\/2026\/07\/mailfino-formular-editor-2026-07-19.jpg\" alt=\"Aktueller mailfino Formular-Editor mit Elementpalette, Newsletter-Anmeldeformular und Gestaltungsoptionen\" loading=\"lazy\">\n      <figcaption>Elemente, Formularinhalt, Verhalten und Gestaltung werden in einer gemeinsamen Arbeitsansicht bearbeitet.<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\" id=\"elemente\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Felder und Inhalte<\/p>\n      <h2>Formulare aus passenden Elementen zusammensetzen<\/h2>\n      <p class=\"mf-section-lead\">Neben typischen Newsletter-Inhalten stellt der Editor eigene Formularelemente bereit. So entsteht aus Eingaben, Auswahlfeldern und Einwilligung ein vollst\u00e4ndiger Prozess statt eines isolierten E-Mail-Felds.<\/p>\n    <\/div>\n    <div class=\"mf-form-elements\">\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">Aa<\/span>\n        <h3>Eingabefelder<\/h3>\n        <p>Text, E-Mail-Adresse und weitere Angaben mit passender Datenfeldzuordnung erfassen.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">LISTE<\/span>\n        <h3>Auswahllisten<\/h3>\n        <p>Vorgegebene Optionen \u00fcbersichtlich als Drop-down zur Auswahl anbieten.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">WAHL<\/span>\n        <h3>Einfachauswahl<\/h3>\n        <p>Eine eindeutige Auswahl aus mehreren fachlich definierten M\u00f6glichkeiten abfragen.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">CHECK<\/span>\n        <h3>Checkboxen<\/h3>\n        <p>Optionale Angaben oder eine aktiv abzugebende Einwilligung abbilden.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">DOI<\/span>\n        <h3>Double-Opt-In<\/h3>\n        <p>Die Newsletter-Einwilligung mit dem vorgesehenen Best\u00e4tigungsprozess verbinden.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">H1<\/span>\n        <h3>\u00dcberschriften und Text<\/h3>\n        <p>Zweck, Hinweise und Datenschutzinformationen verst\u00e4ndlich im Formular erkl\u00e4ren.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">BILD<\/span>\n        <h3>Bilder und Layout<\/h3>\n        <p>Formularinhalte visuell strukturieren und an den jeweiligen Auftritt anpassen.<\/p>\n      <\/article>\n      <article class=\"mf-form-element\">\n        <span class=\"mf-form-element-symbol\">CTA<\/span>\n        <h3>Absende-Button<\/h3>\n        <p>Beschriftung und Darstellung des abschlie\u00dfenden Formularschritts festlegen.<\/p>\n      <\/article>\n    <\/div>\n    <div class=\"mf-form-field-properties\" aria-label=\"Konfigurierbare Feldeigenschaften\">\n      <div><strong>Platzhalter<\/strong><span>Den erwarteten Inhalt direkt im Feld verst\u00e4ndlich machen.<\/span><\/div>\n      <div><strong>Datenbankfeld<\/strong><span>Festlegen, wo der \u00fcbermittelte Wert in mailfino gespeichert wird.<\/span><\/div>\n      <div><strong>Pflichtfeld<\/strong><span>Notwendige Angaben kennzeichnen und eine eigene Fehlermeldung ausgeben.<\/span><\/div>\n      <div><strong>Tab-Reihenfolge<\/strong><span>Die Bedienreihenfolge der Felder per Tastatur kontrollieren.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-dark\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Double-Opt-In<\/p>\n      <h2>Best\u00e4tigung passend zum Newsletter-Prozess einrichten<\/h2>\n      <p class=\"mf-section-lead\">F\u00fcr Newsletter-Anmeldungen kann eine Double-Opt-In-Verifizierung verwendet werden. mailfino beschreibt daf\u00fcr unterschiedliche Prozessvarianten; welche Variante fachlich und rechtlich passt, muss f\u00fcr den konkreten Einsatzzweck gepr\u00fcft werden.<\/p>\n    <\/div>\n    <div class=\"mf-feature-rows\">\n      <article class=\"mf-feature-row\">\n        <span>Variante 1<\/span>\n        <h3>Verpflichtende Best\u00e4tigung<\/h3>\n        <p>Die Anmeldung wird erst nach der vorgesehenen Best\u00e4tigung weitergef\u00fchrt.<\/p>\n      <\/article>\n      <article class=\"mf-feature-row\">\n        <span>Variante 2<\/span>\n        <h3>Optionale Best\u00e4tigung<\/h3>\n        <p>Der dokumentierte Prozess kann eine optionale Double-Opt-In-Best\u00e4tigung vorsehen.<\/p>\n      <\/article>\n      <article class=\"mf-feature-row\">\n        <span>Variante 3<\/span>\n        <h3>Prozess ohne Double-Opt-In<\/h3>\n        <p>Auch ein Ablauf ohne Double-Opt-In ist technisch beschrieben; daraus folgt keine rechtliche Empfehlung.<\/p>\n      <\/article>\n      <article class=\"mf-feature-row\">\n        <span>E-Mail<\/span>\n        <h3>Best\u00e4tigungsmail bearbeiten<\/h3>\n        <p>Die Double-Opt-In-Best\u00e4tigungsmail kann bearbeitet und f\u00fcr den Prozess aktiviert werden.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\" id=\"einbindung\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Auf der Website bereitstellen<\/p>\n      <h2>Formular einbinden oder direkt verlinken<\/h2>\n      <p class=\"mf-section-lead\">Ein fertiges Formular kann per HTML-Code in eine Website eingebunden oder \u00fcber einen direkten Link aufgerufen werden.<\/p>\n    <\/div>\n    <div class=\"mf-grid-3\">\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">HTML<\/span>\n        <h3>In die Website einbinden<\/h3>\n        <p>Den bereitgestellten HTML-Code an der vorgesehenen Stelle der Website verwenden.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">LINK<\/span>\n        <h3>Direkt aufrufen<\/h3>\n        <p>Das Formular unabh\u00e4ngig von einer bestehenden Website \u00fcber einen direkten Link bereitstellen.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <span class=\"mf-card-mark\">POP-UP<\/span>\n        <h3>Als Pop-up anzeigen<\/h3>\n        <p>Pop-up-Verhalten und Verz\u00f6gerung f\u00fcr den vorgesehenen Einsatz konfigurieren.<\/p>\n      <\/article>\n    <\/div>\n    <div class=\"mf-editor-note\">\n      <strong>Einbettung kontrolliert anpassen<\/strong>\n      IDs, Namen, Klassen und versteckte Formularfelder d\u00fcrfen beim Einbetten nicht beliebig ver\u00e4ndert werden. Auch mit Inline-Styles k\u00f6nnen zus\u00e4tzliche Website-CSS-Regeln die Darstellung beeinflussen.\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Nach dem Absenden<\/p>\n      <h2>Den n\u00e4chsten Schritt bewusst festlegen<\/h2>\n      <p class=\"mf-section-lead\">Der Formularprozess kann nach einer erfolgreichen Anmeldung unterschiedliche dokumentierte Aktionen ausf\u00fchren.<\/p>\n    <\/div>\n    <div class=\"mf-feature-rows\">\n      <article class=\"mf-feature-row\">\n        <span>Weiterleitung<\/span>\n        <h3>Eigene Zielseite oder Danke-Seite<\/h3>\n        <p>Nach der Aktivierung kann auf eine angegebene URL oder eine generische Danke-Seite weitergeleitet werden.<\/p>\n      <\/article>\n      <article class=\"mf-feature-row\">\n        <span>Beleg<\/span>\n        <h3>Anmeldedaten per E-Mail \u00fcbermitteln<\/h3>\n        <p>Nach best\u00e4tigter Anmeldung kann ein Beleg mit Anmeldedaten an hinterlegte E-Mail-Adressen gesendet werden.<\/p>\n      <\/article>\n      <article class=\"mf-feature-row\">\n        <span>Folgekommunikation<\/span>\n        <h3>Vorbereitete E-Mail-Serie starten<\/h3>\n        <p>Nach einer Anmeldung k\u00f6nnen automatische E-Mails beginnen, beispielsweise eine vorbereitete Willkommens-E-Mail.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Cloud, Selfhosting oder Enterprise<\/p>\n      <h2>Formularprozesse im passenden Betriebsmodell nutzen<\/h2>\n      <p class=\"mf-section-lead\">KMU arbeiten direkt in der Cloud oder betreiben Formulare und Einwilligungsprozesse auf eigener Infrastruktur. Gr\u00f6\u00dfere Organisationen werden \u00fcber das eigenst\u00e4ndige Enterprise-Angebot betreut.<\/p>\n    <\/div>\n    <div class=\"mf-editor-routes mf-editor-routes-three\">\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Cloud<\/h3>\n        <p>Formular- und Newsletter-Prozesse ohne eigene Installation im Demo-Konto kennenlernen.<\/p>\n        <a class=\"mf-text-link\" href=\"\/cloud\/\">Cloud kennenlernen \u2192<\/a>\n      <\/article>\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Selfhosting<\/h3>\n        <p>Formulare und Einwilligungsprozesse in der eigenen technischen Umgebung betreiben.<\/p>\n        <a class=\"mf-text-link\" href=\"\/selfhosting\/\">Selfhosting ansehen \u2192<\/a>\n      <\/article>\n      <article class=\"mf-editor-route\">\n        <h3>mailfino Enterprise<\/h3>\n        <p>Individuelle Formular-, Integrations- und Betriebsanforderungen f\u00fcr gr\u00f6\u00dfere Organisationen abstimmen.<\/p>\n        <a class=\"mf-text-link\" href=\"https:\/\/enterprise.mailfino.de\/\">Enterprise-Angebot ansehen \u2192<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-dark\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Einwilligung und Datenschutz<\/p>\n      <h2>Technik unterst\u00fctzt den Prozess, ersetzt aber keine rechtliche Pr\u00fcfung<\/h2>\n      <p class=\"mf-section-lead\">Die Anforderungen an Formulare und Einwilligungen h\u00e4ngen vom konkreten Einsatzzweck ab. mailfino bildet technische Abl\u00e4ufe ab, gibt jedoch keine pauschale Rechts- oder DSGVO-Garantie.<\/p>\n    <\/div>\n    <div class=\"mf-grid-3\">\n      <article class=\"mf-card\">\n        <h3>Aktive Einwilligung<\/h3>\n        <p>Bei Newsletter-Anmeldungen muss die Einwilligung aktiv erfolgen; die betreffende Checkbox darf nicht vorangekreuzt sein.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <h3>Datensparsamkeit<\/h3>\n        <p>Zus\u00e4tzliche Formularfelder sollten fachlich begr\u00fcndet und auf den vorgesehenen Zweck abgestimmt werden.<\/p>\n      <\/article>\n      <article class=\"mf-card\">\n        <h3>Best\u00e4tigungsmail<\/h3>\n        <p>Die Double-Opt-In-Mail sollte nur die notwendigen Informationen zur Best\u00e4tigung, den Best\u00e4tigungslink und das Impressum enthalten, keine Werbung.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section\" id=\"fragen\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">H\u00e4ufige Fragen<\/p>\n      <h2>Fragen zu Formularen und Double-Opt-In<\/h2>\n    <\/div>\n    <div class=\"mf-faq\">\n      <details>\n        <summary>Wof\u00fcr k\u00f6nnen mailfino-Formulare verwendet werden?<\/summary>\n        <p>Dokumentiert sind Newsletter-Anmeldungen, Kontaktw\u00fcnsche, Prospektanfragen, Terminanfragen und Eventanmeldungen.<\/p>\n      <\/details>\n      <details>\n        <summary>Wie erstelle ich ein Formular?<\/summary>\n        <p>Formulare werden im Drag-and-Drop-Formular-Editor erstellt. F\u00fcr neue Formulare stehen Vorlagen als Ausgangspunkt zur Verf\u00fcgung.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann ich ein Formular in meine Website einbinden?<\/summary>\n        <p>Ja. Formulare k\u00f6nnen per bereitgestelltem HTML-Code eingebunden oder direkt \u00fcber einen Link genutzt werden. Technisch relevante IDs, Klassen, Namen und versteckte Felder d\u00fcrfen dabei nicht beliebig ver\u00e4ndert werden.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann ich die Double-Opt-In-Mail anpassen?<\/summary>\n        <p>Ja. Die Best\u00e4tigungsmail kann bearbeitet und aktiviert werden. Inhaltliche und rechtliche Anforderungen m\u00fcssen f\u00fcr den konkreten Prozess gepr\u00fcft werden.<\/p>\n      <\/details>\n      <details>\n        <summary>Was passiert nach einer best\u00e4tigten Anmeldung?<\/summary>\n        <p>Je nach Konfiguration kann eine Weiterleitung erfolgen, ein Beleg mit Anmeldedaten versendet oder eine vorbereitete Folgekommunikation gestartet werden.<\/p>\n      <\/details>\n      <details>\n        <summary>Ist Double-Opt-In immer ausreichend?<\/summary>\n        <p>Das l\u00e4sst sich nicht pauschal beantworten. mailfino stellt den technischen Prozess bereit, ersetzt aber keine rechtliche Beratung f\u00fcr den jeweiligen Einsatzzweck.<\/p>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"mf-section mf-section-soft mf-final\">\n  <div class=\"mf-shell\">\n    <div class=\"mf-section-head\">\n      <p class=\"mf-eyebrow\">Formularprozess pr\u00fcfen<\/p>\n      <h2>Erstellen Sie ein Formular im Demo-Konto<\/h2>\n      <p class=\"mf-section-lead\">Pr\u00fcfen Sie Editor, Einbindung und Double-Opt-In-Ablauf anhand Ihres eigenen Anwendungsfalls.<\/p>\n    <\/div>\n    <div class=\"mf-actions\">\n      <a class=\"mf-button\" href=\"https:\/\/app.mailfino.de\/?mode=trial\">Demo-Konto anlegen<\/a>\n      <a class=\"mf-button mf-button-secondary\" href=\"\/kontakt\/\">Formular-Workflow besprechen<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n","protected":false},"excerpt":{"rendered":"<p>Formulare &amp; Double-Opt-In Formulare dort einsetzen, wo Kontakte entstehen Erstellen Sie Formulare, binden Sie sie in Websites ein und verbinden Sie Anmeldung, Best\u00e4tigung, Liste und Folgekommunikation in mailfino. Demo-Konto anlegen Formular-Workflow besprechen Newsletter f\u00fcr klare Kommunikation Neuigkeiten, Termine und Fachwissen direkt per E-Mail. Newsletter abonnieren Mit aktiver Einwilligung und Double-Opt-In. Vorname E-Mail-Adresse * Ich m\u00f6chte [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-104","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":4,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":304,"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/pages\/104\/revisions\/304"}],"wp:attachment":[{"href":"https:\/\/new.mailfino.com\/en\/wp-json\/wp\/v2\/media?parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}