Form Block Line Field Style As Label

Form Block Line Field Style As Label

License

Synopsis

Style Form block Label field as section labels.

Version

• 1.1.0

SS Versions

• 7.1

• 7.0

Fluid Engine Compatible

• Yes

---

Install Options

• CDN Hosted

  Use this option for the quickest way to install this effect (files hosted externally on the jsDelivr, a CDN)

  • Options

    • Page Specific

      • Use this option if you want to have this effect on only one Page.

      • Add the following code to Page Settings > Advanced > Page Header Code Injection for the Page.

        <!-- begin TWC Form Block Line Field Style As Label -->
        
          <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
          
          <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@43bd5decf42fc6e64dc790bc7e696b9331351b8d/Block/Form/Form%20Block%20Line%20Field%20Style%20As%20Label/form%20block%20line%20field%20style%20as%20label.min.css" rel="stylesheet" type="text/css">
          
          <!-- end TWC Form Block Line Field Style As Label -->
          

      • Refer to per-page code injection for details.

    • Site-wide

      • Use this option if you want to have this effect on all Pages.

      • v7.1

        • Add the following code to Website > Pages > Custom Code > Code Injection > HEADER.

          <!-- begin TWC Form Block Line Field Style As Label -->
          
            <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
            
            <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@43bd5decf42fc6e64dc790bc7e696b9331351b8d/Block/Form/Form%20Block%20Line%20Field%20Style%20As%20Label/form%20block%20line%20field%20style%20as%20label.min.css" rel="stylesheet" type="text/css">
            
            <!-- end TWC Form Block Line Field Style As Label -->
            

      • v7.0

        • Add the following code to Website > Pages > Website Tools > Custom Code > Code Injection > HEADER.

          <!-- begin TWC Form Block Line Field Style As Label -->
          
            <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
            
            <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@43bd5decf42fc6e64dc790bc7e696b9331351b8d/Block/Form/Form%20Block%20Line%20Field%20Style%20As%20Label/form%20block%20line%20field%20style%20as%20label.min.css" rel="stylesheet" type="text/css">
            
            <!-- end TWC Form Block Line Field Style As Label -->
            

      • Refer to Add code to code injection for details.

• On-site

  Use this option to install the full code of this effect (files hosted on your site).

  • Page Specific

    • Use this option if you want to have this effect on only one Page.

    • Add code from file form block line field style as label.html to Page Settings > Advanced > Page Header Code Injection for the Page.

    • Refer to per-page code injection for details.

  • Site-wide

    • Use this option if you want to have this effect on all Pages.

    • v7.1

      • Add code from file form block line field style as label.css to Website > Pages > Custom Code > Custom CSS.

    • v7.0

      • Add code from file form block line field style as label.css to Website > Pages > Website Tools > Custom Code > Custom CSS.

    • Refer to Using the CSS Editor for details.

How To Use

Add a form block.

Add your desired fields to the form block.

Where you want to have a "section label" add a line field. Set the field label to the title of your form section. Set Underline to off.

Save the Page.

Make a Donation

Please consider making a donation.

Changes

• 2026-01-23

  • reworked code to use CSS variables
  • bumped version to 1.1.0

• 2021-08-18

  • initial version