QuickForm 2 is a simple and functional solution that allows you to create dynamic forms on Joomla!. With its help, you can quickly create complex forms that are not accessible by functionality to any other builder. In particular, this is manifested in the ability to make dependent lists and dependent groups of fields without limiting the level of nesting and the number of repetitions, as well as build dynamic (changing during the selection of fields) calculators.

This page is no longer supported, the information on it is outdated. The official QuickForm page (QuickForm 4) is here: QuickForm is a constructor for developing forms.
This is an interesting and universal extension, the possibilities of which are so great that the web developer often does not find them, because they can not imagine something like that. Nevertheless, this web designer has turned out to be a simple and convenient tool that solves not only complex, but also the simplest tasks. It is suitable for any form, starting from a simple call order form, and ending with a complex order form for goods or services.
Maurits Cornelis Escher. Cubic space division

Before you download and install QuickForm 2 , I want to draw your attention to the fact that this is not an option when you get a ready and beautiful result in two clicks, not having minimal knowledge in the development and administration of sites. This extension was created for webmasters familiar with CSS and HTML. It may be needed so that you can quickly create difficult (in terms of coding) forms that could take many hours, and even months from an experienced programmer.

Can you create any form you like with QuickForm 2? Most likely the answer will be negative. First of all it concerns calculators, because the approach to calculator building in the component is determined by the dynamic nature of the fields. On the one hand, it allows you to make calculators that can no longer be done in any other program. On the other hand, this imposes some limitations and complicates the work, with seemingly simple situations. But in the end, whether you make a complex calculator or not, will depend on school grades in mathematics and your ability to find non-standard solutions.

Are there any restrictions in the design of the form? There are no such limitations, but as it was already written, you need CSS knowledge to create a beautiful form. Although the component has several built-in files with styles, they are more examples than workers. But in many simple cases this will be enough. I recommend creating your own file myname.css in the component's styles folder. Later you will be able to use it repeatedly in your projects, and most importantly, it will not be overwritten when the component is updated.

What are the unique features of QuickForm 2?

The component allows you to create a complex branched structure, at any level of nesting elements, including calculators, various forms of ordering goods, surveys, test forms, instructions, support algorithms (a-la Google), contact forms, modules of various dynamic content. To list all its advantages is too long and tedious, so we will concentrate on the moments that are unique and which can not be realized in other similar extensions.

1. Simplicity of management, low loading on the server, compactness. The simpler the form, the less settings and auxiliary information is stored in the database. There is no usual situation where a component has a fixed large number of settings fields, often not needed for a simple form variant. Therefore, there is no need to run code functions that are not used in a particular form case.

2. The possibility of implementing a dynamic branched form. It is better to see by example. Suppose we have a form for a preliminary interview for consultation in a medical institution, followed by a recording at the reception. Depending on the user's answers, a corresponding chain of questions develops. For example, I'll bring a part of this form with drop-down content.

3. The ability to dynamically display the required fields. In the example below, when "another city" option, there is a required field that is not used in other cases.

4. Unlimited number of forms per page. Although many form builders are able to make multiple output to a page, as a rule, there are significant limitations in functionality. For example, the fact that a CAPTCHA can be in a single copy per page, or different settings for forms can conflict with each other. In QuickForm 2, such problems do not arise. In this case, all forms can be in different design and for them different settings are given. For example, on the current page, this form, is displayed in the modal window. And below, an example in which there is a captcha, activated dynamically, that is, only if necessary.

5. Adaptation to narrow blocks. Unlike the usual adaptation for narrow screens, this is that if the size of the container with the form is less than 500px, the class "compact" is added to the form. Accordingly, this gives additional opportunities for more correct integration into the template design.

6. Recalculate the result of the calculator on the server. Usually, all scripts that make forms with a calculator send the result of the calculation in a special hidden field, then this result is inserted into the letter and the statistics of the items. But there is nothing easier than to do a substitution of such values, so in more advanced scripts, such as online stores, this result is tested on the server. This is especially acute in the automatic trading of virtual goods. But there is not a single script or program (in the variation of constructor), which can recalculate the dynamic calculator. This component performs this check.

