Number field with a label beside

Seems like this would be a design limitation. Even if you created a fieldset with 2 columns and split the number field and an html field, there would be no way to merge the fields together as tightly as the image without having more control over the form’s design.

That’s just my impression of the software so far. CodePeople will almost certainly have a better solution, but I’m curious as well.

Hello,

There are different solutions without affecting the plugin’s code:

– Create an image with the text and background gray, and apply it to the input box using CSS rule: background, aligning the image at right.

– An alternative is using javascript of code. Specificaly the jQuery method: after

jQuery('the element selector').after('a tag with the text and the CSS rules applied');

Best regards.

Expanding on this, would it be possible to have a map of North America with checkboxes (with labels) placed throughout the picture?

I was thinking maybe a fieldset with a background image of North America in it, set up in a big grid, then individual checkboxes placed in certain squares on the grid.

Would that be possible?

• This reply was modified 8 years, 1 month ago by chadtesting.
• This reply was modified 8 years, 1 month ago by chadtesting.

Hello @chadtesting,

Yes, that’s possible, but you will need to define many CSS rules to display each element in the corresponding location.

Best regards.

What element on your page do you think would be best to be used as the canvas for this <map> image? Obviously an HTML field will define the rules, but which element would work best?

Hello,

There is not an unique solution. For example, if you want to display the checkboxes fields over the map’s image, maybe a better solution would be insert the checkboxes fields into a container field (DIV), and define the map’s image as the background of the container.

Best regards.

Right, so you would think you could make a Div field with the CSS Keyword: schools and create the following HTML field

<style>
#fbuilder .schools input{
background-image: url("https://xxx.xxx.xxx.xxx/~chadtesting/wp-content/uploads/2017/02/apophysis-081023-101b1.jpg");
}
</style>

.. but nothing shows up in the background of the Div field. So frustrating.

• This reply was modified 8 years, 1 month ago by chadtesting.
• This reply was modified 8 years, 1 month ago by chadtesting.

Hello,

Not really, If you have assigned the class name: schools to a container, the selector would be:

#fbuilder .schools{}

To define the background to the container, and not to the input tags into the container.

I’m sorry, but these questions are not related directly with the plugin, they are basic CSS rules, if you need additional help designing your form, I can offer you a custom coding service from my personal website:

https://cff.dwbooster.com/customization

Best regards.

Thanks. I’m learning and I realize it’s not your job to teach me CSS or Javascript. These are literally my first attempts at coding without any sort of hand-holding so I do appreciate the help.

Even with defining the background (which works by the way, thank you!) of the div field, I don’t see how I could reliably manipulate the checkboxes around the map and avoid alignment issues between browsers, tablet, mobile, etc. The only other way I can see to do it without using flash are with jQuery plugins like Mapster, but I’m unsure how it would work within the CFF platform. I imagine that if I wanted to incorporate stuff like that into my forms, I’d need to have some sort of webhook in place.

Hello,

You don’t need any additional library, only CSS rules like: “position”, “top”, “left”, “right” and “bottom”.

Best regards.

Yeah now that I’ve looked around the web a bit, you are correct, it’s all available using CSS. Some of the examples I’ve seen are pretty complicated.

It looks like the easiest way to avoid formatting issues would be to define a picture with coordinates, and clicking a part of a picture selects a checkbox/label that is outside of the image. This I would assume would be preferable to trying to embed checkboxes on to the background image.

• This reply was modified 8 years, 1 month ago by chadtesting.
• This reply was modified 8 years, 1 month ago by chadtesting.
• This reply was modified 8 years, 1 month ago by chadtesting.

Hello,

The implementation is not as simple, you are waiting for a behavior that is not part of the plugin. If you want to display the checkboxes on specific positions, you should define and assign CSS rules to the fields.

Best regards.