Documentation for the software we use:

Divi Builder (web page editor and WordPress theme)
https://www.elegantthemes.com/documentation/divi/

Divi Update Blog about new features
https://www.elegantthemes.com/blog/theme-releases

Divi Resources Blog with design ideas
https://www.elegantthemes.com/blog/divi-resources

WordPress
https://codex.wordpress.org/Main_Page

Gravity Forms (creates a form)
https://www.gravityhelp.com/documentation/

Gravity Flow (creates an application process using Gravity Forms)
http://docs.gravityflow.io/

How to Show or Hide the Odyssey Application

The page Admission Form A: Student Application Form is hidden before or after application dates by creating a password to view it. To remove, add or edit the password, in WordPress > Pages list of pages hover over Admission Form A page and click Quick Edit. Leaving password blank makes the page public. Adding a password automatically displays a message that the page is hidden. Having a password lets you give that to any student who you are allowing to apply after the deadline.

How to Save an Excel File of Students On A Workflow Step

Sometimes you may need a mailing list of students stuck on one workflow step, such as those whose applications will expire because they lack a recommendation or payment. Here’s how.

1) In WordPress Dashboard click Forms > Import/Export.
2) In Export Entries select the Student Application form for your year.
3) Check only the fields you need, like Odyssey ID, first name, last name, primary email
4) At bottom check Conditional Logic and select “Workflow Step” and set to IS and after that in the selection box choose the specific workflow step that your students you want to mail are on.
5) At bottom click Download Export File and save an Excel sheet of those students on your PC.

Evaluating a New Student Application in the Workflow

WordPress users assigned to a role are allowed to evaluate applications. Scroll down to User Roles to learn how to assign roles.
Two Ways to Evaluate
1) Click a Link in an Email Notification. You’ll get an email each time an application is waiting to be evaluated, with a link to one student’s application. You will edit it on a special page on OdysseyAtlanta.org without having to login to the WordPress Dashboard. Note: there is also in every email a link to reach without logging in your Workflow Inbox which lists every student you need to evaluate. Click on one to open the application.
OR
2) Log in to WordPress Dashboard at https://OdysseyAtlanta.org/wp-admin
In WordPress Dashboard in black left column under Workflow click Inbox
In the Inbox list find the Application to work with and click it to open it.

To Evaluate An Application
1) Scroll up and down in the application to review the students answers.
2) The fields at bottom highlighted in green are where you must enter your evaluation. Most of your evaluation answers give each student a score, so later it’s easy to find the highest scoring applicants.

Saving Your Evaluation
The Update button saves your work. If you in WordPress Dashboard the Update button is blue and in the top right column of the student’s application.
If you used an email link and are viewing on the OdysseyAtlanta.org special page, the Update button is red and is at the bottom of the application.

Before you click the Update button select either option above it… 
1) “In Progress” will save your work and let you finish later. The evaluation isn’t complete yet.
2) “Complete” will save your work and finish the evaluation, moving the applicant to the next step in the application workflow, ready for a final decision of Approve or Reject.

How to Approve/Reject New Student Applications

Before anyone will Approve/Reject students check that the messages sent to students are defined the way you wish in the Workflow in the New Student: Approve/Reject step. They are in the Email section in that step, look for Approve Email and Reject Email tabs.

Only WordPress users who are assigned the roles Director: Elementary, Director: Middle, or Director: HIgh can view in the Workflow Inbox any first-time students who need Appove or Reject action. Scroll down to User Roles to learn how to assign roles.

In WordPress dashboard the Workflow > Inbox that lists new students to approve/reject doesn’t let you know the student’s application score, so the easiest way is open two browser tabs, one on Workflow Inbox, and the second tab on Forms -> Entries > Student Application to show a list of applications and set up that list like this: Then set up Entires as follows:

1) To display only students who need Approve/Reject, atop Entires set the filter drop downs to: Workflow Step -> Is -> New Student Approve/Reject

