QuickForm 3QuickForm 3 is a powerful extension for creating web forms. One of the best builders, written for designers, webmasters, ordinary users and experienced developers who work with the popular engine Joomla! The component is superior in capabilities, but has a simple interface and high code rendering speed. It will be the best choice if you want to develop fast sites with low server load. Thanks to the flexibility and custom architecture, QuickForm 3 allows you to make unique forms, applications, calculators, determinants, extensive tests, polls, dynamic content modules.



It is worth to mention that for the full experience desirable basic knowledge of HTML and CSS. But even without them, you can make a form with styles embedded in the component. These styles are more for reference than to use; they will not always be able to correctly fit into your template. However, I will always be happy to help if you need it.



1. Examples of simple forms.



As you can see, QuickForm allows you to embed any number of forms on a page. This is a lightweight extension, and there may be hundreds of forms. At the same time, they have a different design, without interfering with each other.

Subscribe Now
Choose
Anything
Anything 2
Anything 3
Anything 4
Anything 5
0
100
Enter your name
Contact details
Gender
Date of Birth


So let's start with a simple one. For example, from this form below.



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


instruction 1

Click on the green button 'New' and get into the interface to customize the project of our future form.


instruction 2

Here we need to fill only the title, do nothing else. Click "Save & Close". The project forms created.


instruction 3

On this page interest link 'fields' and column 'Plugin code'. Plugin code is the string that you want to copy and paste into the content material. I will not dwell here in detail, as this is the standard procedure in Joomla. If you are here, then most likely you know how content plugins work.

Follow the 'fields' link and get to the new page. This is a list of field groups. In QuickForm, a form consists not of individual fields, but of groups, of their sets. In large and complex forms such groups can be very much, but in our case the whole form will consist of one group of fields.


instruction 4

We now have not created any groups, so click the 'New' button and create. Open the interface for working with fields:


instruction 5

The round button with the green plus sign – this menu selection fields. Name the group randomly and create fields like the following image:


instruction 6

For the fields Name, Email and Your message, you need to register 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 - to remember and red - not to remember. Click green.


instruction 7

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



2. Download QuickForm 3.

Compatibility Joomla! 3+



3. QuickForm 3 and CSS.


I assume that you know HTML and CSS, I will not describe them. I will note only the features inherent in QuickForm. Let's take another example:



By default, one CSS file with styles is included in the component: default.css. This is a ready neutral style with adaptability and support for all component widgets. Widgets are sometimes added, so I have to include this file in updates. Therefore, it makes no sense for you to make any changes there - they will be lost during the update. To avoid this, you need to create your own style file in the form's project settings.


Open the project settings and create a new style file named new_example.css. Our form is very simple, so there is no need to pull all the code from default.css. The button 'copy styles' is not necessary to mark. Click Save.


instruction 9


The form itself consists of four fields. In the settings of the first three, we need to register a placeholder and check the item 'required'. In the 'submit' field, you need to remove the default 'class' and change the 'value', which we now have is 'Send Massege'.


instruction 8


If we display the project on the website page and open the 'developer tools' panel in the browser, we 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, the forms do not interfere with each other on the page. All you need is to precede each css instruction with the string ".qf3form.new_example". Below I give a complete listing of CSS examples.



.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 3 and conditional fields.


4.1. QuickForm has a unique ability to display dependent fields. They are also dependent drop-down lists, they are dynamically adding fields, they are also changing the value of a field depending on other fields. Dependent fields in QuickForm can have any nesting level, are compatible with the built-in calculator, can be used to display not only other fields, but also images, scripts, styles, any html code.

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


Basic Details

You can attach a dependent field not only to the 'select' tag, the same possibility is provided by 'radio', 'checkbox' and some special fields of the component. In this case, it is possible to derive not one kind of related field, but an entire group from different fields. Using this opportunity, you can make unique and amazing forms simply and easily.


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


instruction 10


In order to associate our country with districts and cities, we need to create a few more groups of fields. Each group will have one field 'select'. Create a group with the title 'Russia', then to avoid confusion in the names. Will add a field of type 'select' with the Federal districts. Similarly, create a field group for the other countries. Now we can return to the main group and bind to each country just created a new group. Similarly, attached to the Federal districts of the city.


