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.