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

contentful logo

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:

intitial title and slug screenshot

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.

completed title and slug screenshot

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.

custom slug screenshot

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.

hide header screenshot

Important! Please do not use the Body field


do not use body screenshot

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


Please Note:

If the image width is wider than the screen width of a desktop computer (typically 1440px), inserting an un responsive image will result in its filling the entire width of the Main Content container

If the image width is less than the typical screen width of a desktop computer, an unresponsive image will render at its set width (e.g., 500px) and justified to the left margin


Using the Insert media button in the Main Content field

insert media screenshot

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:

conquer pain 3

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

Surgery hero

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:

mountain hiking

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

On screens greater than 767px wide, the image will fill 60% percent

On screens 767px wide and smaller, the image will fill 95% percent

๐Ÿ˜Ž๐Ÿ“ฑ Check it out on a mobile device! ๐Ÿ“ฑ๐Ÿ˜Ž

fishing on the beach

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

On screens greater than 767px wide, the dimensions of the video will be set to 560px by 315px

On screens 767px wide and smaller, the video will be set to the default dimensions of 300px by 150px

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

exclude from lookup screenshot

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

custom metatags screenshot

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


floating bottom banner screenshot

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

hide footer screenshot

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