0
Welcome Guest! Login
0 items Join Now

Add Custom TEXT Fields to the Contact Form Particle

Last Post
Search Topic
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21555
    • Thanks: 3090
    • messin' with stuff

    Add Custom TEXT Fields to the Contact Form Particle

    Posted 5 years 1 day ago
    • 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">&nbsp;*</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!
    • Last Edit: 5 years 22 hours ago by Matt.

    • The following users have thanked you: MrT, BIRS Webmaster

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1407477

Time to create page: 0.051 seconds