It is possible to hide field labels (and other HTML elements) in Forms with CSS.
When having saved your form, navigate to the Settings tab and click the URL link to open the form in a new tab.
NOTE!
Following instructions applies to users with Google Chrome, but you can inspect and find the Selector in similar ways in other web browsers as well.
When you have your form open in a new tab, right-click on the form and choose Inspect from the list. The Inspector window appears.
Press the arrow icon (1) in the top left corner of the Inspector window to be able to select an element in the page to inspect it (or keyboard shortcut CTRL / ⌘ + ⇧+ C).
Select the element you want to hide or edit by clicking on it. The element will then become highlighted in the page (2).
In the Inspector window you will now see the same element you just selected highlighted, right-click on the element and choose Copy > Copy selector.
With the selector copied, open the tab where you are editing your form and create a new Custom HTML field in any Step of your choosing.
Name your field (eg. CSS) and then enter Source-mode by clicking the </> Source-mode button to be able to write HTML/CSS.
Enter the following code in the Custom HTML field (in Source-mode):
<style type="text/CSS">
</style>Paste the Selector that you copied from the form when inspecting it in-between the <style>-tags.
<style type="text/CSS">#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label
</style>Now you just need to declare how you want to style your element. To achieve this you need to declare a property with a value for your selector. The declaration block containing the properties and values are surrounded by curly braces.
<style type="text/CSS">#YourSelector {
property: value; }
</style>In our example we want to hide a label for a field in the form. With the correct elements’ selector pasted in-between the <style>-tags, followed by an opening curly brace ( { ) we then write our desired property and a colon followed with a value that is ended by a semi-colon. Example below:
<style type="text/CSS">#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label {
display: none; }
</style>In the example above we have made the label for the selected element hidden by adding the declaration { display: none; } to the copied selector (#YourUniqueAndProbablyCopiedSelector > form > div.form-field.col-sm-12.field-soon-with-hidden-label\? > div > div.label-wrap > label), all within the <style>-tags in the Custom HTML field.
NOTE!
If you are editing a Custom HTML field in </> Source-mode and hit the Save button without leaving </> Source-mode (by clicking the button again), these changes will not be saved!
Try to always remember to click the </> Source button when leaving this mode, before saving the field. Otherwise the risk is that the changes will be lost.
0 Comments