QuickFormQuickForm is an extension that you can install on your site and easily create complex dynamic forms. It has a simple interface, built-in spam protection and high code rendering speed.

QuickForm makes contact forms, inquiry forms, calculators, qualifiers, branched tests and surveys, online stores with a complex product structure, window order forms, printed products, interactive forms with dynamic fields and pictures, simple feedback forms, diagnostic forms with branched tree structure, support interfaces of any level of nesting, forms for making an appointment, forms "with intelligence", both the most complex and the simplest.

QuickForm can create any number of forms with different designs, including on the same page. Forms can be simple and complex, in a modal window and explicit, sent by Ajax or with a reload, include dependent fields of any nesting level, be with a calculator or even with a "add to cart" button.

There are no restrictions here. Any form that might exist is made with QuickForm. The simplest forms that can be downloaded below and installed in one click are given as examples. Developing complex ones will require some knowledge and skills. And the more of them, the more functional and interesting forms you can create.

Download QuickForm.

Compatibility Joomla! 3+, Joomla! 4+


Cube calculation
0
100
0
100
0
100
0m3
send it to email

Make a request

Order form in "Plastic" style.

Ready-made project that can be downloaded and imported into QuickForm.
It'sin modal view:

Send message
Download import file: plastic.qf3.zip(2 KB)

Order form in the style of "Domino".

It's in modal view:

Send message
Download import file: domino.qf3.zip(2 KB)
max: 256M

Request a call

Call order form.

A simple project in the style of "Jeans".
It's in modal view:

Request a call
Download import file: callorder.qf3.zip(2 KB)

Simple contact form for website.

A simple project in a neutral style. It's in modal form:

Contact us
Download import file: cont1.qf3.zip(2 KB)
Contact us

Feedback form
Fill in the required fields and click the submit button. We will contact you shortly.

Contact form in Black & Gray style.

Simple project. Adaptation to mobile phones, modal view, ajax form submission. It's in modal form:

Feedback form
Download import file: blackgray.qf3.zip(2 KB)

Other examples:

Doctor appointment form
Simple loan calculator


QuickForm makes it easy to create interactive forms of any structure, nesting and display. Form layout has no design restrictions. In store mode, the extension allows you to create and add products of great complexity to the basket. This makes it uncontested in such areas as the sale of printing products, the selection of auto parts, computer components, any goods that have a complex tree structure or complex mathematics.

0$

QuickForm and CSS.

QuickForm creates forms that can be of any design, but forms included on the same page must not conflict with styles. I assume that you are familiar with the basics of HTML and CSS, I will not describe them. But I will note the features inherent in QuickForm.

By default, the component includes one CSS file with styles: default.css. It is a neutral style with responsiveness and support for all component widgets. Since widgets are added frequently, I need to include this file in updates. Therefore, it makes no sense for you to make any changes there - they will be overwritten during the update. To prevent this from happening, you need to create your own stylesheet in the form's project settings.

Open the project settings and create a new style file with a name, for example, new_example.css. If you are working with the component for the first time, be sure to check the "copy styles" button. Then a file with already registered class prefixes will be automatically created.

If we bring the project to the site page and open the "developer tools" panel in the browser, we will see that the top container with the form is assigned the class "new_example", that is, equal to the name of the created file. Thanks to this class, forms with different designs do not interfere with each other on the page. All that is required is to inherit each css statement with the ".qf3form.new_example" class. If you attach a file with a different name to the form, there will be a different class. Example:


