Customizing Forms Issue

[yasmagic]

Can we use this as a form builder? I am facing a bit of a challenge. There is no option to add a label text to the form elements. It would be nice if there were an easy option to specify whether the label can appear above the field, to the left of the field, or within the field as a placeholder. I added a text field below the email field, as shown below, and got stuck there. Additionally, is there an option to hide the "Submit" button hyperlink field? We want to handle all form submissions on the server side and do not want users to change the submit button link. Thanks in advance.

Also, a dedicated option for "Forms" would be nice to see all elements to drag and drop like this https://bootstrapformbuilder.com/:

[givanz]

You can edit the input component and include a label

https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-html.js#L356

Vvveb.Components.extend("_base", "html/textinput", {
....
    image: "icons/text_input.svg",
    html: '<div><label>Text</label><input type="text" class="form-control"></div>',
    properties: [{
...

You can use form action attribute to set the url https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action instead of submit formaction

If you want to remove url field from buttons replace https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-bootstrap5.js#L66

Vvveb.Components.extend("html/link", "html/btn", {

with

Vvveb.Components.extend("_base", "html/btn", {

Form builder helper features to make form building process easier is planned and it will be added in a future release.

[yasmagic]

Thank you for your guidance on this. I would like to remove url field only for form button, and not for others. how do I do that pls?

[givanz]

You can create a new submit button component by duplicating the existing button component, remove the link options and use attributes: {"type":"submit"} to match only submit buttons.

Vvveb.Components.extend("_base", "html/submitbtn", {
    attributes: {"type":"submit"},//only submit button
    name: "Submit button",
    image: "icons/button.svg",
    html: '<button type="submit">Submit</button>',
    properties: [{
        name: "Background",
        key: "background",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-default", "btn-primary", "btn-info", "btn-success", "btn-warning", "btn-info", "btn-light", "btn-dark", "btn-outline-primary", "btn-outline-info", "btn-outline-success", "btn-outline-warning", "btn-outline-info", "btn-outline-light", "btn-outline-dark", "btn-link"],
        data: {
            options: [{
                value: "btn-default",
                text: "Default"
            },{
                value: "btn-primary",
                text: "Primary"
            },{
                value: "btn btn-info",
                text: "Info"
            },{
                value: "btn-success",
                text: "Success"
            },{
                value: "btn-warning",
                text: "Warning"
            },{
                value: "btn-info",
                text: "Info"
            },{
                value: "btn-light",
                text: "Light"
            },{
                value: "btn-dark",
                text: "Dark"
            },{
                value: "btn-outline-primary",
                text: "Primary outline"
            },{
                value: "btn btn-outline-info",
                text: "Info outline"
            },{
                value: "btn-outline-success",
                text: "Success outline"
            },{
                value: "btn-outline-warning",
                text: "Warning outline"
            },{
                value: "btn-outline-info",
                text: "Info outline"
            },{
                value: "btn-outline-light",
                text: "Light outline"
            },{
                value: "btn-outline-dark",
                text: "Dark outline"
            },{
                value: "btn-link",
                text: "Link"
            }]
        }
    },{
        name: "Size",
        key: "size",
        htmlAttr: "class",
        inputtype: SelectInput,
        validValues: ["btn-lg", "btn-sm"],
        data: {
            options: [{
                value: "",
                text: "Default"
            },{
                value: "btn-lg",
                text: "Large"
            },{
                value: "btn-sm",
                text: "Small"
            }]
        }
   	},{
        name: "Autofocus",
        key: "autofocus",
        htmlAttr: "autofocus",
        inputtype: CheckboxInput,
		inline:true,
        col:6,
   	},{
        name: "Disabled",
        key: "disabled",
        htmlAttr: "class",
		inline:true,
        col:6,
        inputtype: ToggleInput,
        validValues: ["disabled"],
        data: {
            on: "disabled",
            off: null
        }
    }]
});