2) When the entries list appears, to change the columns shown in the list, click the GEAR icon at top right. You probably wish to display Quiz Score Total and Quiz Percentage. The first shows total points, the second is percentile the students falls in. The Quiz scores come from the Student Application questions the Odyssey evaluator uses to score applications, which are Gravity Forms Quiz type questions that have been assigned scores (see https://docs.gravityforms.com/quiz-add-on/ for documentation.)

3) In the Entries list click the Quiz Score Total header twice. The first clicks sorts low to high, the 2nd click changes to hi to low.

4) Note the Entry ID for a top-ranked student you may wish to Approve, or a low ranked student who may wish to Reject.

You can’t Approve/Reject in a Gravity Forms list, so when ready, in the first tab in Workflow Inbox, find that student’s Entry Id and click it.

5) The Workflow Inbox screen opens showing the student’s application, so you can scroll to review it as needed, and in the top right column, are the Approve/Reject buttons, and a box where you can enter a note if needed. When you click either button the appropriate notification message is instantly sent to the student telling them they were accepted or rejected.

Another way to work would be to export a spreadsheet from Gravity Forms > Student Application selecting only New Students who are not Approve/Reject and sort the list in Excel by Quiz Score. Then use that list of Entry Id’s to lookup in Workflow Inbox.

Change a Recommender in an Application

1) In left black WordPress admin menu hover Forms then under it choose Entries
2) Find the student’s form and double click student’s name to open it.
3) Edit the recommender’s name and email address.
4) When done editing in right column of the editor click blue Update button.
5) Below the update button in Workflow box click View.
6) You will now be viewing in Workflow Inbox 
7) In right column under Admin for “select an action” choose under Send To Step choose Restart the Workflow.
That will send a new copy of application with the new recommender’s name in it to the student and then automatically move to next step to Email Application to Recommender.
Normally, you would not restart Workflow to beginning, but just use Send A Step to go right to the Email Application to REcommender. But since you edited the appplication to change that person’s name, in this case makes sense to restart the whole workflow to also send the revised app to the student, too.

Recover a Student’s Save and Continue Link

In a form the Save and Continue button when clicked goes to a web page that asks the user to then type in ANY email they wish, and then have an email sent there with a link to continue the form later on. Note that a user can give ANY email, not necessarily what was the primary email, etc. on the form. In other words, the Save and Continue email given has nothing to do with email fields on the form.

If a parent/student calls to say they lost their link,  when logged in as Admin in WordPress you can go to:

https://odysseyatlanta.org/wp-admin/tools.php?page=save-and-continue-link-recovery

Or in WordPress Dashboard click in black column on Tools then Save and Continue Link Recovery to get a list.

In that list, click on View Entry and it will display the application for a student, and the URL web address in the browser is the full link to email to a parent/student to get back to their application.

To find a student in the Recovery list requires looking to find the email address, and hopefully you will find the one the parent gave you.

But sometimes you may not IF they parent/student gave a different email to the Save and Continue popup.

Accepting a Cash or Check Application Fee

If a student pays an application fee by cash or check instead of using the online credit card form, you need to manually move the student off the payment form workflow step and onto the next step as follows…

1) In left black WordPress admin menu hover Forms then under it choose Entries
2) Find the student’s form and double click student’s name to open it.
3) In right column of the editor in Workflow box click View.
4) You will now be viewing in Workflow Inbox and need to
5) In right column under Admin for “select an action” choose under Send To Step choose Returning Student: Update 2018 Decision in Application. (No worry if the student is not a returning student because the workflow will know and automatically skip that step and move the student to New Student: Update 2018 Decision in Application.)
You will need to keep accounting records for cash or check payments because Stripe gateway only tracks accounting for credit card payments.

User Roles

In WordPress users are created with login credentials and then assigned to roles that define what they can/cannot do in the WordPress Dashboard.

The roles we use:

