Hey! I just had to work through this and thought I'd post the Particle code here.
I created a field in the RocketTheme Gantry 5 Contact Form Particle that allows you to add as many custom Text Fields as you'd like and mark whether they're required or not. I chose to leave all the other default fields (name, email, subject, and message) intact, but you could just as easily remove Name or Subject (which are both just Text fields ~ while the others are different field types) if you'd like full control over all your Text fields. NOTE: If you DO remove other fields be sure and strip out their error checker statements like {% if post[contact_subject] is empty %} or {% if post[contact_name] is empty %} towards the top -- those are Post Submit checks only; our custom fields below still get the benefit of Pre Submit JS required checks.
I started with the Contact Form Particle for Gantry 5 WordPress packed into many of our themes but I think it should work out-of-the-box with Joomla or Grav as well. For Joomla and Grav though you'll want to match the variables in the original {%set body... output as the example below is using WordPress Localization... the __('word', 'g5_theme') bits... which is likely handled differently in other CMSs
//If you're using a RocketTheme template you should do this
as an Override
.
YAML
Add this somewhere in your contactform.yaml; I put it between the 'email_from' field and the 'recaptcha.enabled' field. This allows you to create new custom Text fields within the Particle's admin.custom_fields:
type: collection.list
array: true
label: Custom Fields
description: Add new items to create custom Text fields.
value: name
ajax: true
fields:
_topnote:
type: separator.note
class: alert alert-info
content: Enter a Field Name for this item (pencil icon) and choose whether it should be required or not. Only alphanumeric characters and spaces are allowed.
.required:
type: input.checkbox
label: Required?
description: Choose whether this field should be required.
default: 0
TWIG
First we'll output the fields in the actual frontend form. For me this was around Line 130 and I stuck it between the 'Email' field and the 'Subject' field.{% if particle.custom_fields %}
{% for field in particle.custom_fields %}
<div class="control-group">
<div class="control-label">
<label {% if field.required %}class="required"{% endif %}>{{ field.name }}{% if field.required %}<span class="star"> *</span>{% endif %}</label>
</div>
<div class="controls">
<input {% if field.required %}class="required" required="required"{% endif %} id="{{ field.name|lower|replace({' ': '_'})}}" name="{{ field.name|lower|replace({' ': '_'})}}" size="30" type="text" value="" />
</div>
</div>
{% endfor %}
{% endif %}
This part needs to be inside the '{% if has_error is not defined and validated %}' statement but before the '{% set body ...' statement. For me that was around line 66. It preps your custom field data into a string for the email that needs to be sent.{% if particle.custom_fields %}
{% set customfields = '' %}
{% for field in particle.custom_fields %}
{% set postid = field.name|lower|replace({' ': '_'}) %}
{% set postdata = post[postid] %}
{% set customfields = customfields ~ field.name ~ ': ' ~ postdata ~ "\n" %}
{% endfor %}
{% endif %}
then I modified my {%set body...%} which is just below this code to include the 'customfields' string we just created. Again, this is a WordPress example with WP Localization on the standard fields... you simply need to add the word/variable customfields in tildas to the string. If you are using WordPress 'g5_theme' should match your Theme name to maintain localization; or simply leave it as it is in your Theme's Particle code already.
{% set body = __('From:', 'g5_theme') ~ ' ' ~ post['contact_name']|e ~ "\n" ~ __('Reply-To:', 'g5_theme') ~ ' ' ~ post['contact_email']|e ~ "\n" ~ customfields ~ __('Message:', 'g5_theme') ~ ' ' ~ post['contact_message'] %}
And that's it!
The following users have thanked you: MrT, BIRS Webmaster