FrontendForms - A module for creating and validating forms on the frontend

[Juergen]

On 6/27/2024 at 8:37 PM, dotnetic said:

Another thing: I made my own TailwindCSS adapter which was very easy, with the json files for the other frameworks as a base.

@dotnetic it would be great if you post the json file here, so I maybe include it in the next update 😏

[dotnetic]

Sure, I can do that, but it's very rudimentary and not optimized for all purposes (for example I did not use CAPTCHAS or other stuff).

It also depends on classes like primary that I have defined in the colors option of my theme in the tailwind.config.js

const colors = require("tailwindcss/defaultTheme");
module.exports = {
theme: {
    colors: ({ colors }) => ({
      primary: "#E85E27",
      secondary: "#89508e",
      black: "#000",
      white: "#ffffff",
      accent: "#c64511",
      transparent: "transparent",
      neutral: "#ffffff",
      info: "#ffffff",
      success: "#10b981",
      warning: "#f37f1e",
      error: "#e11d48",
      current: "currentColor",
      gray: colors.gray,
      slate: colors.slate,
      darkgray: "#1F2227",
    })
};

Please also note that you want to add the path to the file to the content section in your tailwind.config.js so the parser sees which classes to compile:

 content: [
    './dist/site/templates/*.{php,latte}',
    './dist/site/modules/FrontendForms/CSSClasses/*.json',
    './dist/site/templates/RockForms/Renderer/*.php',
    './dist/site/templates/RockForms/*.{php,latte}',
    './dist/site/templates/partials/**/*.latte',
    './dist/site/templates/RockPageBuilder/blocks/**/*.{php,latte}',
    './src/js/*.js',
  ],

I also wanted to add that it might be better to store these styling files under site/templates/FrontendForms/, as I think they would be customized for every project.

Right now, when I do a module update they would be overwritten.

 

tailwindcss.json

[Juergen]

Thanks @dotnetic

I will take a look at the classes. The problem is that they should not contain color classes in it - so I need to check it first.

[Juergen]

10 hours ago, dotnetic said:

I also wanted to add that it might be better to store these styling files under site/templates/FrontendForms/, as I think they would be customized for every project.

This is  a good idea for an addition, but you have to keep in mind that it would probably not work for all frameworks. The problem is that not every framework has the same markup structure for inputfields. As an example would be the difference between UIKit and Boostrap: There are slightly differences in the markup, especially on checkboxes. Only changing the classnames does not work in this case. The markup rendered has to be changed too.

That is the reason, why I have written the code to be able to use different render functions depending on the framework set.

10 hours ago, dotnetic said:

Right now, when I do a module update they would be overwritten.

That is right, but do you know that you are able to change the classnames directly inside the module configuration, so the classnames will be stored inside the database? In this case the classnames will not be overwritten during an update. The main disadvantage is that you cannot use it on another installation.

You will find it under "Markup and styling/Settings for markup and styling/Own CSS classes

Best regards