Director: High
Director: Middle
Director: Elementary
These are allowed to Approve or Reject First-Time Student Applications.

Evaluator roles exist for each grade level. These let the user grade Student Applications and then they are assigned to a Director to approve or reject.

To assign a user to one or more roles:
1) In WordPress Dashboard column at left click Users
2) Check the box to the left of the users to select one or more
3) Atop the list choose a role within either Add Role and click Add button, or Remove Role and click Remove.

Tricks for Editing Web Pages

Single Line Trick

When editing text in WordPress, when you click you Enter key, by default WordPress assumes you are starting a new paragraph, and adds extra space between the line above and the new line created. If you want to add a new line directly below without any space, then hold down the SHIFT key when pressing enter.  If by accident you get extra space between two lines, just put  your cursor in front of the second line, hit backspace to move it up to right of the line above, then hold SHIFT and press ENTER to move it directly below.

Section Colors

When adding a new section in the Divi Page Builder, by default it will have a white background. To use Odyssey’s standard blue background, change the Section in the Content tab so Transparent Background Color is Yes. This makes the section have no background color, letting the website’s default blue background show instead. Or course, you can turn Transparent off and then use any color background you choose, but it is good web design practice is to consistently use similar colors throughout the website.

The Color PIcker display that Divi shows when editing a section, row, or module is programmed with buttons for our standard Odyssey colors, so just click those buttons to choose our compatible colors which are…

#082e4e dark blue (body text)
#1e73be bright blue (our standard section background color)
#8fb9de skyblue (some section backgrounds)
#27c9b8 sea green – some section backgrounds
#ffffa0 light yellow – some section backgrounds
#7cda24 yellow green (donate button and some section backgrounds)
#dd3333 red (buttons and links – anything you want users to click on)
#d2e3f2 white blue (navigation header atop pages)
#00539a Odyssey logo (dark blue)

Text Colors

Within Divi modules, under the Design tab there is a Text Color setting that is by default set to Dark, which displays text in the dark blue color of the Odyssey logo. This works fine over light backgrounds, but you must always change this setting to Light when displaying text over dark backgrounds, which then displays text as white color.

Image Sizes

In our website, we define a Large Image at 1200 pixels wide or 800 pixels tall (whichever is greater) and also Medium Image at 600 pixels wide and 400 pixels tall (whichever is greater).  When you upload an image that is larger than this, it will be stored Full Size in original size in the Media Library, but when you use it on a web page, never use Full Size as this is too large and will download slow to mobile users, and then the browser is slowed because it must scale down the image size to fit on the page.

The solution: when using an image from the media library in a page or post, it is best to set that image’s SIZE box to either Large or Medium, depending how how wide it will display. For instance, for an image that will occupy 1/2 the width of a page or larger, or in the home page Slider slide show, use Large image.  For an image that is within a 1/3 or 1/4 width of page, use Medium.  The Divi theme will automatically then size the image up or down to fit the width of the column it displays within.

Website Width

When using a Standard Section within the Divi Page Builder, a Row by default displays 1331px (pixels) wide which fits well on PCs with 1366px wide screens, which is currently a common PC display.  On larger PC displays such as 1920px, this leaves space on either side of the row.

You can optionally within any Standard Section edit any Row in the Design tab and set Make This Row Fullwidth to Yes, in which case the row will expand to occupy almost the entire screen width on any PC. This is appropriate for some content, such as Video Slider or photo Gallery, but sometimes inappropriate for text blocks which are more easily read when confined to narrow columns. You can also Set Custom Width to Yes and the specify any row width in pixels you need, such as 1000px if you want the page to display in a narrower space.

On smaller tablets and mobile phones Divi automatically rearranges content to display full width on that device, ignoring the Row widths. While rarely needed, it is possible to apply the Custom Width settings to tablets and phones as described in the Divi documentation about Row settings.

In Divi How to Create Links to Page Areas

