trouble with checkboxes

User 519110 Photo


Registered User
2 posts


I'm a newbie with WFB. The form I've built is working; it's at http://ihlna.org/forms/joingroupsform.html. I have a couple of issues with the pair of checkboxes.

As you can see, I have pretty long explanatory hint text for the other fields. I also have long explanations for the two checkboxes, but AFAICT WFB will not attach hints to individual boxes, only to the group, so the explanations are part of the 'value' attribute for the checkboxes. This means the checkboxes aren't formatted like the rest of the form. Worse, the notification email, using the [groupchoice] element, runs together the entire text of whichever box(es) the user picks. (See attached.)

I could make two checkbox groups with separate hints, but then I would not be able to require that at least one be checked.

I see in the generated page that the 'name' attribute on both checkboxes is "groupchoice[]", but I don't see any way to use this in WFB. (The WFB name for the checkbox group is groupchoice.) What I'd like is to design the email so that it just says something like "Group choice 1: NO, Group choice 2: YES". This would be a lot less important if hints for individual checkboxes worked (or if I could figure out how they work, if they do) -- two phrases in the email would be OK, but two paragraphs is not OK.

All other suggestions welcome ... I've already learned a lot from reading old posts here.

Edward
Attachments:
User 38401 Photo


Senior Advisor
10,951 posts

You would be better off to put a Plain Text box above the checkbox and use those explanations in there to tell them the 2 differences. This way none of that long explanation has to be included in the actual email reply or results to anyone. Just put it right above the checkbox labeled Group Choice and then just rename the check box explanations to just the first line of each that tells what it is:

[ ] Low-volume moderated email list
[ ] IHLNA "secret" FaceBook group

That fixes that whole issue there :)
User 519110 Photo


Registered User
2 posts

Thanks, Jo Ann. I've modified the form to use a separate text box for the explanations. The notification email is a lot easier to read now, which the person who's going to process them will appreciate. I really wanted the explanations closer to the check boxes, though, so I put the text boxes to the right of the checkbox group.

The form works OK for the submitter now, but I'm not exactly happy with the format. I'm surprised at how many elements of the form are apparently not controllable by the user. I say apparently because I'm a long way from sure that I know all the tricks. I list the things I'd like to control better in case someone can point me in the direction of better control. (Note that I know I could modify the generated HTML, but I'm very much aware of the maintenance nightmare that could create. I've been programming for over 40 years.) I could write my own style sheet to override the WFB styles if this is feasible, but I searched the manual and could not find any mention of this. (That's the manual with no index.)

-- Relative part of the column for the label and the input element. (Control of this would have made it a lot easier for me to line up the Signup Choice part with the rest of the form.)

-- Text color of input box. WBF appears to hard-code #454545. My aging eyes hate gray text. (So does Jakob Nielsen.) Is there no way to control this?

-- Leading (line-height) of plain text boxes. WFB appears to set it unconditionally to 1.6em, which creates lots of excess space. I'm not sure exactly what's going on, but when I match the plain text font to the hint font (which appears to be 11 point, and I'm using Verdana throughout), the plain text box has much more spacing between lines. This is visible on my form -- compared the hint text under the email address input to the plain text to the right of the check boxes.

-- Width of elements -- is it really restricted to just the limited choices on the popup? I can't say 40%:

-- No width option for CAPTCHAs? None for the footing? I've left-aligned these, because they looked silly centered after I reduced the width of most of the form to allow for the text boxes to the right of the check boxes. I could maybe put CAPTCHA and Submit beside each other, but I don't see how to do that wihtout widths either.

Thanks for the help,

Edward
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Paleolith, I'll try to answer as best as I can here.

paleolith wrote:

-- Relative part of the column for the label and the input element. (Control of this would have made it a lot easier for me to line up the Signup Choice part with the rest of the form.)

If you play with the margins and paddings you can line up anything pretty much. Remember to use the widths as well as the margins and paddings as part of your line up team as that also will make a difference. When using check boxes and radio buttons there are extra settings for them as to if you want 2 column or 3 column or side by side, etc. that will also play a big part in lining them up. Takes a bit of practice, but once you have the general idea it should all fall into place.

paleolith wrote:

-- Text color of input box. WBF appears to hard-code #454545. My aging eyes hate gray text. (So does Jakob Nielsen.) Is there no way to control this?

I'll have to see if I can find out what file that's in unless someone else knows off hand. You can change it in the files, you just have to realize that if you update the form in the program again it will most likely overwrite it so it's a good idea to keep a list of the changes you make in the files so you know what to replace after you update the form. Also a very good idea to wait until after you have the main form setup complete before you update files outside the program so you don't have to keep putting those changes back while you're creating the form.

paleolith wrote:

-- Leading (line-height) of plain text boxes. WFB appears to set it unconditionally to 1.6em, which creates lots of excess space. I'm not sure exactly what's going on, but when I match the plain text font to the hint font (which appears to be 11 point, and I'm using Verdana throughout), the plain text box has much more spacing between lines. This is visible on my form -- compared the hint text under the email address input to the plain text to the right of the check boxes.

This is again another thing you can change in the files but I would again wait until you have the form itself complete how you want it before making style changes that aren't part of the form functionaltiy so you don't have to keep doing it over and over while you edit the form.

paleolith wrote:

-- Width of elements -- is it really restricted to just the limited choices on the popup? I can't say 40%:

Yep, unfortunately many of us have asked for more leeway on being able to put our own widths in manually instead of the very limited number that we've been given to choose from. So far we haven't gotten anything added for it yet so I don't know if they plan to ever do that or not.

paleolith wrote:

-- No width option for CAPTCHAs? None for the footing? I've left-aligned these, because they looked silly centered after I reduced the width of most of the form to allow for the text boxes to the right of the check boxes. I could maybe put CAPTCHA and Submit beside each other, but I don't see how to do that wihtout widths either.

I believe this is more due to the size of the reCaptcha itself rather than limitations within the program. Since it uses Google's reCaptcha setup, it's using it at the size that it's set at from Google, so that's what it's setup for in Form Builder. I think they may be adding some new captcha choices in the future though if their testing of them works out good. We'll have to wait and see on that. :)

Hope that helps and good luck on your forms :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.