SMF2.1:Custom profile fields

Work in progress, expect frequent changes.

Please see https://wiki.simplemachines.org/smf/How_to_use_Advanced_Profile_Fields for the first version of this page, which was written for version 2.0.

How to Create Custom or Advanced Profile Fields

Please see Features and Options > Profile Fields to learn how to enable this feature and read descriptions for all the options. At the bottom of the page, Admin Center > Configuration > Features and Options > Profile Fields, is a table titled Custom Profile Fields. The far right column contains a text link, Modify, for each custom profile field in the table. By clicking that, administrators can examine the settings used for each type of custom profile field in the table. And by comparing those settings with all the descriptions on the above manual page, you can learn how to make your own custom profile fields.

This page, that you're reading now, provides more of a step by step process, using the same variables as the example on the above manual page. If you are in a hurry, this may give you a bit of a head start; but if you need to use this feature, you should still study the profile fields in the table, when you have a chance. If you get stuck, you can visit the SMF Community Forum, or any of the Support options.

To get started with either a textual field, or an icon field, go to the table at the bottom of the page, Admin Center > Configuration > Features and Options > Profile Fields. At the bottom, right corner of the table, click the New Field button.

Create Custom Profile Fields as Text

1. In the Display Settings section, fill in all the options, except Show Enclosed Within Text.
2. In the Input Settings section, whatever option you choose for Field Type, determines the type and number of options in the rest of the form. Most of them are self-explanatory, but you can find descriptions for them on the page referenced above. Most importantly, if you choose the Text option, it will cause the Input Mask option to be displayed in the Advanced Settings section below.
3. In the Advanced Settings section, fill in all the options, except Input Mask. Note that Input Mask will not be showing, if you did not choose Text for the Input Settings > Field Type option.

When you're finished, click the Save button in the bottom, right corner.

Now you should see your new custom profile field in the Custom Profile Fields table. There, you can further adjust where you want it to appear in the profile. And you should also be able to see the new field being used in member profiles.

Create Custom Profile Fields as an Icon

This is the optional and advanced feature, for which an input mask is used to display an icon. If you're not familiar with input masks, you may wish to do your own research, to learn more about it. But this page will walk you through the way SMF is using one.

1. In the Display Settings section, fill in all the fields.
   1. For Choose Placement choose an appropriate placement for the icon. The section of the same name, in the Profile Fields section of the manual, describes where the icon will appear in the profile, for each option.
   2. For this example, in the Show Enclosed Within Text option, paste the same example which was given on the above linked page:

      <a href="http://website.com/{INPUT}"><img src="{DEFAULT_IMAGES_URL}/icon.gif" alt="{INPUT}" /></a>

      1. Now you need to replace "https://website.com/{INPUT}" with whatever is appropriate for your needs. For example, if it's going to be an icon to call up Skype, then change it to "http://skype.com/{INPUT}".
      2. Next, if you're using the SMF default theme, Curve 2, or if you want to use the same icon across all your themes, you can keep "DEFAULT_IMAGES_URL" just like it is. Then you either need to select an icon from ...Themes/default/images, or if you found an icon somewhere else, upload it there. This will save you some time and energy.

         But if you want to use a different icon for each custom theme, you need to replace "DEFAULT_IMAGES_URL" with "IMAGES_URL". And then either select an icon from ...Themes/yourtheme/images, or if you found an icon somewhere else, upload it there, for each custom theme that you use.

      3. Next, change "icon.gif" to whatever is your icon's name.
2. In the Input Settings section, fill in all the fields.
   1. You must choose Text for the Field Type field.
3. Fill in all the fields in the Advanced Settings section.
   1. For Input Mask: For most uses, choose No HTML; if the icon is for an email address, choose Valid Email; if the text part will be all numbers, such as for a phone number, select Numeric; and finally, if you know what it means, or want to learn what it means, choose Regex (Advanced). If you're learning, the question mark icon will help you decide what to enter in the new field which shows up when you make the Regex selection.

      However, for our example on this page, about using an icon for a Custom Profile Field, if you're not going to use the Regex option, choose No HTML.

Now you should see your new custom profile field in the Custom Profile Fields table. And you should also be able to see the custom profile field in your members' profile forms!