You can create a link that scrolls to any section, row, or module on a Divi page as follows.
  1. First, you must add a CSS ID to the section, row or module. In Divi Builder click on its hamburger button (3 lines) to edit it and then click on the Advanced Tab. There in the CSS ID box enter a name. It cannot have spaces, so use a – (hyphen) to separate words. For example, application-form
  2. Once you’ve added a CSS ID to a section, row or module, then you can link to it.
  3. If your link is on the same page, you can just create a link to /#application-form  (the name of your CSS ID with a # sign in front.) Of course, your link can be added to a word or words within text, or the URL that a button goes to.
  4. If you want to link to this item from a different page, then you need to make your link the domain plus page name followed by /#application-form . For instance, https://odysseyatlanta.org//my-page-name/#application-form
That will take the user to the new page and then scroll to the specific item with that CSS ID.
A Divi page can also have a special side menu that let’s users easily reach any part of a page. See Single Page Navigation at https://www.elegantthemes.com/documentation/divi/one-page-website/

In Divi How to Hide a Section, Row, Column or Module

To hide a section, row, or module, edit it and click on Advanced panel and in VISIBILITY section check to hide on desktop, tablet or mobile screens.

In Divi How to Vertically Center Column Content

Sometimes you have one or more columns within a Divi row, and you wish the content (text, image, etc.) in each column to center vertically in the middle of the column. Here’s how…

  1. Edit the ROW and in Design panel set Equalize Column Heights to Yes
  2. In the ROW Advanced panel for Column 1 CSS Class enter: vertical-center
  3. Also enter vertical-center in any other Column CSS Class that also needs to be centered vertically.

 

In Gravity Forms Control Capitalization for Data Collected

In Gravity Forms for any field you can now click on Appearance tab and in the Custom CSS Class box optionally enter one of these:

  • capitalize – will force any entry in this field so every word has first letter capitalized and rest lower case
  • upperlower – best for name fields, if user enters all uppercase or all lowercase it converts to capitalized, but if user enters both upper and lower it leaves it as user typed it. This keeps McAfee or O’Neil instead of making Mcafee or O’neil
  • uppercase – will force the entry to all uppercase
  • lowercase – will force the entry to all lowercase. I always apply this to email address fields so they are all lower. Email addresses are not case sensitive.
  • readonly – user can only view but not edit this field

Gravity Forms OdysseyID Field

The OdysseyID is important because if it exists in every form’s data we can link data in both together in reports. The Gravity View Form Connector has the ability in a Workflow to copy the id (and other fields) from the Student Application form into another form later on in the workflow, insuring that these two forms belong to the same student.

Any form, such as the application form, can automatically create an OdysseyID composed of the first 3 letters of the last name, first 3 characters of the first name, followed by numbers for birthdate in format mmddyyyy. Example: COHJEF03011977

Steps to do this in a form…

  1. In form add the Name field, and for it click on Appearance tab and in the Custom CSS Class box enter odysseyidname
  2. Anywhere in the form, but AFTER the Name field, add a Date of Birth field styled as month, day, year boxes, and add the Custom CSS Class odysseyiddate
  3. Anywhere in the form, but AFTER the Date of Birth field, enter a one-line text input named OdysseyID and in Custom CSS Class write two classes: odysseyid readonly

Readonly class makes sure the user cannot edit this field.

You can add in Gravity Forms a good description for the field: This is your OdysseyID composed for your name and birth date. You cannot change it.

How to Create Next Year’s Application Workflow

In WordPress > Forms list hover over each form and click “duplicate” and rename the duplicates title’s with new year:

  1. Student Application
  2. Student Application Video
  3. Registration Fee – Payment
  4. Participation Agreement Form
  5. Health Form
  6. Transportation Confirmation
  7. Wait List Subscribe

Prepare Dates

Before you begin it is best to organize a complete list of the dates and rules pertaining to the application workflow. An example of rules from 2022 you can use as a template and adjust. Some dates are set within the application form and others within the workflow steps.

