QuickFormQuickForm is a free extension for creating web forms with built-in spam protection and great features. This is made for users who work with the popular Joomla! or WordPress. The component has a simple interface and a high speed of code processing. QuickForm allows you to create unique forms, applications, calculators, determinants of something, branched tests, surveys, online stores, calculators of windows or printed products, interactive forms and dynamic content modules.

The builder is compact, the weight of the installation archive is 170 kB. It will surpass any other form script in terms of capabilities and speed of operation. The extension was created for professional developers, but the simplicity of the interface allows it to be used by an ordinary user. For full-fledged work, it is desirable to know CSS, because embedded styles will not always be able to fit correctly into your template. If necessary, I can help, styling the form for any design will take 2-3 hours.



1. Examples of simple shapes.



QuickForm allows you to embed any number of forms with any design, including on one page. Forms can be simple and complex, in a modal window and explicit, sent by ajax or with a reload, include conditional fields of any nesting level, be with a calculator or even with a shop cart.

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.



Download the extension: download. Install in the usual way. Open: 'components -> QuickForm'. See the following picture.


instruction 1

Click on the green "New" button and get into the interface for configuring the form project. I filled in only the title and did nothing else. Click "Save & Close". The form project has been created.


instruction 3

Now we have a line containing the "fields" link and the "Plugin code" column. 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, forms do not consist of individual fields, but of their groups. There can be a lot of such groups in large and complex forms, but in our case the entire form will consist of one group. Now we have not created a group, so we click the "New" button and create it. The interface for working with fields opens:


instruction 6

The green plus button is a field selection menu. Name the group arbitrarily and create fields, as in this image.

For fields such as Name, Email and Your message, you need to fill in the placeholder. Click the settings button and enter placeholder in the window that opens. Mark the field as required. The window has two buttons: green - remember and red - do not remember. Click green.


instruction 7

That's all, the form is ready. Click the green "Save" button in the upper-left corner of the page.



2. Download QuickForm.


Compatibility Joomla! 3+



Compatibility Joomla! 4+


Compatibility WordPress
At the moment, the plugin can be installed from the WordPress repository.



3. QuickForm and CSS.


QuickForm is an extension for creating a form that can be with any design. Therefore, you need to work out here. I assume that you are familiar with the basics of HTML and CSS, I will not describe them. I will note only the features inherent in QuickForm. Let's look at another example:



By default, a component includes one CSS file. This is a neutral style with support for all widgets. Since widgets are often added, I have to include this file in updates. Therefore, it makes no sense for you to make any changes there, because they will be overwritten during the update. To prevent this, you need to create your own stylesheet in the project settings.


Open the project settings and create a new stylesheet named new_example.css there. If this is your first time working with the component, be sure to check the "copy styles" button. But now our form is very simple, I will write the styles myself. Click Save.


instruction 9


The form itself consists of four fields. In the first three settings, we need to fill in the "placeholder" and mark "required". In the "submit" field you need to fill in the "value", which we will now have "Send Massege".


instruction 8


If we go to the site page with the form 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 you need to do is start each css statement with the string ".qf3form.new_example". Below is a listing of the CSS rules for this 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 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 a class 'compact'. It appears when the container in which the form is placed has a width of less than 500px. This is very 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.




4. QuickForm and conditional fields.


4.1. QuickForm has the unique functionality to build conditional (dependent) fields. They can have any level of nesting, are compatible with the built-in calculator, and can be used to display not only other fields, but also pictures, scripts, styles, any html code.

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


Basic Details

You can bind a dependent field not only to the "select" tag, but "radio", "checkbox" and some special fields of the component have the same ability. In this case, you can output not just one related field, but a group of fields that themselves may have dependencies. This gives QuickForm functionality that is not available to other extensions.


Let's look at the example in more detail. First, you need to create a form project and create a new style file "conditional.css" in it. Now let's create the first group of fields, as in the picture:


instruction 10


To link our countries with districts and cities, we need to create several more groups. There will be one "select" field in each group. Let's create a group with the title "Russia", so that we don't get confused in the titles later. Let's add a "select" field with federal districts to it. Similarly, we will create field groups for other countries. Now we can go back to the first main group and link the newly created groups to each country. Similarly, cities are linked to federal districts.


The styles for this example are placed below.



.qf3form.conditional {
    font-size: 14px;
    max-width: 800px;
    margin: 0 auto;
    background: #4ca4e9;
    padding: 0 0 0 160px;
}

.qf3form.conditional form {
    padding: 0 20px;
    background: #fff;
}

.qf3form.conditional .qf3 {
    float: left;
    width: 50%;
    padding: 0 15px;
}

.qf3form.conditional .qf3label {
    font-size: 0.8em;
    color: #ababab;
}

.qf3form.conditional .relatedblock .qf3 {
    width: 25%;
}

.qf3form.conditional select,
.qf3form.conditional input {
    font-size: 1.2em;
    font-weight: bolder;
    margin: 0 0 1.1em 0;
    padding: 0;
    width: 100%;
    height: 1.2em;
    border: 0;
    border-bottom: 1px solid #dfdfdf;
    background: #fff;
    color: #877b5b;
}

