Default Form Page
This page may be used to embed Slate forms, Gravity forms and Formidable forms. This page includes:
- A top fullwidth image
- A left sidebar with a headline and message
- A right form area
- An optional action row
Note: If you are embedding Slate forms, there will be additional steps required to create the shortcode and add CSS to customize. Please see the Customization Tab below.
When embedding a Slate form, there will be additional steps to create the shortcode and adjust the CSS. If you are tracking Slate Pings, you will need a CSS & Javascript Toolbox block for the Slate Ping code and a thank you page for tracking purposes as well.
If you are using the optional action row, include the custom CSS provided below in your page.
Post Styles: Remove Top Padding
Slate Form Embed Instructions
- Create a CSS & Javascript Toolbox block and paste in the custom CSS and the Slate form div code.
- Click the info link for your block to grab the shortcode to place on the page.
Note: You may need to tweak the CSS depending on your specific form. Replace the form ID and form div code with the information for your form.
<style>
#form_04bb260f-4606-3782-1c7c-ab60b11041df_m {
width:120px!important;
}
#form_04bb260f-4606-3782-1c7c-ab60b11041df_d {
width:75px!important;
}
#form_04bb260f-4606-3782-1c7c-ab60b11041df_y {
width:120px!important;
}
legend {
font-size: 16px!important;
font-weight: 300!important;
line-height: 24px!important;
border:0px!important;
margin-bottom:5px!important;
}
.action{
background: #FFFFFF!important;
padding-left: 0px!important;
margin-top: 0px!important;
}
#form_question_c4c6fd7f-e059-5920-3e11-60009391b228.form_question.form_p.form_question_c4c6fd7f-e059-5920-3e11-60009391b228.form_layout_stacked {
display:none!important;
}
div.action.form_action{
background-color:transparent!important;
text-align:center;
}
button.default {
padding: 16px 32px;
color:#FFFFFF;
}
button.default:hover {
padding: 16px 32px;
color:#0334a6;
}
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 0px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(https://perimeter.gsu.edu/files/2017/03/select_down.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: 94% center;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
overflow: hidden;
padding: 5px 5px;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div id="form_22884c95-8713-8ae9-db4e-7351fd941170">Loading...</div><script>/*<![CDATA[*/var script = document.createElement('script'); script.async = 1; script.src = 'https://undergradapply.gsu.edu/register/?id=22884c95-8713-8ae9-db4e-7351fd941170&output=embed&div=form_22884c95-8713-8ae9-db4e-7351fd941170&redirect=https%3A%2F%2Fadmissions.gsu.edu%2Fbachelors-degree%2Frequest-more-information%2Fthank-you%2F' + ((location.search.length > 1) ? '&' + location.search.substring(1) : ''); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);/*]]>*/</script>
Add the Slate Ping Code
- Create a CSS & Javascript Toolbox block and paste in the Slate Ping script.
- Assign the script to your entire site on the Aux tab.
The optional action row uses custom CSS.
This Template has already been optimized for Mobile. Should you need to add to or modify the template, here are some considerations for how to best ensure the mobile experience. For the most part, WPBakery sections, rows and elements are responsive. However, there are times when you may want to adjust the layout to simplify or change behavior on mobile.
- Use text blocks not heading elements for paragraph text without headings included. Use of the heading element for paragraphs adds code causing the application to do more work and makes front end editing more difficult as how to edit the text is not immediately apparent.
- Use the capability to set different font sizes for different breakpoints in the Ultimate Heading element if you need to change the size of a heading or subheading on tablet or mobile.
- Use the built in ultimate spacer element or percentage padding to set different spacing at desktop, tablet and mobile rather than hard coding pixels into a row or column.
- Use the built in capabilities to hide/show elements at different breakpoints to position part of a section in a different location on mobile vs. desktop rather than duplicating the whole section.
- Use the capabilities to change the size of columns between desktop and mobile rather than duplicating.
- Use custom css when there is a very minor difference in spacing. For example, to turn on/off or change borders or hide a background image between desktop and mobile.
- Be careful of using different techniques to load the same image on a page - this can cause very low page speed scores.
- Always test your pages on laptop and mobile screens. Most users don't work on large design monitors.
If you intend to use the action row several times in different places on your site with the same links, create a WPBakery template and paste the action row code into the text tab in Classic Mode and load the template into your pages using the Templatera element. This will allow you to edit the action row content in one place and ensure consistency of implementation.
If you intend to use the action row layout in different places on your site but with different links, you can do one of the following:
- Create a WPBakery template for each instance of the action row you intend to use and paste the action row code into the text tab in Classic Mode and load the template into your pages using the Templatera element. This will allow you to edit each instance under templates instead of within each page.
- Create a WPBakery template and paste the action row code into the text tab in Classic Mode and load the template into your pages using Add Template. You will need to edit the row in each page where it is used.
These styles are loaded in CSS Javascript Toolbox Blocks and can be applied to your entire site, pages and posts as needed. If you don't already have these blocks in your site, follow the instructions below to load them.
General Styles
Apply the Block to your entire site under the AUX tab on the right. 
<style>
/* Fix line height in ordered and unordered lists. */
li {
line-height: 23px;
}
/* Adjust line heigt of menu items that wrap */
.nav-primary .genesis-nav-menu>li, .nav-primary .genesis-nav-menu {
min-height: 40px;
}
.vc_basic_grid.news-latest .vc_gitem-zone-c {
width: 100% !important;
}
/* Remove vertical lines on mobile
Requires styles to be added to WPBakery Elments accoridngly */
@media (max-width: 768px) {
#action-row .action-col .vc_column-inner,
{
border-left: none !important;
border-top: 2px dotted #0034a9;
padding-left: 15px !important;
}
#action-row .action-col .vc_column-inner {
padding-top: 20px !important;
}
#action-row .inside-action-col .vc_column-inner {
border-top: none !important;
}
#dotted-col-divider .right-col-contact .vc_column-inner {
border-top: none !important;
border-left: none !important;
padding-left: 15px !important;
}
}
/* Reorder columns on mobile */
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.reverse_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
.fourth-on-mobile {
-webkit-order: 5;
order: 5;
}
.fourth-on-mobile {
-webkit-order: 6;
order: 6;
}
}
</style>
Floating Marquee Styles
tags before and after the styles. Save your block.
Apply the Block to all pages in your entire site under the AUX tab on the right. 
<style>
.floating-headline h1, .floating-cta h4, .floating-cta .aio-icon-title ult-responsive {
text-transform: uppercase;
}
@media (max-width:980px) {
#outer-floating, #outer-floating .upb_row_bg.vcpb-default {
background-image: none !important;
}
#outer-floating {
padding-left:0 !important;
padding-right:0 !important;
padding-top: 0 !important;
margin-top: -1px !important;
}
.floating-headline {
background-color: #fff !important;
}
.floating-cta {
background-color: #0034a9 !important;
}
}
</style>
Download Manager Styles
tags before and after the styles. Save your block.
Apply the Block to specific pages in your site as needed under the Page tab on the right. 
<style>
/* Add over button state and add Georgia State styles to left category menu */
color: white !important;
background-color: #0034a9 !important;
}
.w3eden .btn-primary.active {
color: white !important;
background-color: #009FDF !important;
border-color: #009FDF !important;
}
a.wpdm-cat-link.text-left.btn.btn-primary:hover, a.wpdm-download-link.btn.btn-primary.btn-lg:hover {
color: #0034a6 !important;
}
.w3eden .btn-primary:hover {
background-color: #fff !important;
border-color: #0034a9 !important;
}
.w3eden .btn-group-lg > .btn, .w3eden .btn-lg {
padding: 10px 16px !important;
font-size: 14px !important;
line-height: 1.3333333 !important;
}
.w3eden .btn-sm, .w3eden .btn-xs, .w3eden .btn {
font-size: 14px !important;
font-family: Lato !important;
background-image: none !important;*/
font-weight: 400 !important;
border: 1px solid #0034a9 !important;
-webkit-box-shadow: none;
box-shadow: none !important;
text-shadow: unset !important;
}
.w3eden .input-group-append.input-group-btn {
border-left: 3px solid #0034a9;
}
</style>
Vibrant Vertical Tabs
tags before and after the styles. Save your block.
Apply the Block to specific pages in your site as needed under the Page tab on the right.
<style>
.wpb-js-composer .vc_tta-color-white.vc_tta-style-modern.vertical-tabs-left-highlight .vc_tta-tab.vc_active >a {
border-color: #00AEEF;
background-color: #00AEEF;
color: #FFF;
FONT-WEIGHT: BOLD;
background-image: none;
}
</style>
Contact Us
Ready to start a Web project?
Fill out our intake form and tell us about your project. Questions? Contact Rashan Beacham, 404-413-1367 or rbeachem@gsu.edu.