Join Form Helper

I came across something like this on another site long ago and decided to post here thinking it would help get the join form completed. 

I have tested this on friends and family. During the join form data entry, some fields are confusing and the blue "info" icon really does not stand out to most. It works for me.

Secondly, after submitting, some fields i.e. description may require more information and the red "explanation" make is too tiny as well.

To use,

1. Admin>Page Blocks
2. Select "Join Page"
3. Drag HTML box up above the join box.
4. Open the box to edit
5. Select the HTML button and paste the following code there, you can change what you need to suit your site.
6. The icon images are pulled from your templates directory.

<p style="padding-left: 30px;"><span style="font-size: medium;">In the Join form below you will see the <span style="font-size: medium;"><strong><span style="color: #ff0000; font-size: xx-large;">* </span></strong></span>it indicates compulsary items. <span style="font-size: small;">(must be entered)</span></span></p><p style="padding-left: 30px;"><span style="font-size: medium;">Hover your mouse over the</span> <img title="Information Icon" src="/templates/base/images/icons/info.gif" alt="Information Icon" width="41" height="38" /> <span style="font-size: medium;">icon for more info.</span></p><p style="padding-left: 30px;"><span style="font-size: medium;">If you see a</span> <img title="Error Icon" src="/templates/base/images/icons/exclamation.png" alt="Error Icon" width="42" height="43" /> <span style="font-size: medium;">icon after you use the submit button on a field, </span></p><p style="text-align: center;"><span style="text-decoration: underline;"><span style="font-size: small;"><em>it indicates the field has not been filled in correctly.</em></span></span></p>

Michael

I'm reading about our new icons for 7.1 from "font-awesome" and was curious if I can incorporate some of them in this join form info box?

Not being the best at this. Can I use them for this?

An excellent idea... I added it to my two-page join form on the right side column.  After tweaking it to fit the page and intended audience, I think it should prove very helpful for new members joining. 

Thank you for posting the idea.

Thanks, it does help get the members signed up.

I realized the photo was missing, here it is...

Very good, but I wouldn't enlarge the icons.

Great.

I'm using this new member registration help too, thanks to your instructions newton27.

I did it slightly diffrent since I'm using multi language site.
I've created new HTML block as you've described but I left the block empty. Then I've added new language key: "_join_helper" and then I've entered html code in that newly created language key and of course translated to other languages....

I'm not sure if this is the correct way to do things like that but it works OK.

Regards

Mayki