For this example, I prepared the adaptive styles that you can copy 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 simple example with dependent fields in which fields are dynamically changed when selecting a legal entity or private individual. 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 type in QuickForm can be translated into other languages. 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 3 is the ability to dynamically control the required fields. In the example above, when you select a legal entity, you get the required field 'Company Name'. At the same time for a private person this field is not, and it does not prevent to send the form.



5. QuickForm 3 and calculator.


Any form of component can be turned into a calculator. Four types of calculators are built into QuickForm, which can be more convenient in one way or another. The description of these types is in the settings of the form project in the 'calculator' tab. I'll try to reveal some details.


5.1 Calculator type 'default'. This is a unique option that does not require any formula. Go to the settings of any field and look at the tab of the calculator. Enter the parameter 'math', 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 has earned and shows the result: 10. Using various modifiers, brackets and dependent 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. To make such a calculator using the 'default' method will not work. Therefore, several more are included in the component.


5.2 Calculator Type "multipl". This option is devoid of the shortcomings of the previous one; in addition, it can be used to display several calculation results. In general, he has no restrictions whatsoever. To start you need to enter the formula, the structure of which is described in detail in its settings. Let's look at 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". This is the simplest, but also the most limited type of calculator. Here we have the usual familiar 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 dependent fields does not fit well with it. But a simple calculator without the wisdoms can be done.


5.4 Calculator Type "custom". This is written in php 'as you like' and 'as needed.' Its only drawback is ajax requests and language proficiency requirement.


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 easily add a new type of calculator for a specific project. I am always happy to help if you have questions, or simply don't have time for this.



6. How to display form on page.



The output is carried out in different ways:

6.1. Output content 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. The output 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. The output 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 the CSS file, which is in the distribution. 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. An example can be seen on the form, which I give help. That is, it displays a simple link which, if necessary, can give the appearance of a button using CSS.

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 if the calendar lays somewhere in a dependent fields.

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

Email.

7.6. E-mail. You cannot enter any address and expect that Email will be delivered. Leave this field empty if are not assured.

7.7. Email template. QuickForm 3 includes three templates:
default: basic table markup with html.
simple: markup without html. You can create html using a special field customHtml.
json: line of all data (for developers).

7.8. Introductory and concluding text. May contain substitution 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 dependent fields.

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



8. Description of the fields.



In this paragraph I will focus only on the special fields in QuickForm and some inherent features.


8.1. customHtml. Allows to build in the form any html a code, it can be used for a conclusion of the text, pictures, styles, scripts and other. Using customHtml together with dependent fields, it is possible to receive interesting forms, for example, here with such 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 a code. I shall not describe any details as it is a field for the experienced users, capable to understand with it independently.


8.3. calculatorSum. Displays the result of the calculator. There are no difficult features.


8.4. recaptcha. It bears an adorning function, as QuickForm has built-in protection. The field retrieves data from the Joomla system plugin. To configure, open the plugin manager and the system plug-in 'CAPTCHA - reCAPTCHA' 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.


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 dependent 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. When using the 'default' calculator, qfincluder can set mathematical conditions of type if.


8.7. backemail. Displays the checkbox, choosing which, the user can receive a copy of the letter to your Email.


8.8. addToCart. The field that is used in a mode a store instead of submit. When the button is clicked, the form will not be sent by Email, and will be added to the shopping cart feature.


8.9. qfTabs. Displays the interface ' tabs '. You can specify the vertical or horizontal position. Vertical tab example below.


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.




9. Problems and Frequently Asked Questions



9.1. The form appears for a moment and disappears. This error is related to the problems of the author's link. 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 mathematical 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. The QuickForm 3 component 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. Check plugin settings CAPTCHA - reCAPTCHA. In the settings must be entered 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 print. As a rule, this means that in the project settings no css file is selected that is responsible for the styling.




Thank for QuickForm 3.



QuickForm 3 is a free extension showing the author's link. But there is a possibility to remove completely this link from pages. For this you need to assist the development of the project. An activation code will be sent automatically to the address you provide below.

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




Add a comment.

Add comment

Comments  

# 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