├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .stylelintrc.js ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── app ├── admin.php └── frontend.php ├── assets ├── admin.css └── admin.js ├── composer.json ├── composer.lock ├── gravity-forms-data-attributes.php ├── package.json ├── screenshots ├── checkboxes.png └── single-line-text.png └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.php] 14 | indent_size = 4 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: 'eslint:recommended', 4 | globals: { 5 | wp: true, 6 | SetFieldProperty: true, 7 | gform: true, 8 | GetInputType: true, 9 | GetSelectedField: true, 10 | }, 11 | env: { 12 | node: true, 13 | es6: true, 14 | amd: true, 15 | browser: true, 16 | jquery: true, 17 | }, 18 | parserOptions: { 19 | ecmaFeatures: { 20 | globalReturn: true, 21 | generators: false, 22 | objectLiteralDuplicateProperties: false, 23 | }, 24 | ecmaVersion: 2017, 25 | sourceType: 'module', 26 | }, 27 | plugins: ['import'], 28 | settings: { 29 | 'import/core-modules': [], 30 | 'import/ignore': [ 31 | 'node_modules', 32 | '\\.(coffee|scss|css|less|hbs|svg|json)$', 33 | ], 34 | }, 35 | rules: { 36 | 'no-console': 0, 37 | quotes: ['error', 'single'], 38 | 'comma-dangle': [ 39 | 'error', 40 | { 41 | arrays: 'always-multiline', 42 | objects: 'always-multiline', 43 | imports: 'always-multiline', 44 | exports: 'always-multiline', 45 | functions: 'ignore', 46 | }, 47 | ], 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | vendor 2 | node_modules 3 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: "stylelint-config-standard", 3 | rules: { 4 | "no-empty-source": null, 5 | "string-quotes": "double", 6 | "at-rule-no-unknown": [ 7 | true, 8 | { 9 | ignoreAtRules: [ 10 | "extend", 11 | "at-root", 12 | "debug", 13 | "warn", 14 | "error", 15 | "if", 16 | "else", 17 | "for", 18 | "each", 19 | "while", 20 | "mixin", 21 | "include", 22 | "content", 23 | "return", 24 | "function", 25 | "tailwind", 26 | "apply", 27 | "responsive", 28 | "variants", 29 | "screen", 30 | ], 31 | }, 32 | ], 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 1.1.0 / 2019-09-24 4 | 5 | - Add support for multiple columns using List field type (thanks @reddo!) 6 | 7 | ## 1.0.5 / 2019-08-28 8 | 9 | - Update dependencies to fix vulnerabilities 10 | 11 | ## 1.0.4 / 2018-12-3 12 | 13 | - Replace `pre-commit` with `husky` 14 | 15 | ## 1.0.3 / 2018-12-1 16 | 17 | - Add PHP linting 18 | 19 | ## 1.0.2 / 2018-12-1 20 | 21 | - Fix for multiselect dropdowns 22 | 23 | ## 1.0.1 / 2018-12-1 24 | 25 | - Add pre-commit lint 26 | - Fix JS linter errors 27 | 28 | ## 1.0.0 / 2018-12-1 29 | 30 | - Initial release 31 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Matt Mirus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gravity Forms Data Attributes 2 | 3 | - [Usage](#usage) 4 | - [Installation](#installation) 5 | - [Contributing](#contributing) 6 | - [Screenshots](#screenshots) 7 | 8 | This plugin allows you to add custom data attributes to Gravity Forms fields. 9 | 10 | It should work with: 11 | 12 | - all of the Standard field types 13 | - any of the Advanced field types that only have one input field (e.g., Email but not Address) 14 | - the List advanced field type, including with multiple columns (thanks @reddo!). 15 | 16 | For fields with choices, such as checkboxes, you can assign separate values for each data attribute for each choice (the UI for this is ugly right now 🤷‍). 17 | 18 | ## Usage 19 | 20 | For each field you want to enable data attributes for: 21 | 22 | 1. On the field's General settings tab, check the **Enable Data Attributes** box. 23 | 2. In the **Data Attribute Names** field that appears, enter one data attribute name (e.g., `my-attribute`) per line. 24 | - _Do not_ prefix your attribute name with `data-`. The plugin will do that for you, 25 | 3. Save your form. 26 | 4. Reopen the field settings. You will now see additional setting fields where you can enter the value of each data attribute you added. 27 | - For fields with choices, such as checkboxes, the data attribute value settings appear next to each choice's name and value fields. 28 | - For other fields, the data attribute value settings will appear underneath the Data Attribute Names field. 29 | 30 | ## Installation 31 | 32 | There are three options for installing this plugin: 33 | 34 | 1. With composer from [Packagist](https://packagist.org/packages/mmirus/gravity-forms-data-attributes): `composer require mmirus/gravity-forms-data-attributes` 35 | 2. With [GitHub Updater](https://github.com/afragen/github-updater) 36 | 3. By downloading the latest release ZIP from this repository and installing it like any normal WordPress plugin 37 | 38 | ## Contributing 39 | 40 | To work on this project (for yourself or to contribute a PR): 41 | 42 | 1. Clone this repo 43 | 2. Run `composer install` 44 | 3. Run `yarn` or `npm install` 45 | 46 | And you should be good to go. 47 | 48 | Pre-commit linting is enforced (see `.eslintrc.js` and `.stylelintrc.js` for scripts and styles; PHP uses PSR-2). 49 | 50 | ## Screenshots 51 | 52 | _Settings for a field without choices_ 53 | 54 | ![Alt Text](/screenshots/single-line-text.png) 55 | 56 | _Settings for a field with choices (checkboxes)_ 57 | 58 | ![Alt Text](/screenshots/checkboxes.png) 59 | -------------------------------------------------------------------------------- /app/admin.php: -------------------------------------------------------------------------------- 1 | id !== 'toplevel_page_gf_edit_forms') { 9 | return; 10 | } 11 | 12 | wp_register_script('gravity-forms-data-attributes', plugins_url('assets/admin.js', dirname(__FILE__)), ['gform_form_admin']); 13 | wp_enqueue_script('gravity-forms-data-attributes'); 14 | 15 | wp_register_style('gravity-forms-data-attributes', plugins_url('assets/admin.css', dirname(__FILE__))); 16 | wp_enqueue_style('gravity-forms-data-attributes'); 17 | }); 18 | 19 | // Add "Enable Data Attributes" and "Data Attribute Names" settings 20 | add_action('gform_field_standard_settings', function ($position, $form_id) { 21 | if ($position === 1350) : 22 | ?> 23 |
  • 24 | 25 | 28 | 29 | 40 |
    • 41 | Data Attribute Names

    Enter the names of the data attributes you wish to enable, one per line.

    You must save the form after changing this setting.

    "; 48 | return $tooltips; 49 | }); 50 | 51 | // Register "Enable Data Attributes" and "Data Attribute Names" settings for all field types 52 | add_action('gform_editor_js', function () { 53 | ?> 54 | 59 | enableDataAttrsField; 15 | } 16 | 17 | // Add data attributes to inputs that don't have multiple choices 18 | add_filter('gform_field_content', function ($content, $field, $value, $lead_id, $form_id) { 19 | // Bail if: in the admin, no data attributes, or the field has choices 20 | if (is_admin() || !fieldHasDataAttributes($field) || !empty($field->choices)) { 21 | return $content; 22 | } 23 | 24 | $attrs = dataAttrNamesToArray($field->dataAttrsField); 25 | 26 | $attrHtml = ''; 27 | 28 | foreach ($attrs as $attr) { 29 | // skip if not set 30 | if (!property_exists($field, $attr)) { 31 | continue; 32 | } 33 | 34 | $value = $field[$attr]; 35 | $attrHtml .= " data-{$attr}='{$value}'"; 36 | } 37 | 38 | if ($attrHtml) { 39 | $content = str_replace(' name=', "$attrHtml name=", $content); 40 | } 41 | 42 | return $content; 43 | }, 10, 5); 44 | 45 | // Add data attributes to inputs that have multiple choices (checkboxes, drop downs, etc.) 46 | add_filter('gform_field_choice_markup_pre_render', function ($choice_markup, $choice, $field, $value) { 47 | // Bail if: in the admin or no data attributes 48 | if (is_admin() || !fieldHasDataAttributes($field)) { 49 | return $choice_markup; 50 | } 51 | 52 | $attrs = dataAttrNamesToArray($field->dataAttrsField); 53 | 54 | $attrHtml = ''; 55 | 56 | foreach ($attrs as $attr) { 57 | // skip if not set 58 | if (!array_key_exists($attr, $choice)) { 59 | continue; 60 | } 61 | 62 | $value = $choice[$attr]; 63 | $attrHtml .= " data-{$attr}='{$value}'"; 64 | } 65 | 66 | if ($attrHtml) { 67 | switch ($field->type) { 68 | case 'select': 69 | case 'multiselect': 70 | $choice_markup = str_replace('