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.
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.
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:
- Leave a message
The changes will save automatically.
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:
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:
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.
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