Returning Student
2022-07-01 2023 Application Form Goes Online

 

Returning Student: Student Application
Deadline: 2022-10-15
** After deadline the form will warn the student it is too late. If the student submits it anyway then a new workflow step will end the student’s flowflow and send an email saying it is too late and the student cannot complete any further steps.

Returning Student: Parent Agreement
Start this step: 2022-08-13 (later Anne will remember to change this to Delay 2 hours after student submits application)
This step expires on: (not set)

Returning Student: Payment
Deadline: 2022-10-23 (set inside the form not workflow)
After that date payment can be made with a late fee charged.
The step expires on: (not yet set — what date should we put here? After that date their application is rejected)

New Student: 2022-10-01 Application Form Goes Online

New Student: Student Application
Deadline: 2023-02-10
After that date we will hide the application WordPress page so no returning or first time applicants can reach it.

New Student: Parent Agreement
Start this step: 2 minutes after Student Application submitted
Workflow notifies parent 2 hours after student submits application
This step expires on: 2023-02-19 (student is rejected)
Note: the application needs to be 100% complete by March 1st. If not complete then rejected.

New Student: New Student Applicant Form
Start this step: 10 minutes after Parent Form submitted
This step expires on: 2023-03-15 (student is rejected) 2023-02-20
Note: the application needs to be 100% complete by March 1st. If not complete then rejected

New Student: Email Video Instructions
Start this step: immediately after New Student Applicant Form submitted

New Student: Email Form to Student Recommender
Start this step: immediately after Email Video Instructions
This step expires on: 14 days
Next Step if Expired: New Student: Ask For A Different Recommender

New Student: Ask For Video Link
Start this step: Immediately after Student Recommender has submitted
This step expires on: 2023-02-26 (student is rejected)
Note: the application needs to be 100% complete by March 1st. If not complete then rejected

(Leave time for steps where Odyssey reviews and accepts or rejects applicants)

First Time Student: Payment
Deadline: 2023-4-22 (set inside the form not workflow)
After that date payment can be made with a late fee charged
This step expires on: (not yet set – what date should we put here? After that date their application is rejected)
Note: Student acceptances go out on March 15th so we cannot increase the fee that early

Classes: Start Date
06/05/2023

Classes: End Date Grades 1-6
07/14/2023

Classes: End Date Grades 7-8
07/14/2023

Classes: End Date Grades 9-11
07/7/2023

Classes: End Date Grade 12
06/30/2023

Edit the Student Application form

When you duplicate the main application form, that also duplicates last year’s Gravity Flow workflow process. You then edit both the form and workflow to adapt for the new year.

1. Edit the application form and scroll to the very end, and in the Define Dates section change all dates to the new year’s. The dates are entered in each question’s Advanced Tab in the Default Value box.

2. Change dates near top of application form in the New Student Applications Begin HTML Content and also change in that field the timestamp in the advanced tabs conditional logic by visiting https://www.epochconverter.com/ to get the unix epoch timestamp number for the date when first time applications begin.

3. In application form change payment deadline dates in Parent/Guardian Agreement question.

4. Under the Application Form’s settings, select Workflow to open the workflow, then work through each workflow’s steps to:

a) change any references in workflow FORM fields to select this year’s forms. The steps where Form fields need updating are:

  1. Returning Student: Registration Payment  >> select Admissions B form
  2. Returning Student: Update Final Decision in Application >> select Admission A form
  3. New Student: Ask For Video Link >> select Admissions C form >> also set the Expiration Date to 03/01 for the coming year.
  4. New Student: Registration Payment >> select Admissions B form
  5. Student Health Form >> select Admissions D form
  6. Participation Agreement and Transportation Form >> select Admissions E form

b) change expiration dates in steps:

New Student: Ask For A Different Recommender >> set Expiration Date to 03/01 for the coming year

c) Update step New Student Rejected: Update Final Decision: End Workflow and also step New Student Approved: Update Final Decision in Application as follows in their Update an Entry section:

Site: This site
Form: Admissions A: Student Application
Action: Update an Entry
Entry ID Field: Entry ID (Self)  (it’s the last choice in list)
Field Mapping: Field: Final Decision  and set Value: Status: New Student: Approve/Reject

d) Update step Update Returning Participant Status Complete and also step Update First Time Participant Status Complete as follows in their Update an Entry section:

Site: This site
Form: Admissions A: Student Application
Action: Update an Entry
Entry ID Field: Entry ID (Self)  (it’s the last choice in list)

for the returning participants step set: Field Mapping: Field: Returning Participant Status set to Value: complete

for the first time participants step set: Field Mapping: Field: First Time Participant Status set to Value: complete

e)  Set the step New Student Incomplete Update Final Decision: End Workflow in its Update An Entry section to:

Site: This site
Form: Admissions A: Student Application
Action: Update an Entry
Entry ID Field: Entry ID (Self)
Field Mapping: Field: Final Decision Value: Incomplete Application

e) review any emails to be sure info is current. Most emails are using variables for dates that will automatically pull in the dates you defined above in 1) from the Define Dates section of the application.

Edit the Payment form

1. Visit https://www.epochconverter.com/ and get the unix epoch timestamp numbers for 11:59:59 PM on the 2 deadline dates by which returning and first time students must pay application fee without a late fee. The timestamp should be GMT time zone (not EST) since the web server’s clock is set to GMT time. There are more detailed instructions for how to do this within the form when you edit it.

2. Edit all the fields defining fees for returning students on their advanced tabs in conditional logic to replace last year’s timestamp with this year’s timestamp for the returning student payment deadline date/time.

3. Do same for all first-time student registration fee fields.

4. Within the form is the Credit Card field and the places to enter your card are not displaying because you copied this form from last year’s form, which requires recreating a Stripe Feed to send the form data to your Stripe payment gateway to collect payment. After you create this fee, you’ll see the credit card entry form display. Within the form you see “Please check if you have activated a Stripe feed for your form” so click on Stripe feed (or you can click atop form editor on Settings and select Stripe at bottom. In the Stripe Feed popup click either Create One or Add New.

For name enter Registration Payment
For Transaction Type select Products and Services
In Products and Services Settings choose Form Total
In Billing Information the address fields should be mapped to corresponding Form Fields
In Other Settings create the following Keys and Values that define what form data to send to the student’s record in Stripe:
Key: OdysseyID Value: OdysseyID
click the + at right to create next key/value
Key: Student’s Name (First) Value: Student’s Name (First)
Key: Student’s Name (Last) Value: Student’s Name (Last)
Key: Email Value: Email
Key: Phone Value: Phone

For Stripe Receipt choose Do not send receipt (because Gravity Forms will email a receipt so we don’t need a second email from Stripe)

In the Stripe Account it should already say Connected to Stripe as odysseyatlanta.org. If not then first click Save Settings button to save your work.

5. In Payment Form’s Settings select Workflow. The payment form has its own workflow that copies a student’s payment data back into the student’s Application form.  Edit this workflow and you only need to make one change. For “Form” you must select this year’s Admissions A: Student Application form. Leave other settings as is.

Edit the Student Application Video form

The Admission Form D: Student Application Video Form has its own workflow and you must update that:

Form: Admissions A Form
Action: Update an Entry
Entry ID Field: Application Entry ID
Field: Video Link > YouTube Video Link
Next Step: Workflow Complete

Update Web Pages that Display Forms

The forms are displayed inside web pages, but those pages will display last year’s forms until you edit each page to now use this year’s forms. The pages you need to update are:

Admission Form A: Student Application Form

Admission Form B: Registration Payment 1

Admission Form C: Registration Payment 2

Admission Form D: Student Application Video Form

Admission Form E: Student Health Form

Admission Form F: Scholar Participation Agreement Form