How to Update Application Page and Survey

How to Fix or Update the Survey Footer for Outdated Application Pages

If an application page is using old styling or if survey buttons (Next, Back, Submit) are missing or transparent—especially on mobile—follow these steps to update the styling and resolve the issue.

---

Locate and Edit the Application Page

1. Go to “Sites & Forms” in the WR Hub (GoHighLevel).
2. Open the application page for the specific position you want to update.
   • ⚠️ If the sub-account has multiple positions or locations, repeat this process for each application page individually.
3. Click “Edit” to open the application page builder.

---

Apply the Updated Custom CSS

4. In the page editor, click “Custom CSS” at the top-left.
5. Delete any old CSS code currently present to avoid styling conflicts.
6. Paste the following updated CSS code:

#section-RhjdlNEwc .c-row>.inner .c-column {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (max-width: 767px) {
    #section-RhjdlNEwc .c-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #section-RhjdlNEwc .c-row>.inner .c-column>.inner {
        padding: 25px !important;
    }
}

.ghl-footer {
    background: transparent !important;
    position: relative !important;
    padding: 2px 0 0 !important;
    box-shadow: 0 0 0px !important;
}

.ghl-next-button {
    width: 150px !important;
    background-color: {{ custom_values.color__main_brand }} !important;
}

.ghl-next-button .right-pointing-triangle:after {
    content: "Next" !important;
}

.hl_form-builder--main {
    margin-top: 0px !important;
    padding: 0px 0px !important;
}

/* Regular Text */
#_builder-form p, li, .text-element, .short-label {
    color: {{ custom_values.color__main_text }} !important;
    background-color: transparent !important;
    padding: 0px 0px 0px 0px !important;
}

#_builder-form .signature-button {
    background-color: #FFFFFF !important;
}

/* Bold Text */
#_builder-form strong {
    color: {{ custom_values.color__main_brand }} !important;
}

.form-builder--item label {
    color: {{ custom_values.color__main_text }} !important;
}

/* NEW FOOTER STYLING */
.ghl-footer-next, .ghl-footer-back, .ghl-submit-btn {
    background-color: {{ custom_values.color__main_brand }} !important;
    border-radius: 5px !important;
}

.ghl-footer-buttons {
    padding: 20px !important;
}

7. Click “Save” and then “Publish” to apply the changes.

---

Update the Survey Builder Settings

8. Navigate to “Forms & Surveys” and find the survey tied to the position.
9. Click “Edit” to open the Survey Builder.
10. Go to the “Styles and Options” tab at the top-right.
11. In the Footer dropdown:
    • Enable “Use New Footer”.
12. Make sure “Enable Progress” is disabled to prevent layout conflicts.
13. Set button positioning to Left and Right.
    • This prevents buttons from being stacked or squished to one side.
14. Do not change button colors or fonts here—they are controlled by the Custom CSS above.
15. Click “Save”.

---

Confirm the Changes

Inconsistent footer behavior on older sub-accounts

Open the live link to the application page.

Scroll to the survey section and verify:

Buttons are now styled correctly.

The Next and Back buttons are visible and properly spaced.

Try progressing through the survey to ensure the Submit button appears correctly.

✅ That’s it! These updates resolve:

Missing or transparent buttons on mobile

Outdated button styling on desktop