We've been building out a contact page in Statamic. In this tutorial we are going to put the custom fields that we created in the last tutorial in the template file. This will allow us to display the content that we have saved. We will also look at some basic conditional logic using the custom field as a comparator. So let's get started!

As part of working up this tutorial I had to make some changed to the files we've been working on. Let's make those updates first.

In the Contact.yaml file (_config/fieldsets/) we now have the following:

title: Contact Page

fields:
  _template:
    display: Template
    type: templates

  image:
    type: file
    display: Upload an Image
    destination: assets/img
    show_thumbnail: true

  where:
    display: Where It’s At
    type: location

  instructions:
    display: Page Content
    required: false
    default:
    type: markitup

  thankyou:
    display: Thank You Page Content
    type: textarea

  email:
    type: text
    display: Email Address

  phone:
    type: text
    display: Phone Number

  twitter:
    type: text
    display: Twitter URL

  facebook:
    type: text
    display: Facebook URL

  dribbble:
    type: text
    display: Dribbble URL

  linkedin:
    type: text
    display: LinkedIn URL

  content:
    display: Page Content
    required: false
    default: special
    type: hidden

Specifically look at the Thank You Page Content text area. That was the Results Page Content. We also made the content field hidden and created an instruction custom field in the last tutorial post. The reason why is Statamic requires a Content field unless you specifically mark it as hidden. So by marking it as hidden we can control the order in which the fields appear.

At this point make sure to go to the Contact Us entry and make sure you have content in all of the fields. The content will make it easier to tell whether the next step has been completed properly.

Next we will be working in the (_themes/denali/templates) contact.html file. When building websites for clients I like to use conditional logic to make sure that the field has a value (is not empty) so that we are not outputting a lot of unecessary HTML and messing up the layout of our page. The way that you do that with Statamic is as follows:

{{ if email }}Email Address{{ endif }}

This code basically states that if email has a value (any value other than empty) then output the code. Otherwise it will just not output anything.

If we extrapolate this then we can do the following:

{{ if email }}

Email Address:Email Address

{{ endif }} {{ if phone }}

Phone Number: {{ phone }}

{{ endif }} {{ if twitter|dribbble|facebook|linkedin }}

  • {{ endif }} {{ if twitter }}
  • Twitter
  • {{ endif }} {{ if dribbble }}
  • Dribbble
  • {{ endif }} {{ if facebook }}
  • Facebook
  • {{ endif }} {{ if linkedin }}
  • Linkedin
  • {{ endif }} {{ if twitter|dribbble|facebook|linkedin }}

{{ endif }} {{ instructions }}

Notice that I also made sure to capture the undefined list HTML tag with conditional logic. The pipe ( | ) allows us to say that if any of the custom fields have any value then go ahead and output the contained code.

After you update with the contact.html file with the code from above the top of your contact us page should look like the following:

I've made one other change to the contact.html file as well. Eric's Contact Form code does not change the URL when there is a success, but it does internally have a way for you to kick out a note that the message has been sent. To do that you use the {{ success }} tag. Eric provides an example in the code on the Github page. But I want to take it a little bit further. So we are going to use the thankyou custom field that we created to allow a user to output whatever text they want when a visitor submits the contact form. You do that by doing the following:

{{ if success }}
	
{{ thankyou }}

{{ else }}

Notice that the {{ if success }} was already part of our code. All I did was add a div (that can be styled to attract attention) and the {{ thank you }} custom field. Now, whenever someone submits the contact form they will see whatever content you have put in the Thank You Page Content field.

You'll note that I left off using the Location field for another blog post. I got into that documentation and realized it was a bit more powerful than I thought it was going to be (good news) and decided I would put off that blog post for another day.

I have to say, I am really enjoying Statamic. I wasn't sure what I was going to feel as I was going through this. I've been a fanboy for ExpressionEngine for so long that I almost felt dirty even considering another CMS. Granted Statamic is not a full on replacement for EE... yet. Jack and Fred are kicking butt and have laid a good foundation. We are actively looking for a smaller project that we could use Statamic for. If that is you or if you know someone that needs a small business website then make sure to send us an email.