markbain / oban-site-userguide

Oban Website User guide

This is the user guide and conventions of the Oban Website found at http://www.obandigital.com.

Table of contents

• Forms
  • Creating a thank you page
  • Creating a form
  • Linking into a post OR
  • Creating a form page
• Services
  • Create a new service page
  • Add menu
  • Add custom post type
  • Add custom post type to services field group
  • Add custom post
  • Add services custom post

Forms

Top

Forms comprise of:

• a thank you page
• a form, added in Forms (Gravity Forms)
• a shortcode added to a post

Login

• Login to the production site.
• Select the correct site e.g. Oban UK from the My Sites dropdown.

Creating a thank you page

Top

• Select Pages from the left hand navigation.
• This will show a list of all the pages.
• Select Add New to create a new page
• Set the fields according to the conventions

  • Parent in the right hand navigation to Thank You

  • Name to Thank You - {{form name}}

  • Body to (updating the name and link)

    • UK:

    [vc_row][vc_column][vc_column_text]
    Thank you for completing the form.
    Please click the download link below to access your {{name}}.
    <a href="http://www.obandigital.com/gb/wp-content/uploads/sites/3/2015/05/{{/path/to//uploaded/file.pdf}}">{{name}}</a>
    For further information please contact Oban Digital on <a href="tel:[phone]">[phone]</a> or email <a href="mailto:[email protected]">[email protected]</a>.
    [/vc_column_text][/vc_column][/vc_row]

    • US:

    [vc_row][vc_column][vc_column_text]
    Thank you for completing the form.
    Please click the download link below to access your {{name}}.
    <a href="http://www.obandigital.com/us/wp-content/uploads/sites/2/{{/path/to//uploaded/file.pdf}}">{{name}}</a>
    For further information please contact Oban Digital on <a href="tel:[phone]">888.815.4494</a> or email <a href="mailto:[email protected]">[email protected]</a>.
    [/vc_column_text][/vc_column][/vc_row]

  • All in One SEO Pack Title to a friendly title if required (overrides the name when viewing)

• Select Publish

Thank you page conventions

Thank you pages must have the:

• parent page set to

  Thank You
  

• title set to

  Thank You - {{form name}}
  

  e.g.

  Thank You - Download: Whitepaper 10 Key Dates
  

• Optionally: All in One SEO Pack title set to friendly text e.g.:

  Thanks! Download your whitepaper.
  

Creating a form

Top

• Select Forms from the left hand navigation.
• This will show a list of all the forms.

EITHER: Duplicate existing

• Hover over the title of an existing form that matches your fields
• Select Duplicate
• Click on the new form title to go to the form editor
• Note the ID underneath the title
• Update the Form Settings

OR: Add new

• Select Add New to create a new form
• Add a form title according to the conventions and click Create Form
• This will take you to the form editor

Form editor

• Click on Single Line Text under Standard Fields on the right hand navigation to add a simple text field
• Click on Untitled to show the field settings
• Update Field Label from Untitled to Full Name and tick Required
• Click the Appearance tab. Update Placeholder to Full Name. Note the Custom CSS Class field, which can be set to
  • empty for a full width field
  • gf_left_half to show the field on the left
  • gf_right_half to show the field on the right
• For contact forms add the following fields:
  • Single Line Text: Field Label: Full Name, Required: ticked, Placeholder: Full Name
  • Single Line Text: Field Label: Company, Required: ticked, Placeholder: Company, Custom CSS Class: gf_left_half
  • Single Line Text: Field Label: Job Title, Required: ticked, Placeholder: Job Title, Custom CSS Class: gf_right_half
  • Single Line Text: Field Label: Email, Required: ticked, Placeholder: Email, Custom CSS Class: gf_left_half
  • Single Line Text: Field Label: Telephone, Required: ticked, Placeholder: Telephone, Custom CSS Class: gf_right_half
• Select Update Form at the bottom of the right hand navigation to save changes
• Update the Form Settings

Form Settings

• Select Form Settings from the navigation above the fields
• If necessary update the Form title
• Select Confirmations from the left hand navigation bar
  • Click on Default Confirmation to edit the confirmation page
  • Select Confirmation Type: Page
  • Select the Page previously setup: Thank You - {{form name}}
