---
url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-kontaktowa'
title: 'Strona kontaktowa. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:46:24+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz stronę kontaktową: mapę z twoim adresem, trzy
  sposoby kontaktu, każdy z ikoną, oraz formularz kontaktowy. Użyj jej
  do strony podlinkowanej w menu jako „Contact”. Sam formularz wewnątrz
  innej strony umieść zamiast tego według
  dodawania formularzy do stron.
  Film buduje stronę kontaktową urzędu miasta.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Strona kontaktowa.'
      description: |-
        Tu zbudujesz stronę kontaktową: mapę z twoim adresem, trzy
        sposoby kontaktu, każdy z ikoną, oraz formularz kontaktowy. Użyj jej
        do strony podlinkowanej w menu jako „Contact”. Sam formularz wewnątrz
        innej strony umieść zamiast tego według
        dodawania formularzy do stron.
        Film buduje stronę kontaktową urzędu miasta.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:46:24+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-kontaktowa'
      articleSection: Samouczek
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-kontaktowa'
      description: |-
        Tu zbudujesz stronę kontaktową: mapę z twoim adresem, trzy
        sposoby kontaktu, każdy z ikoną, oraz formularz kontaktowy. Użyj jej
        do strony podlinkowanej w menu jako „Contact”. Sam formularz wewnątrz
        innej strony umieść zamiast tego według
        dodawania formularzy do stron.
        Film buduje stronę kontaktową urzędu miasta.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 'Strona Główna'
            item: 'https://dxpr.com/pl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pl
---
[Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Samouczek](/pl/hc/documentation/learn-dxpr-builder/tutorials/overview) # Strona kontaktowa..

 Poznaj DXPR BuilderBuduj stronySamouczek

   ## W tym przewodniku

 Powiązane przewodniki

- [Dodawanie wideo](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/wideo)
- [Strona docelowa.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa)
- [Dodaj blok Drupala do swojej strony](/pl/hc/dokumentacja/nauka-dxpr-builder/integracje/bloki-drupal)

Tu zbudujesz stronę kontaktową: mapę z twoim adresem, trzy sposoby kontaktu, każdy z ikoną, oraz formularz kontaktowy. Użyj jej do strony podlinkowanej w menu jako „Contact”. Sam formularz wewnątrz innej strony umieść zamiast tego według [dodawania formularzy do stron](/pl/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

Film buduje stronę kontaktową urzędu miasta.

  ## Zanim zaczniesz

- Twoja rola ma uprawnienie **Edit with DXPR Builder**.
- Twój formularz kontaktowy istnieje jako blok, na przykład otwarty webform utworzony modułem Webform.
- Strona jest otwarta w kreatorze. Nową utworzysz w **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) przyciskiem **Save**.
- Nowe elementy lądują na górze sekcji albo kolumny. Dodawaj elementy kolumny w odwrotnej kolejności albo przeciągnij je potem na miejsce.

## Krok 1: dodaj mapę

1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**.
2. Kliknij **+** na sekcji i wybierz **Map** z karty **Content**.
3. Wpisz swój **Address**, ustaw **Map height** na 400 i kliknij **Save**.

Mapa osadza Mapy Google wyśrodkowane na adresie.

## Krok 2: dodaj dane kontaktowe

1. Najedź na sekcję i kliknij **Add Section Below**. Otwórz **More** > **Settings** nowej sekcji, wybierz **Align text center** w **HTML classes**, a potem jasnoszary **Background** w panelu **Style**. Kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Row**; powstaje z dwiema równymi kolumnami. Kliknij jej ikonę siatki (**Column layout**), wybierz preset **1/3 + 1/3 + 1/3** i kliknij **Save**.
3. Kliknij **+** w pierwszej kolumnie i wybierz **Text**. Wpisz „Visit us” jako **Heading 3**, dodaj adres i godziny otwarcia, a potem kliknij **Save**.
4. Kliknij **+** w tej samej kolumnie i wybierz **Icon**; ląduje nad tekstem. Wybierz zestaw **Font Awesome Free Solid**, wyszukaj `location-dot` i kliknij ikonę. Ustaw **Size** na **Extra Large (2x)** i kliknij **Save**.
5. Powtórz w drugiej kolumnie z „Call us” i ikoną `phone`, a w trzeciej z „Email us” i ikoną `envelope`.

Wybierz ten sam **Size** dla wszystkich trzech ikon, aby wiersz się wyrównał.

## Krok 3: dodaj formularz

1. Dodaj trzecią sekcję opcją **Add Section Below** i nadaj jej klasę **Align text center**.
2. Kliknij **+** na sekcji i otwórz kartę **Drupal Blocks**.
3. Wybierz blok swojego formularza kontaktowego i kliknij **Save** w jego oknie ustawień; formularz pojawia się w sekcji.
4. Kliknij **+** na sekcji jeszcze raz i wybierz **Text**; ląduje nad formularzem. Wpisz „Send us a message” jako **Heading 2**, dodaj jedną linijkę i kliknij **Save**.

Formularze utworzone w **Structure** > **Contact forms** (`/admin/structure/contact`) nie mają bloku w rdzeniu Drupala. Moduł dodatkowy Contact Block dodaje **Contact block** do tej samej karty.

## Krok 4: zapisz i podejrzyj

1. Kliknij **Save** na pasku narzędzi DXPR Builder.
2. Otwórz menu widoku (**ikona oka**) i wybierz **Preview**.

## Idź dalej

Niepokazane w filmie:

- **Dzwoń dotknięciem**: zaznacz numer telefonu w tekście, kliknij przycisk linku na pasku narzędzi i wpisz `tel:+31104001234`
- **Pisz kliknięciem**: zaznacz adres i podlinkuj go do `mailto:info@example.com`
- **Dowolny blok**: karta **Drupal Blocks** osadza bloki twojej witryny, takie jak formularze wyszukiwania, zapisy do newslettera i własne bloki

## Efekt

Mapa twojego adresu o wysokości 400 pikseli wypełnia górę strony. Pod nią szary pas pokazuje trzy wyśrodkowane kolumny, każdą z ikoną, nagłówkiem i twoimi danymi. Stronę zamyka formularz pod wyśrodkowanym nagłówkiem „Send us a message”.

## Jeśli nie widzisz strony jak na filmie

- **Mapa pokazuje złe miejsce.** Mapy Google szukają adresu tak, jak wpisany. Dodaj kod pocztowy, miasto i kraj do **Address** i zapisz ponownie.
- **Twojego formularza nie ma na karcie Drupal Blocks.** Kreator wymienia tylko otwarte formularze webform, a formularze kontaktowe z rdzenia potrzebują modułu Contact Block. Ustaw status formularza webform na **Open** w **Structure** > **Webforms** (`/admin/structure/webform`).
- **Ikony mają różne rozmiary.** Każda ikona trzyma własny **Size**. Otwórz ustawienia każdej ikony i wybierz ten sam.
- **Twoje zmiany zniknęły po przeładowaniu.** Stronę opuszczono przed kliknięciem **Save** na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz [Zmiany nie zapisują się](/pl/hc/dokumentacja/nauka-dxpr-builder/rozwiazywanie-problemow/zapisywanie-nie-dziala).

## Co dalej?

- [Element Wideo](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/wideo) z wirtualnym spacerem po biurze
- [Strona docelowa](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) jako główna strona marketingowa
- [Integracja bloków Drupala](/pl/hc/dokumentacja/nauka-dxpr-builder/integracje/bloki-drupal) o osadzaniu bloków