Angular Drag And Drop Form Builder by Donamkhanh

This is a concise front-end application developed with Angular. You can create a beautiful form with drag and drop visualization. You can get inspiration from it to make a draggable form; at the same time, you can also modify it to suit your own needs.

Main advantages of drag and drop editor are:

• You can add the necessary block or element just by dragging and dropping it and see the results right away;
• You can easily edit each element (change color, style, size and so on);
• You don’t need specialized knowledge to work with the editor;

The CKEditor LTS (Long-term support) Note

As of 30 June 2023, CKEditor 4 is considered end-of-life (EOL) software. That means there are no new security patches, bug fixes, features or releases coming out for CKEditor 4. They also provide special edition called CKEditor 4 LTS (Long Term Support), is available under commercial terms. You can check more detail at https://ckeditor.com/ckeditor-...

For free & quick fix, you can apply below trick: Open srcstyles.scss, add this line at the bottom of file:

.cke_notification.cke_notification_warning { display: none; }

Features

Drag and Drop Elements If you want any element to appear in your template, simply drag it from the left side of the screen into the work area.

Create a Design Matching the Style of Your Site Change the background, text color, font size and style, as well as other parameters to suit your taste.

Social networks Continue communicating with your subscribers on social networks, by adding links to your social media pages in your form.

Multilingual This app support 3 languages: English, Vietnamese and Japanese. But you can add as many as you want by duplicating the translation file then edit it in your language.

Responsive The subscription forms you create with this app will be adapted for all screen formats. They will look good on even the smallest screens.

Dozens of elements Currently, this app support 13 elements:

1. Section
2. Button
3. Text
4. Text field
5. Textarea
6. Dropdown
7. Checkbox
8. Radio
9. Image
10. Spacer
11. Separator
12. Social networks
13. Uploader

Preview See what your customer/client will see before you generate HTML.

HTML & JSON generation You can easily generate your designed form to HTML or JSON

Requirements

NodeJS installed

NPM installed

Note: If you want to use latest NodeJS and Angular version, just delete package-lock.json then run following commands:

• npm install
• npm install @bartholomej/ngx-translate-extract --save-dev

Instructions

Please refer to the instruction file in downloaded zip file