Label Form in front of Input fiels

I Need Help
1

Hi all. Is it possible to put a Label in front of the input field in a Form instead of above the input field?

2

Hello @r_botman
One way is after you insert the form add in between the fields a 2 column brick and then just drag and drop the label to the left and text field to the right.
Hope it helps you.

3

Thanks @Pealco. That works perfecf! Do you maybe also know if I can format a zipcode style in a field? Like: “3755 TB”

4

Hello @r_botman
Assumning that you need a Dutch postal code do the following:

In your form create a normal label for your postal code as you have the others, but for the field text add a html code bric and inside put the following:

<input id="ZipCode" type="text" name="country_code" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" required="required">
    <small id="zipcodeformat" class="text-muted">
      Must be "1234 aa" format.
    </small>
<style>
input {
  width: 100%;
}
</style>

Hope it helps you…

5

Thanks a lot @Pealco. Great! Exactly what I needed.

6

Don’t know about coding @Pealco. How to adjust the size and the color of the message ““must be “1234 aa” format”” and is it possible to change also the message / field “Not in the expected format”?

7

About the 1234aa just erase it from the code and should keep a code like this:

<input id="ZipCode" type="text" name="country_code" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" required="required">
<style>
input {
  width: 100%;
}
</style>

Then just add a label and you could style it with a class and change whatever you want.

About the message, after you export the site, go to jqBootstrapValidation.js file in JS folder, and edit it, in line 109 you will find the message, if is not in that line just search for: “Not in the expected format” and change the message, probably there is a better solution but for now is what I found.

image
image1912×526 94.5 KB

8

FORGET EVERITHING THAT I TOLD YOU…

LOL a lamp lighted in my head:

in a normal field just chose standard field, then in the end in atributes for that field, add the folowing:
NAME: pattern
VALUE: [1-9][0-9]{3}\s?[a-zA-Z]{2}

Then you can personalize everything like the others…

image
image.png494×526 16 KB

image
image.png494×526 18.8 KB

About the message , after you export the site, go to jqBootstrapValidation.js file in JS folder, and edit it, in line 109 you will find the message, if is not in that line just search for: “Not in the expected format” and change the message, probably there is a better solution but for now is what I found.

image.png
image.png1912×526 94.5 KB

9

Thanks again @Pealco. Even better this new solution!