0
Welcome Guest! Login
0 items Join Now

Add Custom TEXT Fields to the Contact Form Particle

    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20628
    • Thanks: 2924
    • messin' with stuff

    Add Custom TEXT Fields to the Contact Form Particle

    Posted 7 months 5 days 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: 7 months 5 days ago by Matt.
    • The following users have thanked you: MrT

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics :woohoo:

Time to create page: 0.051 seconds