Merge pull request #150 from TeamEver/0c25hj-codex/add-optional-html-class-parameter-to-everblock-shortcodes

Allow custom CSS classes for form shortcode fields

Author: CySSoO

models/EverblockTools.php

@@ -1170,6 +1170,7 @@ public static function generateFormFromShortcode(
             'value' => $attributes['value'] ?? null,
             'values' => isset($attributes['values']) ? explode(',', $attributes['values']) : [],
             'required' => isset($attributes['required']) && strtolower($attributes['required']) === 'true',
+            'class' => isset($attributes['class']) ? htmlspecialchars($attributes['class'], ENT_QUOTES) : '',
             'unique' => $uid,
             'id' => 'everfield_' . $uid,
         ];

views/templates/hook/contact_field.tpl

@@ -22,21 +22,22 @@
 {assign var="value" value=$field.value}
 {assign var="unique" value=$field.unique}
 {assign var="id" value=$field.id}
+{assign var="class" value=$field.class}
 
 {if $type == 'sento'}
   <input type="hidden" name="everHide" value="{$label|base64_encode}">
 {elseif in_array($type, ['password','tel','email','datetime-local','date','text','number'])}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label for="{$id}" class="d-none">{$label nofilter}</label>
     <input type="{$type}" class="form-control" name="{$label}" id="{$id}" placeholder="{$label}"{if $value} value="{$value|escape:'htmlall':'UTF-8'}"{/if}{if $required} required{/if}>
   </div>
 {elseif $type == 'textarea'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label for="{$id}" class="d-none">{$label nofilter}</label>
     <textarea class="form-control" name="{$label}" id="{$id}" placeholder="{$label}"{if $required} required{/if}>{$value|escape:'htmlall':'UTF-8'}</textarea>
   </div>
 {elseif $type == 'select'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label for="{$id}" class="d-none">{$label nofilter}</label>
     <select class="form-control" name="{$label}" id="{$id}"{if $required} required{/if}>
       <option value="" disabled selected>{$label}</option>
@@ -47,7 +48,7 @@
     </select>
   </div>
 {elseif $type == 'multiselect'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label for="{$id}" class="d-none">{$label nofilter}</label>
     {assign var='selectedValues' value=","|explode:$value}
     <select class="form-control" name="{$label}[]" id="{$id}" multiple{if $required} required{/if}>
@@ -58,7 +59,7 @@
     </select>
   </div>
 {elseif $type == 'radio'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label>{$label nofilter}</label>
     <div class="form-check">
       {foreach from=$values item=val}
@@ -72,7 +73,7 @@
     </div>
   </div>
 {elseif $type == 'checkbox'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label class="d-none">{$label nofilter}</label>
     <div class="form-check">
       {assign var='checkedValues' value=","|explode:$value}
@@ -87,12 +88,12 @@
     </div>
   </div>
 {elseif $type == 'file'}
-  <div class="form-group mb-4">
+  <div class="form-group mb-4{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">
     <label for="{$id}" class="d-none">{$label nofilter}</label>
     <input type="file" class="form-control-file" name="{$label}" id="{$id}"{if $required} required{/if}>
   </div>
 {elseif $type == 'submit'}
-  <button type="submit" class="btn btn-primary evercontactsubmit">{$label}</button>
+  <button type="submit" class="btn btn-primary evercontactsubmit{if $class} {$class|escape:'htmlall':'UTF-8'}{/if}">{$label}</button>
 {elseif $type == 'hidden'}
-  <input type="hidden" name="hidden" value="{$label}">
+  <input type="hidden" name="hidden" value="{$label}"{if $class} class="{$class|escape:'htmlall':'UTF-8'}"{/if}>
 {/if}