Skip to content

Add forms to pages

Here you put a signup form next to your message in one section. The form is a Drupal block, so you can place any open webform this way. Use this page for a form inside an existing page. For a full page with address, map and opening hours, follow Build a contact page.

The video builds a newsletter signup for a health clinic.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The form exists, for example as a 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.

Step 1: add a tinted section

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Hover the section and open More > Settings. Open the Style panel, pick a light grey Background and click Save.

Step 2: add two columns

  1. Click + on the section and pick Row. A new row arrives with two equal columns, the split you want here.

Step 3: write the signup message

  1. Click + in the left column and pick Text from the Content tab.
  2. Type "Get health tips by email" and set it to Heading 2 from the toolbar.
  3. Add one line on what subscribers get and how often, then click Save.

Step 4: insert the form

  1. Click + in the right column.
  2. Open the Drupal Blocks tab.
  3. Pick your form's block and click Save in its settings dialog. The form renders in the column.

Step 5: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview to see the message beside the form.

Where forms come from

Not shown in the video:

  • Webform module: every open webform is listed in the Drupal Blocks tab as "Block: DXPR builder: Webform:" followed by its name. Type the name in Search, or pick DXPR builder under Filter by category.
  • Core Contact module: its forms at Structure > Contact forms have no block of their own. The contributed Contact Block module adds a Contact block to the same tab.

Styling forms

Not shown in the video. Forms take your theme's styles. To change them:

  • Add classes under HTML classes in the block's General panel, and style those classes in your theme.
  • Set margin and padding around the form in the block's Style panel.

What you see

The grey band holds your heading and one line of text on the left and the form on the right. In preview the form works as it will for visitors, and submissions go to the form's own handlers. Choose Edit in the eye menu to keep working.

If you don't see the form

  • Your webform is not in the Drupal Blocks tab. The builder lists only open webforms. Go to Structure > Webforms (/admin/structure/webform) and set the form's status to Open.
  • The Drupal Blocks tab is missing or empty. The builder lists blocks only when the core Block Content module is on. Turn it on at Extend (/admin/modules).
  • Visitors see an empty column where the form should be. The block hides a webform from people who may not submit it. Allow their role to create submissions on the webform's Access settings.
  • 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.