The QuickSchools embedded admissions form can be customized to match your school website’s style. You can change the fonts, colors, input field or size. You just need to modify the embed code after you add it to your site.
Depending on your familiarity with HTML, CSS and JavaScript, customizing your forms should be a breeze. If not, you can always ask your IT department for help.
This article will guide you how to style the embedded admissions forms: the Inquiry Form and the Application Form.
Style your embedded form in two ways:
Easy Embed
If you want to style your form using simple custom codes, just copy the suggested code block from the Easy Embed tab.
To customize the look of the form, qsOnLoad() function needs to be defined. This jQuery snippet will be executed after the page has been loaded. Just add the function at the beginning of the suggested code block.
For example, this is the suggested code block (replace “<SCHOOLCODE>” with the school code of your QuickSchools account):
After inserting the qsOnLoad() function, the code block should now look like this:
Some Useful Element IDs
| Element ID | Description |
| .qsform | Form page |
| .qsselect | Dropdown menu |
| .qsheader | Header text |
| .qsdone | Confirmation message |
You can also use the basic HTML elements aside from the above mentioned IDs.
Here’s an example on how to define the qsOnLoad(), where jQuery css() method is used:
Generated Application Form using the Easy Embed sample code above:
Customized confirmation message:
Advanced Embed
Advanced Embed is for more advanced CSS users who want to have full control of how the application form appears on the school's website.
CSS can be added to your HTML document in three ways: Inline, Internal, or External.
The most common way to add CSS, is to keep the styles in external CSS files. However, in this example we will use internal styles, for easier demonstration.
Here’s an example of styling the embedded form (replace “<SCHOOLCODE>” with the school code of your QuickSchools account):
The four (4) “hidden” fields in the embed code are required. Three (3) of them have system generated values:
- schoolId
- schoolCode
- apiKey
As for the successUrl hidden field, you need to provide a URL. This is the page where you can show a confirmation message that the form has been successfully submitted.
The form submits to QuickSchools with a POST method. POST is required.
Here is the generated Inquiry Form from the Advanced Embed code above (basic styling):
Another styling example using Advanced Embed:
