How to Model a Contact Us page

Having a "Contact Us" page on your website is a standard these days. It gives your website visitors an avenue to communicate with you directly. This page is often one of the important pages on the website regarding customer relationships. This article will showcase how to build an effective content modeling for the Contact us" page.

Page structure

Static Fields
Dynamic Zone

This section will be in the static zone, so editors won't be able to move it around:

  • h1 heading for the section title

Inside group field (allowing to create multiple entries):

  • Title field - title of communication channel
  • Rich Text - description of the section
  • Key Text - button text
  • Link - button link to another page
1 of 4
< PreviousNext >

"Team" slice will showcase that there are real people behind the company.

In the non-repeatable zone:

  • Title field set to h2 for the section headline
  • Rich Text field - description of the section

In the repeatable zone:

  • Image field with 30x30 dimensions
  • Rich Text for the biography of your team members
2 of 4
< PreviousNext >

CTA Banner section slice.

In the non-repeatable section:

  • Image field - banner image
  • Title field - title next to banner image
  • Key Text field for the button text
  • Link field - button link
3 of 4
< PreviousNext >

You can handle labels for the forms with Prismic. Form's input logic will be handled directly by your application.
In the repeatable zone:

  • Key Text field for the form's labels
4 of 4
< PreviousNext >

How to set it up in Prismic

  • Create a new repeatable Custom Type
  • Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type
CopyExpand/Collapse

What editors will see?

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call