Once you understand how to design a GoHighLevel quiz at the structural level, you will regularly need to perform three specific maintenance tasks: swapping out images, hiding the native form once the custom code is live, and finding the correct CSS selector path when building new question types. This page covers each one as a practical reference. For context on why the visual gap between native and custom code matters, see GoHighLevel native quiz vs custom.
Task 1: Swapping an Image in Your Quiz Code
How To Edit an Image within Your Custom GoHighLevel Quiz Code
Open the quiz in GHL. Click the gear icon on the question containing the image you want to replace. Go to Edit HTML. Scroll through the code to find the image URL in the image card section for that question. Copy the existing URL so you know what you are replacing.
In a separate tab, go to GHL Media Storage. Find the replacement image. Click the three dots on the image and select Get Link. The URL copies to your clipboard automatically. Return to the HTML editor tab.
Select the existing URL in the image field before pasting. This is the step that catches most people. If you use Command V without first selecting the existing URL, the paste does not register. GHL's HTML editor requires that the field value is selected before a new value can replace it. Select, then paste. Click Yes to save. Preview the quiz to confirm the image updated correctly.
Task 2: Hiding the Native GHL Form
How To Hide GoHighLevel Forms In Seconds
The custom quiz code sits on top of the native GHL form. The native form handles data capture, field mapping, and workflow triggers. The custom code controls what the respondent sees. For the quiz to display correctly, the native form must be hidden from view. The hide code is a CSS rule that targets everything inside the original form element.
To apply it: click the three dots on the quiz question, go to Advanced, and open the Custom CSS field. Paste the hide code there. This applies the CSS to the entire quiz display. Preview to confirm that the native form is no longer visible and the custom code is rendering correctly.
Task 3: Finding the Correct CSS Selector Path
How to Find the Right CSS Selector Path in GoHighLevel Quizzes
When writing custom CSS that targets specific quiz elements, you need the exact selector path that matches the element as GHL renders it. Start with a fresh quiz with a multiple choice question that has four answer options. Preview the quiz in the browser.
Open the browser inspector with Command Option I. Click the element selector tool, the small box icon in the top left of the inspector panel. Click on one of the answer options in the quiz preview. The corresponding code highlights in the inspector panel. Right-click the highlighted code and go to Copy, then Copy Selector. This gives you the exact selector path for that element.
Note the backslash. The selector displayed in the inspector shows a space between "option" and the number. When that selector is pasted into your code, a backslash appears before that space. Do not edit the pasted selector. The backslash is correct and required. If the backslash is stripped or the selector is modified, the code will not target the correct element and will not work.
Add the HTML code block above the native form in the quiz builder before pasting. The HTML block needs to be in place before the CSS selectors can reference it correctly. For instructions on building out the full image button workflow that often precedes this step, see custom quiz button images in Canva.
These three tasks cover most of the day-to-day customization work when building and maintaining custom GHL quiz code. The image swap handles updates. The form hide finalizes the build. The selector path gives you precision when writing new CSS rules for any element inside the quiz.
A note on sequence: these tasks are not independent of each other. The selector path work happens during the build phase when the native form is still visible. The form hide happens last. The image swap can happen at any point after the quiz is live, but it follows the same rule as the initial URL entry: select before pasting. Keeping that sequence in mind prevents the most common errors: hiding the form too early and losing selector visibility, or pasting URLs without selecting and wondering why the images are not updating. Build in order. Hide last. Update images by selecting first.