CTA
Secțiunea „Call to Action" — blocul final de conversie care transformă utilizatorul informat în lead calificat prin selectarea țării și trimiterea formularului de consultanță
Secțiunea CTA este ultima oportunitate de conversie a paginii și reunește toate elementele necesare pentru a declanșa acțiunea. Coloana stângă oferă pill-uri interactive de selectare a țării (click actualizează badge-ul din formular), un titlu motivațional și butoane de contact direct pe WhatsApp și Telegram — pentru utilizatorii care preferă comunicarea imediată. Coloana dreaptă conține formularul de consultanță: rând cu avatar consultant, titlu formular, badge-ul țării selectate dinamic, câmpuri de nume, email, telefon (cu selector de prefix internațional), buton de submit și mesaje de reasigurare + politică de confidențialitate. Disponibil în trei teme cromatice: cta-blue (recomandat), cta-orange și cta-dark.
Design structure
.cta-inner— two-column grid (1fr+420px).cta-left/.cta-right— content vs white form card.country-selector— flex-wrap pill group
Variant A · Blue .cta-blue
.cta-blue
Get your EU citizenship
the right way.
Our specialists have helped 500+ families secure EU citizenship. Leave your contact and we'll find the optimal program for you — free of charge.
No spam. Unsubscribe at any time.
Variant B · Orange .cta-orange
.cta-orangeGet your EU citizenship
the right way.
Our specialists have helped 500+ families secure EU citizenship. Leave your contact and we'll find the optimal program for you — free of charge.
No spam. Unsubscribe at any time.
Variant C · Dark .cta-dark
.cta-darkGet your EU citizenship
the right way.
Our specialists have helped 500+ families secure EU citizenship. Leave your contact and we'll find the optimal program for you — free.
Mobile — 400px frame (section-mobile)
Same markup as the blue variant with section-mobile. Scoped rules offset the global .container padding in narrow widths, put country pills on a horizontal scroll row, stack messenger buttons, use a 2×2 trust grid, and set inputs to 16px (avoids iOS focus zoom). Add section-mobile wherever you need this layout without relying on viewport media queries — the doc frame is 400px while the browser window may still be wide.
.section-mobile
Get your EU citizenship
the right way.
Our specialists have helped 500+ families secure EU citizenship. Leave your contact and we'll find the optimal program for you — free of charge.
No spam. Unsubscribe at any time.
Checklist
class="section cta"— wrapper; inner.containerthen.cta-sectionwith.cta-blue|.cta-orange|.cta-dark- Optional
section-mobile— stacked grid, tighter.containerpadding, pill row scroll, full-width messengers (seesections.css) - Scoped styles:
sections.cssunder.section.cta; tokens:tokens.css - Source reference:
sources/cta-improved.html(includes design-analysis card; not part of the shipped section)