Help!: which form builder is good to work with cwicly?

hello, i want to create a WooCommerce login page and register page, i am wondering: which form builder is good for this? very appreciate for your help, thanks in advance. :heartbeat: :heartbeat: :heartbeat:

Most popular form builders use their own custom visual form builder that’s not integrated with Gutenberg. These forms are usually then added to your posts/pages with shortcodes. Some form builders have a dedicated Gutenberg block.

I haven’t seen any form builder integrated with Gutenberg in a way that’ll let you use Gutenberg blocks to add elements to the form. But I don’t use forms that often so maybe somebody with more experience with forms knows about such form builder.

I’d suggest you to choose a form builder that fits your needs/budget. If you can use shortcodes to add the form to your posts/pages, then you shouldn’t have problems using it with Cwicly. Take into consideration that not all form builders allow you to customize all aspects of the form. In such cases you’d need to apply custom css to achieve the design you need.

A Cwicly form builder is planned . You might be interested in this this feature Cwicly Form Builder.

thanks for your answer. really appreciate.

cwicly form-builder seems still need long long time… :rofl:

I, too, look forward to the Cwicly form builder, but I’m not holding my breath. We’ve used Fluent Forms with Cwicly, as follows:

  1. Fluent Forms plugin (obviously)
  2. Disable Styles & Scripts plugin to disable loading of Fluent Forms CSS on the frontend. This plugin hasn’t been updated in some time, but it’s very simple and works beautifully. I install it on every site I build. It’s a challenge to find in the WordPress admin plugin store–either download it from the link above, or search by author for lpeharda.
  3. We then use a global fluentform class to style the fluent forms inputs and buttons:

{“globalClasses”:{“z2iIpCrD2d4KvVg”:{“attributes”:{“ccAClasses”:{“c73e030c-7883-42ce-a082-fd569680cac7”:{“clientId”:“c73e030c-7883-42ce-a082-fd569680cac7”,“classID”:“section-c80cac7”},“9f240559-e34d-47c3-9fb7-4ebae8919b69”:{“clientId”:“9f240559-e34d-47c3-9fb7-4ebae8919b69”,“classID”:“heading-c919b69”}},“htmlAttributes”:,“relativeStyles”:[{“name”:“Column Layout”,“rules”:[{“selectorType”:“class”,“selector”:“ff-column-container”,“combinator”:" “,“id”:“x118v”},{“selectorType”:”“,“selector”:”“,“combinator”:” , “,“id”:“rjaim”},{“selectorType”:“class”,“selector”:“ff-t-container”,“combinator”:” “,“id”:“dr88”}],“id”:“AzNzg”},{“name”:“Inputs”,“rules”:[{“selectorType”:“class”,“selector”:“ff-el-form-control”,“combinator”:” “,“id”:“thw5c”}],“id”:“E1MDg”},{“name”:“Cell Layout”,“rules”:[{“selectorType”:“class”,“selector”:“ff-t-cell”,“combinator”:” “,“id”:“533t2”}],“id”:“U5NDY”},{“name”:“Input Placeholder”,“rules”:[{“selectorType”:“class”,“selector”:“ff-el-form-control”,“combinator”:” “,“id”:“2qz1x”},{“selectorType”:“pseudoelements”,“selector”:”::placeholder",“combinator”:“”,“id”:“uzrb3”,“selectorAdd”:“”}],“id”:“M3MjM”},{“name”:“Hidden Elements Labels”,“rules”:[{“selectorType”:“class”,“selector”:“ff-el-form-hide_label”,“combinator”:" “,“id”:“cb0vv”},{“selectorType”:“type”,“selector”:“label”,“combinator”:” “,“id”:“wcany”},{“selectorType”:”“,“selector”:”“,“combinator”:” , “,“id”:“htr3p”},{“selectorType”:“class”,“selector”:“iti__flag-container”,“combinator”:” “,“id”:“8iezkl”}],“id”:“MxNjM”},{“name”:“Group Layout”,“rules”:[{“selectorType”:“class”,“selector”:“ff-el-group”,“combinator”:” “,“id”:“lap8oj”}],“id”:“A5MjA”},{“name”:“Button”,“rules”:[{“selectorType”:“type”,“selector”:“button”,“combinator”:” “,“id”:“I5Nzc”}],“id”:“gzMDk”}],“classID”:“fluentform”,“containerSizeWidth”:{“rslgE1MDg”:“100%”,“rslgU5NDYplaceholder”:“100%”,“rslgU5NDY”:“100%”},“containerLayoutJustifyContent”:{“lg”:”“},“containerLayoutAlignItems”:{“rslgAzNzg”:“center”,“rssmAzNzg”:“center”,“lg”:”“},“containerLayoutDisplay”:{“sm”:”“,“rslgAzNzg”:“flex”,“rsmdAzNzg”:“flex”,“rssmAzNzg”:“flex”,“rslgMxNjM”:“none”,“rslgU5NDY”:”“,“rslgA5MjA”:”“,“lg”:”“},“containerLayoutFlexDirection”:{“sm”:”“,“rslgAzNzg”:“row”,“rssmAzNzg”:“column”,“rslgA5MjA”:”“,“lg”:”“},“containerLayoutChildren”:{“rsmdAzNzg”:“wrap”},“radiusTop”:{“rslgE1MDg”:“1rem”},“radiusLeft”:{“rslgE1MDg”:“1rem”},“radiusRight”:{“rslgE1MDg”:“1rem”},“radiusBottom”:{“rslgE1MDg”:“1rem”},“borderWidthTop”:{“rslgE1MDg”:“2px”},“borderWidthLeft”:{“rslgE1MDg”:“2px”},“borderWidthRight”:{“rslgE1MDg”:“2px”},“borderWidthBottom”:{“rslgE1MDg”:“2px”},“borderStyle”:{“rslgE1MDg”:“solid”,“lg”:”“},“borderColor”:{“rslgE1MDg”:“var(–cc-color-5)”},“backgroundImageType”:“static”,“backgroundType”:{“lg”:“image”},“fontSize”:{“rslgE1MDg”:“1.2rem”,“rslgM3MjM”:“1rem”},“fontTextColor”:{“rslgE1MDgplaceholder”:”",“rslgM3MjM”:“var(–cc-color-5)”,“rslgE1MDg”:“var(–cc-color-5)”},“fontGlobalStyle”:1,“fontLocation”:“google”,“paddingTop”:{“rslgE1MDg”:“0.75rem”,“rslgU5NDYplaceholder”:“1rem”},“paddingLeft”:{“rslgE1MDg”:“1rem”,“rslgU5NDYplaceholder”:“1rem”},“paddingRight”:{“rslgE1MDg”:“1rem”,“rslgU5NDYplaceholder”:“1rem”,“rslgA5MjA”:“1rem”},“paddingBottom”:{“rslgE1MDg”:“0.75rem”,“rslgU5NDYplaceholder”:“1rem”},“marginRight”:{“rslgE1MDg”:“1rem”},“marginBottom”:{“rslgE1MDg”:“1rem”,“rslggzMDk”:“1rem”},“containerLayoutFlexRowGap”:{},“containerLayoutFlexColumnGap”:{},“containerLayoutPosition”:{“rslgE1MDg”:“relative”},“fontTextLinkColor”:{}}}}}

https://jetformbuilder.com is Gutenberg based form builder. It’s ACF compatible too.

image

image

THANKS A LOT @nadim @avunu

this is really painful.

if i create front end user center page without gramming,
jetformbuild need work with jet engine,
frontend admin plugin need work with elementor,

but i am using cwicly which is clean fast and perfect,
need i use them to mess cwicly?

:rofl:

Tried JetFormBuilder recently and didn’t like it. It outputs way too much HTML even with the simplest form. It also ignores best practices and accessibility when rendering a form. One example would be not using input labels properly.

I don’t recommend this plugin.

Yes, it’s true, but at the moment I haven’t found anything better for gutenberg. It does its job well even if the code isn’t very clean.

Just to add to this, Fluent Forms recently added the ability to set the form to inherit styles from the theme, so this eliminates Step 2.

Also, you can style most inputs inside Cwicly directly and/or style any additional items via CSS targeting the Fluent Forms class.