.qf3form.new_example {
    font-size: 14px;
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 0;
    background: linear-gradient(0, #1a5889, #56d7d3);
}

.qf3form.new_example .qf3 {
    width: 74%;
    margin: 0 auto;
}

Another feature of QuickForm is the "compact" class. It appears when the container the form is placed in is less than 500px wide. This is convenient for adaptive layout, because here the dependence is not built on the width of the browser window, but on the width of the parent container. It also adds the class "touch" or "desk" to the form, depending on whether the device is a touchpad.

QuickForm and conditional fields.

QuickForm has the ability to create dependent fields and dependent field groups. It can also be some text, images, styles or html code. Dependent fields in QuickForm can have an unlimited nesting level, are compatible with the calculator and other widgets.

It is possible to create a tree-like structure of a form of any complexity. The creation process is so simple that no description is needed. Just attach any field group to a field from another field group.

Below you can see an example in which when you change the "Country" field, the "State" and "City" fields change.

Basic Details

QuickForm and calculator.

QuickForm creates calculators from simple trading calculations to complex scientific calculators. Any form of a component can be turned into a calculator. There are four types of calculators built into QuickForm, which may be more convenient in one case or another. The description of these types is located in the project settings of the form in the "calculator" tab. I will try to reveal some details.

The calculator type is "default". This is a unique option that does not require any formula. Go to the settings of any field and look at the calculator tab. Enter the "math" parameter, for example, +5. Add another field with the same "math". Add a special field "calculatorSum" to output the result. You will see that the calculator is working and shows the result: 10. Using various modifiers, brackets and dependent fields, you can solve most mathematical problems.

In this case, each dependent field can act as an if else condition, branching the logic and launching its own calculation branch. See the example of an insurance calculator made using this option.

Unfortunately, not every option can be calculated using this type. Of the limitations is the fact that thus displays only one result. In addition, it happens in mathematical logic, requiring reuse of some variable in the calculation. For example, we have the following formula: result = (a + b) * c + a * c + b. It will be difficult to make such a calculator the "default" way. Therefore, the component includes several more.

The calculator type is "multiple". This option is devoid of the disadvantages of the previous one, in addition, it can be used to output several calculation results. In general, it has no restrictions at all. To launch it, you need to enter a formula, the structure of which is described in detail in its settings. Let's analyze a small example.

The rental price for
0
days will be
0$

The formula for this calculator is:
48.1={49.1}{50.1};
48.2={49.1}{49.2}{50.1}{50.3}

48.1, 48.2 – these are field calculatorSum id, which we have two. One displays the number of days, another rental price. The right side is the calculation formula itself.

For the first calculatorSum, it consists of two id, enclosed in braces. This is the id field of the calendar: 49.1 - for the apartment, 50.1 - for the yacht. Since we always have only one calendar (double) in the form, only one id of the two is taken into account. In other words, for an apartment the first formula will be considered as 48.1 = {49.1}, and for a yacht as 48.1 = {50.1}. That is, it will display the number of days that make up the difference of the dual calendar.

The second formula is similar. It only adds a hidden field that multiplies the number of days by rent. This field lies in the dependent group and is different when the select is different. For an apartment, the math parameter of this field is * 600, and for a yacht * 5000.

The calculator type is "simple". The usual logic used in extensions. This is the simplest, but also the most limited type of calculator. Here we have a familiar way of writing mathematical logic using variables. It is described in detail in the component itself, and I will not dwell on it. Unfortunately, the logic of the dynamic form and dependent fields does not fit well with it. But you can make a simple calculator without any tricks.

The calculator type is "custom". This one is written in php "as you like" and "as you need". Its only drawback is the requirement of knowledge of the language.

The QuickForm structure is flexible. It is possible to make calculators on it without using the built-in function at all, and even mathematics as such: example. In addition, you can easily add a new type of calculator for a specific project at the program level. I will always be happy to help if you have any questions, or just don't have time for it.

Learn more about the calculator: QuickForm in calculator mode.

How to show the form on the site page.

The output to the page is carried out in different ways:

1. Output by the content plugin plg_content_qf3. Allows you to add a form to the text of the material of another component, for example com_content. It can be output via any component that supports content plugins. To do this, insert the following instruction in the desired place of the text: {QF3=1}, where 1 is the id of the form project.

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

3. Output by the code. It is very simple to do:

require_once("components/com_qf3/qf3.php");
echo QuickForm\qf::form(id); //form project id

Project Settings.

The form.

1. CSS file for the form. You can select a file or create a new one. The default.css file is not meant to be used as a final file. You cannot make changes to this file. This is a set of base styles for all component widgets. It is needed in order to make a copy of it.

2. Form in a modal window. If you select this item, the form will open in a pop-up window with a darkened surrounding background. A simple link is displayed and can be rendered as a button using CSS if needed.

3. Sending Ajax. The form is sent without reloading the page. This item is only for advanced users. You must be sure that other scripts on your site do not create serious javascript errors.

4. keepalive. Keeps session of the user on page with the form.

Email.

5. E-mail. The e-mail address to which the form will be sent. You can write several separated by commas.

6. Email template. QuickForm includes four templates:
default: basic table markup with html.
simple: markup without html
simple with html: You can create your own html markup using the customHtml field.
json: line of all data (for developers).

7. Introductory and concluding text. May contain variables:
{replacerName} : is replaced with the user name,
{replacerId} : order id in the shipping history,
{replacerDate} : date sent.

Additional parameters.

8. Write history. Save the submitted form into the database or not.

9. Cart image. Learn more about the store mode on the page QuickForm in the store mode.

Description of the fields.

Before describing, I will clarify a few points. All attributes available to fields in standard html can be written in the "custom" setting. Placeholder duplicates the field header in the email when this header is empty, so it can be used for those fields that do not have it by the standard.

1. customHtml. Allows you to embed arbitrary html code into the form, can be used to display text, pictures, styles, scripts, and more.

2. customPhp. This most universal field which includes two associated user functions. One for a conclusion in the form of, another for a conclusion in Email. As a matter of fact, it is the same customHtml, but with parsing php. I shall not describe any details as it is a field for the experienced users, capable to understand with it independently.

3. qf_file.

Displays a customized file upload button. To add multiple files, use the "multiple" attribute, to sort files on the client side, use "accept". In the field settings, you can specify a "white list" of file types. And also, you can enable the upload function to the server. Uploading files to your server solves the problem of blocking emails with attachments, since you don't need to attach a file to the email.

4. calculatorSum. Displays the result of the calculator. To withdraw multiple amounts, you need to withdraw this field several times.

5. recaptcha. Serves as a decorating function because the component has its own built-in security. It is optional to use. Note that the built-in protection of a component has several levels and is more reliable.

6. cloner.

Designed to display cloning field blocks. Functionally, it is a container containing a group of fields. When you click on the 'plus' button, the copy is loaded. In the settings you can choose a vertical or horizontal cloner, their functionality is different. This is explained by the fact that the marking of the horizontal variant is tabular, respectively, does not imply the derivation of dependent fields inside the clone. The vertical option, in contrast, can contain both conditional fields and other nested cloners.

When using the calculator, cloner is able to output not only the total amount, but also the amounts in each clone separately. This can be enabled in the field settings.

7. qfincluder. Another container that includes a group of component fields. For example, you can create a separate project that will consist of several frequently used field groups, then include these groups in another form.

8. backemail. Displays a checkbox, by selecting which the user can receive an email copy to himself. Read the description carefully.

9. addToCart. The field that is used in the store mode instead of the submit button. When you click the button, the form will not be sent to the mail, but will be added to the plugin's cart. Learn more about the store mode on the page: QuickForm in the store mode.

10. qfTabs.

Displays the "tabs" interface. You can specify a vertical or horizontal position. You can output not only fields, but any content or html code. The picture shows an example of horizontal tabs. More information about tabs is available here.

11. qfcalendar. Displays a stylized calendar. You can display a single and dual calendar. The example below.

12. stepper. Displays the step-by-step form interface. Example below

Example:
Name:
Next

The stepper widget has two parts.
1. stepperbox is a container that bounds the area of the form in which it will be executed. That is, the scope of the widget. Can be all or part of a form.
2. stepperbtns - forward-backward buttons. (Must be inside the container).

Another example of a step-by-step interface is made in a modal window example.

Problems and Frequently Asked Questions

1. The form appears for a moment and disappears. This error is related to author link issues. If you do not have an activation code, the author's link must be present on the page. Otherwise, the form will not be displayed. If you use plugins that close external links from indexing, then add QuickForm to the exceptions or get an activation code.

2. Calculator does not consider. Check the browser console for JavaScript errors. Serious errors in external scripts can completely or partially block the operation of a component or the entire site.

3. Calculator does not count correctly.The calculator counts according to the rules of mathematics. If the result is not what you expected, look for a math error.

4. Emails come to the spam folder. This means that the IP address from which your hosting sends emails is in the black list of the mail server that the email receives. There are other reasons, they are determined by the operating conditions of the mail server to which the mail arrives.

5. Emails do not come at all. The component uses the built-in Joomla function to send mail. Thus, the first thing you need to make sure that your website is able to send e-mails. Do send a test mail from the global settings of Joomla administration panel.

6. Form does not look nice. QuickForm was not created as a style solution, it is a functional solution.

7. Captcha does not work. In the component settings, you must enter the keys corresponding to the domain of your site. If your site has moved to another domain, respectively, you need to get new keys.

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

Thanks for QuickForm.

QuickForm, as a free extension, places an author's link on the site page. But there is a way to remove this link legally. To do this, you need to help develop the project. An activation code that removes the link will be sent automatically to the address you specify below.

Make a donat:

And get an activation code:
YooMoney/by card (ru)
rub.
WebMoney/Bitcoin
usd

Add comment

Comments  

# pv-dude 2022-10-12 13:44
Thank you for a great form builder that I used to design a solar yield calculator. My question is: Is there a way to export a project/form and import it into another Joomla installation? How?
Reply
# funcvar 2022-10-12 15:44
It's on the main page of the component. At the top there are two buttons: import and export.
Reply
# pv-dude 2022-10-12 16:07
Thank you for your quick reply, but I can see only 4 buttons: Add new, Publish, Deactivate, Delete plus a Help button on the right. Is this not the main page?
Reply
# funcvar 2022-10-12 16:11
Are you using the latest version of QuickForm?
Reply
# pv-dude 2022-10-12 18:46
unfortunately, after updating I could have exported my calculator, but it is not working anymore
Reply
# funcvar 2022-10-12 20:19
It doesn't work because the field and project IDs have changed since the import. This has been resolved in the latest version.
Reply
# pv-dude 2022-10-12 16:25
I just noticed I had to update the component, and now the buttons are there.
Reply
# alex 2022-10-10 13:43
Attachments won't be saved in ../components/assets/attachment/COM_QF_TEMP_FOLDER_NAME

What's to do?
Reply
# funcvar 2022-10-11 14:24
You need to allow file uploads in the component's general settings. After that, you will be able to use this function in the settings of the input[file] field.
Reply
# manfred 2022-09-07 12:10
is it possible to use the users email address to use for the reply field (send from),
so when answering to the message I/we don't have to copy the email-address first.
Reply
# funcvar 2022-09-07 14:00
Of course. QuickForm does this itself. Use: add fields -> one-off -> useremail instead of input[email]
Reply
# Richard 2022-08-31 12:32
after the current update to Joomla 4.2.1, the fields can no longer be edited.
Best regards
Reply
# funcvar 2022-08-31 16:08
This needs to be looked at individually, because there are no more messages like this. Write to me in support.
Reply
# Nony 2022-08-25 21:56
Is it possibly to change the email subject field from a submitted. As an example, in the form you will have an "Event Name" field and whatever the user enters will be the subject of the email.
Reply
# funcvar 2022-08-25 22:13
No, you can set the email subject as a string and you can use variables. These are: {replacerName}, {replacerId}, {replacerDate}. As you need, you can do code revision, but it's not here in the comments.
Reply
# Barbara 2022-08-22 21:50
1. I have setup two email addresses but I do not receive any form information.

3. How can I extract the results?
Reply
# funcvar 2022-08-23 01:15
First, check if your site can actually send emails. You did not specify which CMS you are using. If it's Joomla, send a test email from the control panel.
If you need more detailed information, it would be better to open a topic on the Joomla forum. There can be many reasons.
Reply
# Barbara 2022-08-23 21:26
Yes it can actually send emails - some of the results from the submissions have been already sent to email no 1 but not to email no 2.
I have setup it as
email no 1; email no 2;
Secondly some of the submissions have not been sent to email no 1
Joomla CMS
Reply
# funcvar 2022-08-24 00:27
Why do you write email semicolon if it says you need comma splice? Please open a forum topic, I don't want to bloat the comments on this page.
Reply
# maha 2022-06-09 14:04
what means Form error_qfuseremail ... ??
Can't figure out, what's wrong ... Appreciate your help ...
Reply
# funcvar 2022-06-09 16:48
Possibly misuse of the "backemail" field. Requires the user's email to which a copy of the message will be sent.
Reply
# Mark 2022-04-13 21:16
Where is uploaded file location
Reply
# funcvar 2022-04-20 07:47
Open the Attached files section in the menu and hover over any file. You will see the address.
Reply
# Mark 2022-04-03 17:43
Is that possible to disable send email and just store it data to database/table...?
Reply
# funcvar 2022-04-20 07:27
This cannot be done using settings. But it can be done with a simple change in the code. These questions are best asked on the forum.
Reply
# Nick 2021-12-05 01:00
I would like the option to receive the users IP address in the contact e-mail set to the webmaster. Can this be done using the customPHP field?
Reply
# funcvar 2021-12-05 02:23
It's possible. customPHP field allows you to add any functionality to the form. But if you are going to output this html in an email, you will need to consider the markup of the email template.
Reply
# Nick 2021-11-26 16:14
Great extensions. Would like to use PayPal, is that possible?
Reply
# funcvar 2021-11-26 19:14
Unfortunately, this is not possible in my country. But I gave here payment systems that work everywhere, you can use them. You can also write to me, we will think of something.
Reply
# zamazeev 2021-11-18 15:43
Error during installation - Parse error: syntax error, unexpected '.', expecting ',' or ';' in /home/inome/inome-group.com.ua/www/components/com_qf3/classes.php on line 59

Joomla! 3.9.5 Stable
Reply
# funcvar 2021-11-26 19:16
This happens with old php version on your server. I'll fix it soon.
Reply
# Ali 2021-09-26 20:35
Thank you so much for perfect extension,
it's very useful !
Reply
# Stephen J. 2021-06-09 14:16
I just want to thank you for such a wonderful extension. Great job.
Reply
# xena 2020-11-27 17:19
Hello there
I used your form on my website but im having a problem with emails.
It doesnt sen anything... whe i try to send the form i get an error "FORM error_qfuseremail"
I did try to send a test email from my page and its working, but the form doesnt...
Any ideas!? please!?

TIA
Reply
# funcvar 2020-11-27 17:34
You need to contact support to find out the cause of the problem. This is not a topic for comment.
Reply
# Mr Dicken 2019-09-18 13:58
Could I please have an activation code?
Reply
# Fernando Rodriguez 2020-04-29 16:19
Could I get an activation code?
Reply
# funcvar 2020-04-29 17:04
Having trouble paying with Payeer? If so, please let me know.
Write me through feedback, we will solve the problem in manual mode. I will give you my bank card.
Reply
# Stephen Moore 2019-05-31 21:27
Thanks for the excellent extension. Good work. Can I use PayPal to send money?
Reply
# funcvar 2019-05-31 23:23
Unfortunately, in my country, PayPal does not do 100% service. But you can use the system Payeer. It does not limit itself everywhere.
Reply
# Wisdom 2022-06-03 14:13
Hello how to add submit (send) button?
Reply
# funcvar 2022-06-03 17:04
add fields -> one-off -> submit.
Reply