The Contact Us page starts with the same Page Header block as other pages, but after that it becomes more complex.
Looking at the HTML code, we can see multiple areas within our large, simple full-width page template, and their markup is somewhat complex. So instead of using the basic Full page template, we’re going to create a new Contact Us page template, which will be used just by the Contact Us page. This page template will hard-code some of the markup specific to the Contact Us page, and put areas within it.
The first block in our custom page template will be a Google Map block with a custom view template for this particular theme. It will span the full-width of the content area. Next, within the left column of the page we’ll add an area for the title, which will just be a content block, and then an area for the Express Form block, which is the standard Concrete CMS form block. We’ll create a custom template for this block, also named “contact_form”, to give it the custom design that this design requires.
Finally, the righthand column of our Contact page will get the simple HTML block listing addresses and phone numbers.
Recap
We’re going to need to create the following Concrete items for this page (in addition to other items we’re reusing from other pages):
- Contact Us page template
- Custom view template for the Google Map block to look appropriate in the theme.
- Contact Form custom template for the Express Form block.