Follow

How to Style the Embedded Admissions Form

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:

  1. Easy Embed
  2. Advanced Embed

 

Easy Embed

If you want to style your form using simple custom codes, just copy the suggested code block from the Easy Embed tab. 

easy-embed-tab.png

 

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:

easy-embed-form-blue.jpg

Customized confirmation message:

easy-embed-confirmation-message-blue.jpg

   

 

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. 

advanced-embed-tab.png

 

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):

advanced-embed-simple.jpg

Another styling example using Advanced Embed:

advanced-embed-form.jpg

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request