7. Work in the shop mode. QuickForm 2 is a form generator, it does not have its own product catalog and there are not many store-specific functions. However, the basket function is included in the program code of the component. It will be convenient if you have a small amount of goods, and you do not need a catalog for them. A unique feature here is the ability to work with a dynamic product, which no other script and no store can do. An example of how a component works in store mode can be viewed on this page .

8. Built-in anti-spam protection. QuickForm 2 has built-in protection in JavaScript, which will be the barrier for most spam bots. This makes it possible to do without a captcha, which, incidentally, is also there. In addition, forms that do not have "submit" buttons, for example, pure calculators, can not be sent to your mail at all by any means.

9. An example of a wholesale order of goods that starts with one field.

How do I get the form QuickForm 2 on a site page?

The output is implemented in different ways:

1. Output by the content-plugin quickform. Allows you to insert a form into the material text of another component, for example, com_content. Can be output through any component that supports content plugins. To do this, you need to insert the instruction in the text field like: {QuickForm id=3}, where the number is the id of the form project.

2. Output by mod_quickform. This will allow you to display the form on several pages. Publish the module in the desired position of the template, specify in its parameters the project id of the form that you want to display.

3. Output by the program code. This is very easy to do:
$qf = new QuickForm();
echo $qf->getQuickForm($id); // project form id


You can download the current version of this extension at plasma-web.ru/en/dev/quickform3

How to use?

1. The first thing you need to do after installing the component is to create a project of the future form. It is in the project that there are settings for outputting the form to the page - it will be displayed in a modal window or in a normal display, it will be sent by ajax or reloading the page, which message will be shown to the user after sending, and so on. To display the form, you need the id of the project.

The edge of the project, your form consists of one or more groups of fields. In the case of a simple form, the project will have one group of fields, and for the dynamic form, several groups of fields are created, which are included in the main group (by default), corresponding to the logic of your project.

As an example, consider the simplest contact form that dynamically changes when choosing a subject of civil law. For a legal entity, we need fields such as the company name and legal address. For a private person you need only Email and phone.

To get this form, you need to create a project and three groups of fields. Let's try to see it in detail.

1. We go into the administration panel of QuickForm, click the "create" button. Fill in two fields - "Title" and "Message after sending the form." We press "to save".

2. Click on the "Fields" link. Click the "create" button. Fill in the "Header" field and create five fields using the menu: "Name", select (without title) with options of choice, "Your message", checkbox with privacy policy, submit button. We save.

3. We create the second group of fields for the option of an individual. We fill the title, I recommend giving the groups recognizable names and denoting the hierarchy (level of nesting) with pluses or text. We add two fields: "Contact phone" and "Email". We save.

4. Similarly, we make a group for a legal entity. We save. In the list of groups on the project page, we look and remember the id of the last two groups.

5. Open the first group, open select and in the settings of its options (related-fields) we insert the previously remembered id. Display the form on the page.

6. Using CSS we will make the appearance necessary for your site. To do this, create a new .css file in the /components/com_quickform/assets/css/ directory with a unique name, copy the styles from default.css to it. In the project settings, select the new file as working. Editing the styles on your own.

Project Settings

1. Title. Required field, specifies the title of the project.

2. CSS file for the form. The field contains a list of all css files from the folder /components/com_quickform/assets/css/. You do not need to use and modify the files included in the distribution, they will be overwritten when the component is updated and your styles are gone.

3. Message after sending.Required field, includes the message that the user will see after the form is successfully submitted. If you do not see any messages, make sure that your template contains message output: <jdoc:include type="message" />.

4. E-mail. If you do not know what DMARC is, then leave the field blank.

5. Letter subject. You can specify the subject, but keep in mind that if the letter is sent to a free mail server, such as mail.ru or gmail.com, then they can block the email if they do not like something.

6. Template of the letter. QuickForm includes three templates. default - table output. simple - simplified output. json - for programmers.

7. Display the title of the project. If you select - "yes", then the title of the project will be included in a letter and some other interfaces.

8. Record a story. Determines whether the history will be recorded in the database and, accordingly, displayed in the interface of the component.

9. The form in the modal window. If "yes" is selected, then the form will be displayed in a pop-up window. A typical situation for call order forms or the like.

10. Sending by ajax. Determines whether the form will be sent without reloading the page or with a reboot.

11. keepalive. If activated, the algorithm works, which in the background, periodically (depending on the lifetime of the site session), sends a simple Ajax request to the server. Thus, the session lifetime on this page is extended indefinitely. If the page is already running the standard keepalive from Joomla, the function does not start. Unlike the standard, this function does not load the mootools library.

12. Load the language file. For multilingual sites. Use constructs like tpl_beez3 or com_mycomponent. QuickForm will load the language file of the specified extension and use language constants starting with the prefix QF_. Accordingly, in the constructor itself you can use these constants wherever translation into another language may be required.

13. Image in the basket. The setting used by the store mode. A link of the type /images/joomla_black.png. Show the picture in the shopping cart for product visualization.

Description of fields.

In this paragraph I will not describe in detail all the typical fields of html, this information is plentiful in the network. I will dwell only on the unique fields of the component and some of its inherent features. Before describing the fields themselves, I want to clarify a few points about their settings. All the attributes available to fields in the standard html can be written in the "custom" setting. But some settings are rendered separately and this means that they have additional functionality.

For example, "required", rendered from "custom" means not only that this field is mandatory, but also that the server should check it even after sending, and then inform the user about the error if it is not filled. And the attribute "placeholder" is not only the filling of an empty field, but also the heading of the field in the letter, if the field does not have the header itself. The attribute "value" of the buttons is rendered separately, so that it could be used by the value of the language constant on multilingual sites. The attribute "class" is rendered with the purpose to assign a "class" not only to the field itself, but also to the container in which this field is located. If you write a "class" through "custom", then it will only be in the field itself. Etc.

1. input[type="button"]. I do not know why this field can be used in a component. I, for example, use it in the examples on this page instead of "submit", so you do not send them to my mail. Perhaps, experienced users will be able to use it for JavaScript or other purposes.

2. input[type="checkbox"]. From the unique features, it can be noted that the header field on the page is displayed twice - before the button and after. An unnecessary title is hidden using css. In the settings, you can remove the field from the message, but if it is used in the calculator, this will not affect the calculation.

3. input[type="file"]. The only difference from the standard is that class = "filled" is dynamically added to the container with the field if the file is selected. This allows you to stylize the button hidden in the css.

4. input[type="hidden"]. The field can be used in the calculator to output suitable mathematics. There are many other uses, but you need to find them yourself.

5. submit. This is the button for sending the form to the mail. If this field is not included in your form, then it can not be sent. You can display this field dynamically - in this case you completely protect yourself from spam without any captcha, only a person can send such a form. In the settings there is an option "redirect" - redirection to any specified page.

6. customHtml. Allows you to insert any desired html code into the form. It helps when you need to apply a style to several fields in one group. In this case, these fields are wrapped by a container with a certain class, and the styles to them are applied by inheriting in css. In addition, customHtml can be used to display pictures, scripts and other things, including dynamically. This example shows the form of door selection, using customHtml.


Of course this is a schematic example. It shows how using only CSS and QuickForm can make interactive product maps. To do this, use the functional of the dependent fields in which the customHtml is located, which contains a specific style. For example, when you click the "Wallpaper Color" button, a container will be loaded that contains the following code: <style>.f_6_img_box {background-color: #b5e9bd;}</style>

7. customPhp. This is the most universal field, which includes two arbitrary user-defined functions. One for output in the form, another for output in the letter. In fact, it's the same customHtml, but with parsing php code. Describe any details does not make sense, since this field is for experienced users who are able to deal with it independently.

8. calculatorSum. Output the result of the calculator. If your calculator outputs several results, then calculatorSum should be output several times. The settings for this field will not raise questions.

9. recaptcha. QuickForm 2 uses captcha provided by the google search engine system, and receives data from an appropriate plugin system Joomla. For configuration, open the plug-in manager and the CAPTCHA-reCAPTCHA system plug-in in the administrative panel. In the description, find the link, and clicking on it will get the keys. Make a choice of version 2.0, enter the keys and save the plugin settings. The plugin itself can not be published, if you do not need it anywhere else.

10. cloner. It is intended for displaying cloned field groups. Functionally, this is a container in which a group of fields is enclosed. When you click on the "plus" button, the copy of the group is loaded. In the settings you can choose a vertical or horizontal cloner, their functionality is different. This is determined by the fact that the layout of the horizontal variant is tabular, accordingly, does not imply the output of dependent fields within the clone. The vertical variant, on the other hand, can contain both dependent fields and other nested cloners. Below is an example of a horizontal case:


11. calcCondition. This field, like the previous one, is a container that includes a group of component fields. Its behavior is similar to the usual include function. But besides this, in the case of using a calculator, the field has additional functionality. It can add math, depending on some condition. Specifically, it works like this: the component calculates the math in the group of fields enclosed in calcCondition. The result "s" is compared by the condition you specify in the settings, and if satisfied, the mathematical expressions specified in start and end will be included in the final mathematical line.

12. backemail. Displays the checkbox, selecting which the user can receive a copy of the message to his mailing address.

13. addToCart. A field that is used in the store mode instead of the submit button. More information about the store mode can be found on the page QuickForm 2 in store mode.

14. qfTabs.Displays the "tab" interface. You can specify a vertical or horizontal position. An example of vertical tabs is below.

List of services
Service 1
Service 2
Service 3
Service 4
Service 5
Service 6

Problems and frequently asked questions.

1. The form is not displayed on the site page. Make sure you specify the correct form project id. Make sure that the plug-in or QuickForm module is published, and form fields are created in the component itself.

2. The form appears for a moment and disappears. This error is usually associated with problems in the author's link. If you do not have an activation code, the author's link should be on the page of your site and should be open for indexing by the search engines. If you use plugins that close external links from indexing, then add QuickForm to the exclusions or get the activation code.

3. The calculator does not count. Check the browser console for any JavaScript errors. Serious errors in scripts can completely or partially block the work of both the component and the entire site. There are other possible reasons, for example, there were reports that the forms displayed by SP Page Builder do not work correctly.

4. The calculator does not count correctly. This calculator will calculate the way you write it. There is a simple way to see the resulting mathematical string, for this, two consecutive points must be substituted into any calculable text field. This will cause an error and the string will be displayed on the page.

5. Letters come to the spam folder. This indicates that the IP address from which your hosting sends letters is in the black list of the mail server that receives the message. There are other reasons, but they also have nothing to do with QuickForm.

6. Letters do not come at all. The component uses the built-in Jumla mail forwarding function. Thus, first of all you need to make sure that your site is able to send letters at all. If sending a test letter from the control panel settings is successful, and the mail is not sent through the component, then make sure that you left the E-mail field in the form project settings not filled.

7. The form does not look beautiful. The QuickForm component was not created as a design solution, it's a functional solution. Accordingly, the style design of forms at this stage is not given much time. This is not a problem for advanced users, but it causes difficulties for beginners. In this case, you can ask for third-party help, usually, the design for your site will take less than one hour.

8. CAPTCHA does not work. Check the "CAPTCHA - RECAPTCHA" plugin settings. In the settings should be entered keys that correspond to the domain of your site. If your site has moved to a different domain, respectively, you need to get new keys.

9. The author's link is displayed in large font. As a rule, this means that the css file responsible for the styling is not selected in the project settings.

Donate and remove the author's link.

QuickForm 2 is a free product with a fully open source. As the author of this extension, I will be grateful to all users who rendered any help for this project.

Make money transfer:
And also get the activation code:

Add a comment.

Add comment


# Niels Ørnbøl 2018-10-14 23:01
If I hit return When stranding in a input fjeld. The homepage crash. The same hoppens in Your demo No.3 (Name)
# funcvar 2018-10-15 17:09
This extension sends the form only when it has a submit button. This is useful because it can be a simple calculator without the ability to send. If you try to submit such a form in any way, then you will receive an error and a message that the form cannot be submitted.

On this page, the forms do not have a submit button. I don’t want to receive testing messages at all.
# Niels Ørnbøl 2018-10-17 10:48
Nor do I want to send a form. I have only made a calculator.
But if I in my form only have one input[type = "text"] and some input [type = "checkbox"] and at least 1 calculatorSum then it tries to send the form and fails with a crash.
But if there is more than one input[type = "text"] then everything is running like a dream.
# funcvar 2018-10-17 16:29
I understood. Will be fixed in the next release.