Darmowe narzędzie do tworzenia sekcji kontaktowych dla stron internetowych. Formularz, mapa Google Maps, social media — podgląd na żywo i gotowy kod HTML + CSS.
<section class="contact-section" role="region" aria-label="Sekcja kontaktowa">
<div class="contact-container">
<div class="contact-header">
<p class="contact-subtitle">Chętnie odpowiemy na wszystkie pytania</p>
<h2 class="contact-title">Skontaktuj się z nami</h2>
</div>
<div class="contact-layout">
<div class="contact-info">
<div><h3 class="contact-company-name">Nazwa Firmy</h3></div>
<div class="contact-items">
<div class="contact-item"><span class="contact-icon">✉</span><span><a href="mailto:biuro@firma.pl" style="color:inherit;text-decoration:none;">biuro@firma.pl</a></span></div>
<div class="contact-item"><span class="contact-icon">☎</span><span><a href="tel:+48123456789" style="color:inherit;text-decoration:none;">+48 123 456 789</a></span></div>
<div class="contact-item"><span class="contact-icon">📱</span><span><a href="tel:+48600000000" style="color:inherit;text-decoration:none;">+48 600 000 000</a></span></div>
<div class="contact-item"><span class="contact-icon">📍</span><span>ul. Przykładowa 1, 00-001 Warszawa, Polska</span></div>
<div class="contact-item"><span class="contact-icon">🕐</span><span>Pon–Pt: 9:00–17:00</span></div>
<div class="contact-item"><span class="contact-icon">🌐</span><span><a href="https://firma.pl" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none;">https://firma.pl</a></span></div>
</div>
<div class="contact-social">
<a href="https://facebook.com" class="social-btn" target="_blank" rel="noopener noreferrer" aria-label="Facebook" title="Facebook">Fa</a>
<a href="https://instagram.com" class="social-btn" target="_blank" rel="noopener noreferrer" aria-label="Instagram" title="Instagram">In</a>
<a href="https://linkedin.com" class="social-btn" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" title="LinkedIn">Li</a>
</div>
</div>
<div>
<div class="contact-map">
<!-- Zastąp YOUR_API_KEY swoim kluczem Google Maps API -->
<iframe
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=ul.%20Przyk%C5%82adowa%201%2C%2000-001%20Warszawa%2C%20Polska"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Mapa dojazdu — Nazwa Firmy"
></iframe>
</div>
<div class="contact-form">
<h3 class="contact-form-title">Napisz do nas</h3>
<form onsubmit="return false;" novalidate>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="contact-name">Imię i nazwisko *</label>
<input class="form-input" type="text" id="contact-name" name="name" placeholder="Jan Kowalski" required />
</div>
<div class="form-group">
<label class="form-label" for="contact-email">Adres email *</label>
<input class="form-input" type="email" id="contact-email" name="email" placeholder="jan@firma.pl" required />
</div>
</div>
<div class="form-group">
<label class="form-label" for="contact-phone">Telefon</label>
<input class="form-input" type="tel" id="contact-phone" name="phone" placeholder="+48 600 000 000" />
</div>
<div class="form-group">
<label class="form-label" for="contact-message">Wiadomość *</label>
<textarea class="form-textarea" id="contact-message" name="message" placeholder="Opisz swoje zapytanie..." required></textarea>
</div>
<button class="form-submit" type="submit">Wyślij wiadomość</button>
</form>
</div>
</div>
</div>
</div>
</section>[ Poradnik ]
Tworzenie sekcji kontaktowej krok po kroku — od danych firmy po gotowy kod HTML + CSS.
Uzupełnij nazwę firmy, email, telefon, adres i godziny pracy. To podstawowe dane dla każdej sekcji kontaktowej strony internetowej.
Wybierz motyw (Light/Dark/Glass/Corporate), układ sekcji i kolory spójne z identyfikacją wizualną Twojej marki.
Włącz mapę dla firm stacjonarnych. W kodzie pojawi się iframe — zastąp YOUR_API_KEY kluczem z Google Cloud Console.
Opcjonalny formularz z polami: imię, email, telefon, wiadomość. Gotowy do integracji z Formspree, Web3Forms lub PHP.
Dodaj ikonki swoich profili społecznościowych. Możesz dynamicznie dodawać i usuwać platformy oraz wklejać swoje URL.
Skopiuj lub pobierz HTML, CSS albo pełny plik HTML. Wklej do swojego projektu i dostosuj do potrzeb.
Przy projektowaniu stron internetowych sekcja kontaktowa to jeden z najważniejszych elementów konwersji. Użytkownicy, którzy do niej dotrą, są już zainteresowani kontaktem — Twoim zadaniem jest ułatwić im ten krok.
Generator karty kontaktowej pozwala w kilka minut stworzyć profesjonalną sekcję bez znajomości HTML czy CSS. Idealny zarówno dla freelancerów, jak i agencji zajmujących się tworzeniem stron internetowych.
Wygenerowany kod jest czysty, semantyczny (używa section,role="region") i responsywny — gotowy do wklejenia do dowolnego projektu: statycznego HTML, WordPressa, Next.js lub innego frameworka.
[ FAQ ]
Najczęstsze pytania dotyczące generatora karty kontaktowej i sekcji kontaktowych na stronach internetowych.
[ Studio Kalmus ]
Generator to tylko narzędzie. Jeśli szukasz kompleksowego projektowania stron internetowych — napisz do nas. Studio Kalmus tworzy nowoczesne strony www dla firm z Piaseczna i całej Polski.