Documentation for the software we use:
Divi Builder (web page editor and WordPress theme)
Divi Update Blog about new features
Divi Resources Blog with design ideas
Gravity Forms (creates a form)
Gravity Flow (creates an application process using Gravity Forms)
Gravity View (displays submitted forms on the website) – we haven’t installed this yet
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
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
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:
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…
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:
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.
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)
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.
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.
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
- 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
- Once you’ve added a CSS ID to a section, row or module, then you can link to it.
- 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.
- 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
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 in the CLASS box for the item enter: hide
In a row on Advanced panel is also a CLASS box for each column. To hide the column enter: hide
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…
- Edit the ROW and in Design panel set Equalize Column Heights to Yes
- In the ROW Advanced panel for Column 1 CSS Class enter: vertical-center
- 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…
- In form add the Name field, and for it click on Appearance tab and in the Custom CSS Class box enter odysseyidname
- 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
- 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 duplicate the following forms and rename the duplicates title’s with new year:
- Student Application
- Student Application Video
- Registration Fee – Payment 1
- Registration Fee – Payment 2
- Participation Agreement Form
- Health Form
- Transportation Confirmation
- Wait List Subscribe
Edit the Student Application form
When you duplicate the 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.
2. Change dates in the New Student Applications Begin HTML Content and also change 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. 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 to last year’s forms to be this year’s forms
b) change any deadline dates as needed
c) 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 1 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.
2. Enter the timestamp deadline # for returning students on all registration fee fields pertaining to returning students on the advanced tabs in conditional logic.
3. Do same for first-time student registration fee fields.
4. In Payment 1’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 to point to this year’s application, not last last year’s.
5. Do all of the above steps to the Payment 2 form.
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