Extend Better Contact (sp_bettercontact) with custom fields

Extending Better Contact (sp_bettercontact) to include custom fields is quite easy. Lets assume that we want to add first_name and last_name as input fields in our contact form.

First of all you need to find and adjust your HTML template. You can find default version in sp_bettercontact plugin directory, e.g. EXT:sp_bettercontact\res\templates\frontend\form.html. Preferably make a copy somewhere in your fileadmin folder and instruct sp_bettercontact plugin to use copy of template.

Insert fields into HTML template:


<!--
Field for first name
-->
<p class="tx_spbettercontact_message">###MSG_FIRST_NAME###</p>
<label for="###FIRST_NAME###" class="tx_spbettercontact_label firstname_label">###LABEL_FIRST_NAME### ###REQUIRED_FIRST_NAME###</label>
<input type="text" name="###FIRST_NAME###" value="###VALUE_FIRST_NAME###" class="###ERR_FIRST_NAME###" />
<br />
<!--
Field for last name
-->
<p class="tx_spbettercontact_message">###MSG_LAST_NAME###</p>
<label for="###LAST_NAME###" class="tx_spbettercontact_label lastname_label">###LABEL_LAST_NAME### ###REQUIRED_LAST_NAME###</label>
<input type="text" name="###LAST_NAME###" value="###VALUE_LAST_NAME###" class="###ERR_LAST_NAME###" />
<br />


Please note syntax of HTML markers (MSG_, VALUE_, ERR_, REQUIRED_, LABEL_).

Afterwards we need to make sp_bettercontact plugin aware of new fields via TypoScript setup, e.g.:


plugin.tx_spbettercontact_pi1 {
 fields {
  first_name {
   required = 1
   minLength = 3
   maxLength = 70
   regex =
   disallowed = 0123456789<>(){}!?%&§$
   allowed =
   default =
  }
  last_name {
   required = 1
   minLength = 3
   maxLength = 70
   regex =
   disallowed = 0123456789<>(){}!?%&§$
   allowed =
   default =
  }
 }
 _LOCAL_LANG.default {
  msg_first_name_empty = First name missing!
  msg_last_name_empty = Last name missing!
 }
}


As for labels and translations, you could inline them like in above example or you could use locallang.xml file to insert you own localisations. Take a look at EXT:sp_bettercontact\res\templates\examples\additional_locallang.xml file.

Automatically fill user data in Better Contact (sp_bettercontact)

Sometimes we want our contact forms to come pre-populated with data that we already know in order to make things easier for end user. Here is a snippet of TypoScript code that will populate our new variables with first name and last name of registered user (provided he’s logged in):


[loginUser = *]
lib.val_first_name = TEXT
lib.val_first_name.data = TSFE:fe_user|user|first_name
 
lib.val_last_name = TEXT
lib.val_last_name.data = TSFE:fe_user|user|last_name
 
plugin.tx_spbettercontact_pi1.fields.first_name.default < lib.val_first_name
plugin.tx_spbettercontact_pi1.fields.last_name.default < lib.val_last_name
[global]


If you with to prevent users from editing pre-populated fields consider using readonly HTML tag instead of disabled for input elements because contact form might have a trouble reading data from disabled elements.