Skip to content

Create a contact page

Here you build a contact page: a map of your address, three ways to reach you with an icon each, and a contact form. Use it for the page your menu links to as "Contact". To put only a form inside another page, follow Add forms to pages instead.

The video builds the contact page of a city council.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • Your contact form exists as a block, for example an open webform made with the Webform module.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their section or column. Add the elements of a column in reverse order, or drag them into place afterwards.

Step 1: add the map

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Click + on the section and pick Map from the Content tab.
  3. Type your Address, set Map height to 400 and click Save.

The map embeds Google Maps centred on the address.

Step 2: add the contact details

  1. Hover the section and click Add Section Below. Open the new section's More > Settings, pick Align text center under HTML classes, then a light grey Background in the Style panel. Click Save.
  2. Click + on the section and pick Row; it arrives with two equal columns. Click its grid icon (Column layout), pick the 1/3 + 1/3 + 1/3 preset and click Save.
  3. Click + in the first column and pick Text. Type "Visit us" as Heading 3, add the address and opening hours, and click Save.
  4. Click + in the same column and pick Icon; it lands above the text. Choose the Font Awesome Free Solid set, search for location-dot and click the icon. Set Size to Extra Large (2x) and click Save.
  5. Repeat in the second column with "Call us" and the phone icon, and in the third with "Email us" and the envelope icon.

Pick the same Size for all three icons so the row lines up.

Step 3: add the form

  1. Add a third section with Add Section Below and give it the Align text center class.
  2. Click + on the section and open the Drupal Blocks tab.
  3. Pick your contact form's block and click Save in its settings dialog; the form appears in the section.
  4. Click + on the section again and pick Text; it lands above the form. Type "Send us a message" as Heading 2, add one line and click Save.

Forms made at Structure > Contact forms (/admin/structure/contact) have no block in Drupal core. The contributed Contact Block module adds a Contact block to the same tab.

Step 4: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

Go further

Not shown in the video:

  • Tap to call: select the phone number in the text, click the link button on the toolbar and enter tel:+31104001234
  • Click to email: select the address and link it to mailto:info@example.com
  • Any block: the Drupal Blocks tab embeds the blocks on your site, such as search forms, newsletter signups and custom blocks

What you see

A 400 pixel map of your address fills the top of the page. Below it a grey band shows three centred columns, each with an icon, a heading and your details. The form closes the page under its centred "Send us a message" heading.

If you don't see the page as shown

  • The map shows the wrong place. Google Maps searches for the address as typed. Add the postcode, city and country to Address and save again.
  • Your form is not in the Drupal Blocks tab. The builder lists only open webforms, and core contact forms need the Contact Block module. Set the webform's status to Open at Structure > Webforms (/admin/structure/webform).
  • The icons are different sizes. Each icon keeps its own Size. Open the settings of each icon and pick the same one.
  • Your changes are gone after a reload. You left the page before clicking Save on the builder toolbar. If Save shows an error, see Changes do not save.

What's next?

Something wrong or missing on this page? Report it or edit the page.