QuickFormQuickForm is an extension that can be installed on a website and easily make complex forms. It has a simple interface, built-in anti-spam protection and high code rendering speed.

QuickForm makes contact forms, applications, calculators, determinants of something, branched tests and surveys, online stores, complex order forms for plastic windows, printing products, iterative forms with dynamic fields and pictures, simple feedback forms, diagnostic forms with a branched tree structure, appointment forms, interfaces "with intelligence", both the most complex and the simplest. This extension will help you create forms for Joomla! or WordPress.

The name speaks for itself. Despite the impressive functionality, the component works faster than its analogues, second only to the simplest modules. The interface will be accessible to the average user, but it is desirable to know CSS for full-fledged work. If necessary, I can provide assistance. Styling the form for any design will take 2-3 hours.

1. Simple forms.

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.

Anything
Anything 2
Anything 3
Anything 4
Anything 5
0
100

So let's start with a simple one. As an example, let's create the simplest form.

QuickForm can be downloaded for free. Install it in the usual way. Open: "components -> QuickForm", click on the green "New" button and get into the interface for configuring our future form. I filled in only the title, I didn't do anything else. Click "Save & Close". The form project has been created.

A line containing the "fields" link to the right of the header and the "Plugin code" column appeared in the admin panel of the component. Plugin code is an instruction that you need to copy and paste into the content of the material. I will not go into detail here, since this is a standard procedure in Joomla. If you are here, you probably know how content plugins work.

Click on the "fields" link and get to a new page. This is a list of field groups. In QuickForm, a form does not consist of individual fields, but of their groups. In large and complex forms, there may be many such groups, but in our case, the entire form will consist of one group of fields. Now we have not created a groups, so we click the "New" button and create it. The interface for working with fields opens.

instruction 6

I randomly added several fields. For the Name, Email and Your message fields, you can specify a placeholder. Click the settings button and enter the placeholder in the window that opens. In the same place, mark the field as required. The window has two buttons: green – remember and red - do not remember. Click the green button.

That's all, the form is ready. Click the green "Save" button in the upper-left corner of the window. If it is not clear and there are still questions, then you can ask them on the forum where the component is supported

2. Download QuickForm.

Compatibility Joomla! 3+, Joomla! 4+
Compatibility WordPress

3. QuickForm and CSS.

I want to clarify that the examples on this page are given to explain the operation of the component, these are not ready-made styles for use on other sites. They perform the task on this page and no more is required of them.

QuickForm creates forms that can be with any design, while the forms included on the same page should 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. Let's look at another example:

By default, one CSS file with styles is included in the component: default.css. This is a neutral style with adaptability and support for all widgets of the component. 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 delayed during the update. To avoid this, you need to create your own style file in the form project settings.

Open the project settings and create a new style file with the name, for example, new_example.css. If this is your first time working with a component, be sure to check the "copy styles" button. Then a file with the already registered class prefixes will be automatically created. But now my form is very simple, I will write the styles myself. Click Save.

instruction 8

The form consists of four fields. If we display the project on the site page and open the "developer tools" panel in the browser, we will see that the upper container with the form is assigned the "new_example" class, 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 instruction by a class ".qf3form.new_example". If you connect a file with a different name to the form, there will be a different class. Below I give the CSS rules to make it more clear.


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

.qf3form.new_example form {
    padding-top: 268px;
    max-width: 340px;
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    background-image: url(/images/sputnik.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

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

.qf3form.new_example input,
.qf3form.new_example textarea {
    width: 100%;
    height: 28px;
    font-size: 1em;
    color: #bcd0e3;
    padding: 0;
    margin-top: 20px;
    background: none;
    border: 0;
    border-bottom: 1px solid #668aad;
}

.qf3form.new_example textarea {
    height: 58px;
}

.qf3form.new_example .qfsubmit {
    width: 100%;
}

.qf3form.new_example .qfsubmit input {
    font-size: 1.2em;
    height: 54px;
    margin-top: 52px;
    background: #5ec2de;
    color: #fff;
    cursor: pointer;
}

.qf3form.new_example .qfsubmit input:hover {
    background: #59c9e8;
}

.qf3form.new_example input::placeholder,
.qf3form.new_example textarea::placeholder {
    color: #88a8c7;
    opacity: 1;
}

Another feature of QuickForm is the "compact" class. It appears when the container in which the form is placed has a width less than 500px. This is convenient for adaptive layout, because here the dependence is built not on the width of the browser window, but on the width of the parent container.

You need to take into account that QuickForm is designed for developing a form, and not for displaying a form in one click. However, you can make several ready-made css files for yourself and use them in future projects. I prefer to always write new ones.

4. QuickForm and conditional fields.

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

You can create a tree-like structure of a form of any complexity. The creation process is so simple that no description is required. Just attach any group of fields to a field from another group. In general, QuickForm was created as a dynamic form builder from the very beginning.

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

Basic Details

You can bind a dependent field not only to the "select" tag, "radio", "checkbox" and some special fields of the component have the same ability.

4.3. Another example with conditional fields, in which the fields change dynamically when selecting a legal entity or an individual. In the first case, you need the company name and legal address. For a private person, you only need an Email and a phone number.

One of the features in QuickForm is the ability to dynamically manage required fields. In the example above, when you select a legal entity, you get the required field "Company name". At the same time, this field is not available for a private person, and it does not prevent sending the form.

5. 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.

5.1 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.

5.2 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.

5.3 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.

5.4 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.

6. How to show the form on the site page.

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

6.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.

6.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.

6.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

7. Project Settings.

The form.

7.1. CSS file for the form. You can select a file or create a new one. Do not make changes in default.css. If you need it, create your own file. For details, see QuickForm 3 and CSS..

7.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.

7.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.

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

Email.

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

7.7. 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.8. 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.

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

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

8. Description of the fields.

In this section, I will focus only on the original fields of the component and some of its inherent features. Before describing it, 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 title in the email if this header is empty, so it can be used for those fields that do not have it according to the standard.

8.1. customHtml. It can be used to display text, html, pictures, styles, scripts and more. Using customHtml along with conditional fields, you can get interesting forms, for example, with this interactive display.

0$


8.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.

8.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 the server has now become very relevant, since mail services have introduced strict rules. QuickForm solves this problem.

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

8.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.

8.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.

8.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.8. backemail. Displays a checkbox, by selecting which the user can receive an email copy to himself.

8.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.

8.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.

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

8.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.

9. Problems and Frequently Asked Questions

9.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.

9.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.

9.3. Calculator does not count correctly.The calculator counts according to the rules of mathematics. If the result does not match the expected one, artificially cause an error. The calculation line will be displayed on the page.

9.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.

9.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.

9.6. Form does not look nice. QuickForm was not created as a style solution, it is a functional solution. You need to write the styles yourself or use the built-in ones. You can also contact me or another specialist if you do not work with CSS.

9.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.

9.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, like any free extension, places the author's link on the site pages. But there is a way to remove this link legally. To do this, you need to help this project. The activation code that removes the link will be sent automatically to the address you specify below.

Make money transfer:
And also get the activation code:
ЮMoney
rub.
WebMoney
rub.
Payeer
usd

Add comment

Comments  

# Nick 2021-11-26 15:14
Great extensions. Would like to use PayPal, is that possible?
Reply
# funcvar 2021-11-26 18: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 14: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 18: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 16: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 16: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