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.
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:
- Click the Media tab in Contentful's main nav menu
- 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
- Click the Download file button (down-pointing arrow button in the bottom-left of the image preview)
- Copy the URL (web address) from the broser tab that opens up
- 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

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
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! ๐ฑ๐

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

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