Forms
      Back to home
      1. Rock Content Knowledge Base
      2. Ion
      3. Forms

      Library Forms: Styling Custom HTML Forms Within Your Framework Theme Style

      Would you like your custom HTML form to pick up the styles from the framework themes in your ion console? If so, read on!

      You can stylize your custom HTML forms to blend in with your theme by including all the ion form-specific CSS classes within your form code.

      For instance, to stylize an input textbox add the class "pf_text" to the input textbox like the following:

      ‹input type="text" id="first_name" name="first_name" class="pf_text" /›
      • .pf_text is the standard size of a text field (default 130px wide).
      • .pf_text_narrow is the narrow size of a text field (default 75px wide).
      • .pf_text_wide is the wide size of a text field (default 250px wide).

      NOTE: The width (and style) of these fields can be adjusted at the theme level or within your custom html form code.

      For theme control of the field labels, add the class "pf_label_text". For instance:

      ‹label class="pf_label_text"›First Name*‹/label›

       

      For theme control of the submit button, add the class "pf_submit_button". For instance: 

      ‹input type="submit" class="pf_submit_button" value"Register" /›


      If you are using hint text on your form, you can use this class "pf_hint_text". For instance:

      ‹span class="pf_hint _text"›enter phone number with dashes xxx-xxx-xxxx‹/span›

      Sample custom HTML form (with no theme control):

      ‹form›  
      ‹label class="pf_label_text"›Name:‹/label›
      ‹input type="text" name="lbform_name" id="lbform_name" class="pf_text" value="" /›

      ‹label class="pf_label_text"›E-mail:‹/label›
      ‹input type="text" name="mail" id="lbform_mail" class="pf_text" value="" /›

      ‹label class="pf_label_text"›Comment:‹/label›
      ‹input type="text" name="comment" id="lbform_comment" class="pf_text" value="" /›
      ‹span class="pf_hint_text"›Up to 100 characters‹/span› 

      ‹input type="submit" class="pf_submit_button" value="Send"›  
      ‹/form›

      Complete reference of the form-specific CSS classes.

      .pf_form_table: CSS class for form table 
      .pf_field_row: CSS class for field rows 
      .pf_field_row_bad : CSS class for bad field rows 
      .pf_label_cell: CSS class for label cells 
      .pf_label_cell_bad: CSS class for bad label cells 
      .pf_label_text: CSS class for label text 
      .pf_label_text_bad: CSS class for bad label text 
      .pf_field_cell: CSS class for field cells 
      .pf_field_cell_bad: CSS class for bad field cells 
      .pf_hint_cell: CSS class for hint cells 
      .pf_hint_text: CSS class for hint text 
      .pf_hint_text_bad: CSS class for bad hint text 
      .pf_hr_cell: CSS class for ‹hr› separator cell 
      .pf_hr: CSS class for ‹hr› 
      .pf_prefield_cell : CSS class for pre-field cells 
      .pf_prefield_text: CSS class for pre-field text 
      .pf_postfield_cell: CSS class for post-field cells 
      .pf_postfield_text: CSS class for post-field text 
      .pf_text: CSS class for regular ‹input› text 
      .pf_text_narrow: CSS class for narrow ‹input› text 
      .pf_text_wide: CSS class for wide ‹input› text 
      .pf_dropdown: CSS class for ‹select› drop-down 
      .pf_dropdown_narrow: CSS class for ‹select› drop-down narrow 
      .pf_dropdown_wide: CSS class for ‹select› drop-down wide 
      .pf_multiline: CSS class for ‹textarea› multiline text 
      .pf_multiline_narrow: CSS class for ‹textarea› multiline text narrow 
      .pf_multiline_wide: CSS class for ‹textarea› multiline text wide 
      .pf_listbox: CSS class for ‹select› listbox 
      .pf_listbox_narrow: CSS class for ‹select› listbox narrow 
      .pf_listbox_wide: CSS class for ‹select› listbox wide 
      .pf_checktable: CSS class for ‹table› of checkbox ‹input› options 
      .pf_radiotable: CSS class for ‹table› of radio ‹input› options
      .pf_submit_cell: CSS class for submit button cell 
      .pf_submit_button: CSS class for submit button
      .pf_submit_image: CSS class for submit image 
      .pf_upleft_corner: CSS class for top left form hook 
      .pf_upright_corner: CSS class for top right form hook 
      .pf_loleft_corner: CSS class for bottom left form hook 
      .pf_loright_corner: CSS class for bottom right form hook

       

      If you have any questions, please contact us at help@rockcontent.com. 😀