Freeform Page Instructions

This page contains information on how to complete the necessary fields when creating a new Freeform Page in Contentful

Important Notes

• Main Content is a simple markdown field that allows you to write copy with typical markdown styling features (like this unordered list)
• You can render HTML on the page by writing it directly into the Main Content markdown field, BUT you must put a line space above and below the HTML in the field for it to render properly. For example:

    I'm writing some copy here, making sure to put a line space below before
    I write any HTML

    <div class="my-div">
      <img style="my-style" src="https://my-url" alt="my description">
    </div>

    Good - I also put a line space after I wrote the HTML above, so I can keep
    writing some more copy here

You can also compare this page to its Contentful entry linked HERE

Feel free to copy anything present in this entry and paste it into the Main Content field of your page, but please do not change anything in the entry itself

Creating a Title and Slug

When you first create a new Freeform Page entry, the Title and Slug fields should look like this:

Complete the Title field first. As you type, the auto-generated timestamp in the Slug field will be replaced by an all-lowercase, kebab-case (inserting hyphens for spaces) version of your title.

Though the Slug field is auto-completed based on your title, it can be changed, but it must be written in lowercase with hyphens between words.

Hiding or Showing the Main Header

Within the Hide Header field, select either YES to hide or No to show the top main navbar of WWW on your page.

Important! Please do not use the Body field

This Rich Text field is currently error-prone due to issues that Gatsby and Contentful have not yet solved.

Using the Main Content Field

Locating and Using the URL of a Contentful Media Asset

When inserting a Contentful media asset (file) into the Main Content field using HTML, you will first need to copy the URL (web address) of where it "lives" in Contentful and then paste it into the source (src="...") of any given img, iframe, or video tag.

To get the URL:

1. Click the Media tab in Contentful's main nav menu
2. Click on an exisiting media asset in the list or add a new asset with the Add Asset button in the top right corner an complete the necessary fields
3. Click the Download file button (down-pointing arrow button in the bottom-left of the image preview)
4. Copy the URL (web address) from the broser tab that opens up
5. Paste the URL into the source parameter (e.g., src="paste://your.asset.url/here") of your tag and be sure to keep the quotes

Inserting Basic Unresponsive Images

Using the Insert media button in the Main Content field

Select either Add new media and link or Link existing media from the Insert media dropdown menu

Below is an example of a image inserted with the Insert media button AND whose width is greater than 1400px:

Below is an example of a image also inserted with the Insert media button BUT whose width is less than 1400px:

In either case, the generated markdown for an image inserted in this fashion looks something like this:

  ![my image title]
  (//images.ctfassets.net/cad7d5zna5rn/myImageId/aBigHashOfNumbersAndLetters/
  my-image-filename.png)
  

Inserting an Unresponsive Image with an HTML image tag

Below is an example of an unresponsive image inserted with an HTML image tag. The width of this image is greater than 1400px so it fills the entire width of the Main Content container:

HTML to copy:

<img src="paste://your.asset.url/here" alt="write short asset description here">

Inserting Responsive and Centered Images

Below is an example of a centered image inserted with an HTML image tag and style scoped for mobile responsiveness

HTML to copy:

<div style="width:100%">
  <style scoped>
    .write-class-name-here {
      width: 95%;
    }
    @media (min-width: 768px) {
      .write-class-name-here {
        width: 60%;
      }
    }  
  </style>
  <img class="write-class-name-here" style="display:flex; margin:0 auto" src="paste://your.asset.url/here" alt="write short asset description here">
</div>

IMPORTANT! Replace write-class-name-here in the example above with your own unique class name in all three places and be sure to keep the quotes

Inserting Videos Hosted on Contentful

Below is an example of an unresponsive video inserted with an HTML iframe tag:

HTML to copy:

<iframe src="paste://your.asset.url/here" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"> </iframe>

Below is an example of a centered video inserted with an HTML iframe tag and style scoped for mobile responsiveness

HTML to copy:

<div style="width:100%">
  <style scoped>
    @media (min-width: 768px) {
      .write-class-name-here {
        width: 560px;
        height: 315px;
      }
    }  
  </style>  
  <iframe class="write-class-name-here" src="paste://your.asset.url/here" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" style="display:flex; margin:1em auto"> </iframe>
</div>

IMPORTANT! Replace write-class-name-here in the example above with your own unique class name in both places and be sure to keep the quotes

Inserting Videos Hosted on a Third Party Service

(e.g., YouTube)

When linking a YouTube video on your page in an iframe tag, you will first need to get the embedded link of the video and then paste it into the source (src="paste://your.service.embed/url/here") of the tag. Be sure to keep the quotes!

Directions for locating the embeded link of a YouTube video can be found HERE

Below is an example of an unresponsive video inserted with an HTML iframe tag:

HTML to copy:

<iframe src="paste://your.service.embed/url/here" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"> </iframe>

Below is an example of a centered video inserted with an HTML iframe tag and style scoped for mobile responsiveness

This video will have the same responsive features as the previous Contentful-hosted example

HTML to copy:

<div style="width:100%">
  <style scoped>
    @media (min-width: 768px) {
      .write-class-name-here {
        width: 560px;
        height: 315px;
      }
    }  
  </style>  
  <iframe class="write-class-name-here" src="paste://your.service.embed/url/here" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" style="display:flex; margin:1em auto"> </iframe>
</div>

IMPORTANT! Replace write-class-name-here in the example above with your own unique class name in both places and be sure to keep the quotes

Search Engine Optimization

Exclude From Lookup

Select YES if you do not want this page to be indexed by Google or other search engines

Select NO if you want this page to be searchable

Linking Custom Meta Tags

Use this field to create new or link existing custom meta tags for your page to suit your particular SEO needs

(e.g., adding an image file for social media preview)

This field will link to an entry of the content type HTML Meta Tags

Floating Bottom Banner

Select YES to hide the floating bottom blue banner

Select NO to show it on the page

You can also customize the bottom banner by creating a new or linking an existing custom bottom banner on your page to depending on your needs

This will link to an entry of the content type Custom Floating Bottom Banner

Hiding or Showing the Main Footer

Within the Hide Footer field, select either YES to hide or NO to show the bottom main footer of WWW on your page.

Page last updated 10/2/2020