Add a Contact us page

This page is part of a series you should follow sequentially from beginning to end. Go to the first step.

Let’s implement a Contact us page. We want it to display a simple form and our slogan message, the same as on the Home page.

Therefore the page is a perfect candidate for reusing our existing Landing page template and Welcome slogan reusable content item.

Future ‘Contact us’ page

Create the page in the administration UI

Just like with Home page before, navigate to the Kickstart pages channel in the administration UI and create a new page:

  • Page name: Contact us
  • Content type: Landing page

Set the Slogan. This time, you can simply use the Select existing and pick the Welcome slogan you created before.

Selecting existing content item

Now, when you publish your page and look at the Preview, you’ll see it shows the same Welcome slogan text as the Home page.

The first part is done. Next, you need the form.

Build the form

In your Xperience administration, navigate to Digital marketing → Forms → New form to open a Form Builder .

Use the plus icon in the middle to add two fields:

  • Email
  • Leave a message

The changes will save automatically.

Adding fields using Form Builder

Switch to the General tab on the right side. Adjust the Form name and Code name, and Save:

  • Form name: Contact us
  • Code name: ContactUs

Your Contact us form should look like this:

New Contact us form

Use Page Builder to show the form and a custom message

Navigate to your Kickstart pages channel again and pick the Contact us page from the page tree on the left side.

Switch to the Page Builder view and click Edit page in the top-right corner.

Use the Page Builder area to add a Rich text widget, just like in the Home page. Enter the following text:

HTML

Need to send us a message?

Use this form, and we'll get back to you at the provided email address!

Click the plus icon again to add a Form widget. Then, configure the widget’s properties using the gear icon in the top-right corner.

Configure widget properties

Fill out the following:

  • Form properties → Select form: Select your new Contact us form.
  • After form submission → Display a message: Thanks! We’ll get back to you soon!

Click Apply and Publish your page.

Check your progress

Navigate to the root of your website and add /contact-us to the URL. You should be able to see the new Contact us page and submit the form.

Now that your website has two pages, let’s implement a simple navigation so visitors can easily toggle between them.

Previous step: Create a layout view — Next step: Model navigation

Completed steps: 10 of 13