.qf3form.conditional .qf3btn input {
    margin: 35px 0;
    border: 0;
    color: #ababab;
    font-size: 1em;
    width: auto;
    height: 2.5em;
    cursor: pointer;
    box-sizing: content-box;
}

.qf3form.conditional .qf3btn.qfsubmit {
    text-align: right;
}

.qf3form.conditional .qf3btn.qfsubmit input {
    border: 1px solid #ccc;
    color: #fff;
    background: #369bde;
    border-radius: 2em;
    padding: 0.4em 1.5em;
}

.qf3form.conditional .basic_details {
    color: #369bde;
    padding: 40px 0 10px;
    font-size: 1.5em;
    font-weight: bolder;
    border-bottom: 1px solid #e0eaf3;
    margin: 0 10px 40px;
}

.qf3form.conditional input::placeholder {
    color: #ababab;
    opacity: 1;
}

.qf3form.conditional .qf3btn.qfreset input:hover {
    border-bottom: 4px solid #ccc;
}

.qf3form.conditional .qf3btn.qfsubmit input:hover {
    background: #61b3e9;
}

.qf3form.conditional.compact {
    padding: 100px 0 0 0;
}

.qf3form.conditional.compact div.qf3 {
    width: 100%;
}

.qf3form.conditional.compact div.qf3btn {
    width: 50%;
}



4.3. Another example with dependent fields, in which the fields change dynamically when choosing a legal or private person. In the first case, we want the company name and the legal address. For a private person need only Email and phone number.

Anything you enter into QuickForm can be translated. For this you need to use the language constants that begin with QF_ prefix, for example, QF_NAME. So you can enter the html code in labels, for example, the links for privacy policy and consent to the processing of personal data.



One of the features of QuickForm is the ability to dynamically manage required fields. In the example above, when you select a legal entity, you get the required Company Name field. However, there is no such field for an individual, and it does not interfere with sending the form.



5. QuickForm and calculator.


Any form of this extension 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 can be found in the form project settings in the "calculator" tab. I will try to describe some details.


5.1 Calculator type 'default'. This is a unique option that doesn't 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 display the result. You will see that the calculator is working and shows the result: 10. Using various modifiers, brackets and conditional fields, you can solve most of the mathematical task.


Each dependent field in this case can act as an if else condition, thus branching logic and starting its own branch of calculation. See an 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 Calculator Type "multiple". This option, without the disadvantages of the previous one, can also be used to output several calculation results. To start, you need to enter a formula, the structure of which is described in detail in the settings. Let's take a small example.


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 Calculator Type "simple". Common logic used in extensions. This is the simplest, but also the most limited type of calculator. Here we have the usual way of writing mathematical logic using variables. It is described in detail in the component itself, and I will not dwell on it here. Unfortunately, the logic of the dynamic form and conditional fields does not fit well with it. But a simple calculator without heavy parts can do this.


5.4 Calculator Type "custom". This one is written in php "as you like" and "as you want". Its only drawback is the requirement to know the language.


The QuickForm structure is flexible. On it you can do calculators without using the built-in function at all, and even math, as such. In addition, you can add your own type for your specific project. I am always happy to help if you have questions.



6. How to display form on page.



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

6.1. Output by the plugin plg_content_qf3. Allows you to insert a form in the text of another component, for example com_content. You can display it through any component that supports content plugins. To do this, insert the following instruction in the right place in 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 a form on multiple 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/classes/buildform.php");
$qf = new QuickForm3();
echo $qf->getQuickForm($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.4. Form with a calendar. It is added to make preliminary loading datepicker.js on page.

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 component 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.10. Additional language file. This is needed to those who write the language constants into another file, for example, a template file. Provides correct work with conditional fields.

7.11. Cart image. More on the store mode will be later.



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.


0rub.


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. You can't even attach archives to the email, the addressee will not receive them. QuickForm solves this problem safely.


(jpg,gif,png,zip) max: 2M


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


8.4. 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.5. 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. Below is an example of a horizontal cloner embedded in a vertical one:


0
100
0
100
number 1number 2number 3
0+×
0units


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


8.8. 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.9. qfTabs. Displays the "tabs" interface. You can specify a vertical or horizontal position. An example of vertical tabs is below. More information about tabs is available here.


step 1
step 2
step 3


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




8.11. 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 of your site and must be open for indexing by search engines. 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. There is an easy way to see the final math line, for this you need to substitute two points in a row in any calculated text field. This will cause an error and the 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 design solution. it is a functional solution. Styles you need to write yourself or use inline. You can also contact me (help) or another specialist if you are not familiar 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 a comment.

Add comment

Comments  

# Stephen J. 2021-06-09 11:16
I just want to thank you for such a wonderful extension. Great job.
Reply
# xena 2020-11-27 14: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 14: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 10:58
Could I please have an activation code?
Reply
# Fernando Rodriguez 2020-04-29 13:19
Could I get an activation code?
Reply
# funcvar 2020-04-29 14: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 18:27
Thanks for the excellent extension. Good work. Can I use PayPal to send money?
Reply
# funcvar 2019-05-31 20:23
Unfortunately, in my country, PayPal does not do 100% service. Even if you make a transfer to my account, I will not be able to use it. But you can use the system Payeer. It does not limit itself everywhere.
Reply