• Select Notifications from the left hand navigation bar
  • Click on Admin Notification to edit the notification
  • Update Send to Email to [email protected]
  • Update other fields according to the conventions e.g.
    • From Name: {Full Name:1}
    • Reply To: {Email:4}
    • Subject: [Oban Site GB] {form_title}
  • Select Update Notification at the bottom of the page

Contact form conventions

Contact forms must have the:

• form name in the format

  ({{download}}) ({{type}}) {{name}}
  

  e.g.

  Download: Whitepaper 10 Key Dates
  Contact Us
  

• the from name set to the visitor's name:

  {Full Name:1}
  

• the from email set to:

  {admin_email}
  

• the reply to email set to the visitor's email:

  {Email:4}
  

• the subject in the form (note {form_title} will automatically pull in the name)

  [Oban Site {{2 letter iso code GB or US}}] {form_title}
  

  e.g.

  [Oban Site GB] {form_title}
  [Oban Site US] {form_title}
  

Linking into a post

Top

• Note the ID of the form you wish to display under the title

• Select Posts on the left hand navigation. This will display all posts.

• Locate the post you wish to add the form to

• Add the following html and shortcode to the page replacing the ID with the form id:

  <strong>Fill in the form below to receive your FREE whitepaper</strong>
  
  [gravityform id="{{id}}" title="false" description="false"]

• Click Update to save changes

Creating a form page

Top

• Select Pages from the left hand navigation.
• This will show a list of all the pages.
• Select Add New to create a new page
• Set the fields according to the conventions

  • Parent in the right hand navigation to Form

  • Name to Form - {{form name}}

  • Body to (updating the name and link)

    [vc_row][vc_column width="1/1"][vc_column_text]
    <div id="infocal">
    <p style="text-align: center;">
    Thank you for your interest in our Global Partner Programme.
    Please fill in the form below and we will be in contact shortly.
    </p>
    </div>
    [/vc_column_text]
    [gravityform id={{id}} title=false description=false ajax=false tabindex=49]
    [/vc_column][/vc_row]

  • All in One SEO Pack Title to a friendly title if required (overrides the name when viewing)

• Select Publish

Form page conventions

Thank you pages must have the:

• parent page set to

  Form
  

• title set to

  Form - {{form name}}
  

  e.g.

  Form - Download: Whitepaper 10 Key Dates
  

• Optionally: All in One SEO Pack title set to friendly text e.g.:

  Download your whitepaper.
  

Services

How to add a completely new services section

Create a new service page

• Select New page in the Wordpress Navigation
• Set your title and content
• Set template to Services - Full Width
• Press Publish (or Save Draft if you do not want this page to be publically visible yet)

Add menu

To add the service page to the main menu

• Select Appearance > Menus in the Wordpress Navigation
• Select Main Menu in the Menu dropdown
• Tick your page in the list and press Add to menu
• Drag your new menu item from the bottom to reorder the menu
• Reorder any submenu items necessary under the new Service
• Press Save Menu

Add custom post type

To create the green icons for sub menu items of the new service page

• Select CPT UI > Add New Post Type in the Wordpress Navigation
• Set Post Type Slug to a different value than the page slug
• Set labels to Services X and Service X (where X is your new service type)
• Set Exclude from Search: True
• Set With Front: False
• Set: Supports: Title, Featured Image
• Press Add Post Type
• Press F5 (refresh) to reload the Wordpress Dashboard and show your new post type in Wordpress Navigation

Add custom post type to services field group

To allow selecting a page to direct the new custom posts to

• Custom Fields
• Select Services
• Press Add Rule Group
• Post Type is equal to Service X

Add custom post

To create the green icons on the new service page

• Select Services X (where X is your new service type) in the Wordpress Navigation
• Add New Post
• Add Title of the page direct to
• Set page to the page to direct to
• Set icon to a white with no background (circle is generated automatically)
• Press Publish

Add services custom post

To create the new service type green icons on the top level Services page

• Select Services in the Wordpress Navigation
• Add New Post
• Add Title of the Sevices X page to direct to
• Set page to the Services X page to direct to
• Set icon to a white with no background (circle is generated automatically)
• Press Publish