Form builder

[k1sul1]

Apparently most clients don't know HTML, but still want to edit forms. Writing detailed instructions and examples only goes so far, and at the end of the day, clients just want drag & drop form builders.

I guess we need one?

Instead of making one blindly, I've a few questions:

1) Should it be integrated into WPLF, or work as a standalone plugin? 2) What should be used to build it? React? Vue?

[anttiviljami]

1. standalone plugin
2. who cares :)

[timiwahalahti]

1. I'd vote for standalone plugin because there is and will be use cases when visual editor is not needed.
2. Maybe wait which one WP core will use and go with it?

[k1sul1]

I wouldn't necessarily pick the same one with Core, stupid things have been done before and stupid things will probably be done in the future. I'd pick the one that the community members feel most comfortable working in, because otherwise it'll just be one maintainer doing everything because no one wants to / can't contribute.

I'm more familiar with React than Vue, but I've some experience in both so I don't really care. Vue does fix some flaws and oddities in React but React has a massive community and errors tend to be googlable.

Every tech has pros and cons.

[ideag]

I'd vote for standalone plugin. Also, I think there are quite a few form builder plugins already. The reason I love this one is that it dead simple and light. So I'm not sure there is an actual need for a builder here.

[anttiviljami]

The original idea behind WP Libre Form is that HTML5 is already a brilliant markup language for building forms. However I do understand how in some cases non-techy clients might want to make small changes to the forms, which without any understanding of HTML might be a bit intimidating with WPLF. There's definitely a need for a simplified form editor plugin for WP Libre Form for exactly these cases.

In my mind, the optimal solution would be to have some sort of form component cpt, where you can create your own preset form input components containing any HTML markup, and allow the client to then use some drag 'n' drop interface to cobble them together and change the content. I would definitely use that for my clients.

[anttiviljami]

For choosing between Vue and React, just pick the one you like more the morning you wake up and start building this. 😂

[k1sul1]

In my mind, the optimal solution would be to have some sort of form component cpt, where you can create your own preset form input components containing any HTML markup, and allow the client to then use some drag 'n' drop interface to cobble them together and change the content.

This was my idea too. I was thinking about using the content field for the component markup, and using placeholders just like in multilingual forms.

<div class="form-input">
  <input type="{{ TYPE }}" name="{{ NAME }}" value="{{ VALUE }}" placeholder="{{ PLACEHOLDER }}">
</div>

You could then supply the parameters in the form that's using the component, and fall back to custom fields for default parameters.

[anttiviljami]

:+1: :+1:

[tnottu]

Developer friendly form builder for a developer friendly form plugin sounds great to me!

My only note at this point is the use of curly brackets ({{ }}) for placeholders in the component markup. I'm hoping there will be some way to write/render the components using Timber & Twig and that the current placeholder solution wouldn't interfere with Twig's use of curly brackets.

Perhaps it would be enough that each component would have a filter which provides the field's data for a render function where I can load a Twig template and return the rendered markup, bypassing the pure PHP templates entirely.

For example:

add_filter('wplf_render_field', function($form, $field) {
    return \Timber::compile("components/form/field-{$field['type']}.twig", [
        'form' => $form,
        'field' => $field
    ]);
});

[k1sul1]

Being able to shortcircuit the rendering process is a must, and there should be plenty of filters anyway. I'd use the curcly brackets as placeholders because we're already doing that with the multilingual part so it should feel fairly natural, and by using the same placeholder we should be able to create a fallback to Polylang quite easily.

I just might start working on this during WordCamp Europe, following the tradition @anttiviljami created with WP Libre Form 😁

[k1sul1]

Something is coming along. Wrapper inside wrapper doesn't really work yet.

[anttiviljami]

:+1: fantastic work

[k1sul1]

@anttiviljami can I use the name WP Libre Formbuilder?

Asking for Ipstenu :slightly_smiling_face:

[anttiviljami]

Yes, as a maintainer and core contributor of the wp libre form project, you most certainly may use the name freely in any plugin related to libre form.