QuickFormQuickForm is an extension for creating spam-protected web forms. The best extension for designers, webmasters and experienced developers who work with the popular Joomla! The component has a simple interface and high speed. Thanks to its flexibility and non-standard architecture, QuickForm allows you to create unique forms, applications, calculators, determinants of something, branched tests, polls, dynamic content modules.

The component is compact. The size of the installation archive is 170 kB. In terms of capabilities and speed of work, it will surpass everything that you have dealt with before. Initially, the extension was intended for professional developers, but the simplicity of the interface allows ordinary users to use it. However, it should be noted that basic knowledge of HTML and CSS is desirable for full-fledged work. The preset styles are more for example, they may not always fit into your template correctly. If necessary, I will always be happy to provide help if the need arises. It will take 2-3 hours to style the form for your website design.



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.

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'. See the following picture.


instruction 1

Click on the green "New" button and open the interface for setting up the project of our future form.


instruction 2

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


instruction 3

Of interest on this page are the "fields" link and the "Plugin code" column. Plugin code is a string that needs to be copied and pasted into the content of the material. I will not go into detail here, as this is a standard procedure in Joomla. If you are here, you probably know how content plugins work.

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


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 green plus button is the field selection menu. Name the group whatever you like and create fields like in the following image:


instruction 6

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



2. Download QuickForm.


Compatibility Joomla! 3+



Compatibility Joomla! 4+



3. QuickForm 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, 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 from happening, 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, so there is no need to pull all the code from default.css. You don't need to mark the button "copy styles" now. 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 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 conditional fields not only to the "select" tag, the "radio", "checkbox" and some special fields have the same ability. In this case, you can display not just one related field, but a large group of different fields. This gives QuickForm functionality not available in any other extension.


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


instruction 10


In order to link our countries with regions and cities, we need to create a few more field groups. Each group will have one "select" field. Let's create a group with the title "Russia" so that we don't get confused in the names later. Let's add a "select" field to it with federal districts. Similarly, we will create groups of fields for other countries. Now we can return to the first main group and link the newly created groups to each country. In the same way, cities are tied to federal districts.


For this example, I've made styles that can be copied 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 conditional 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 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 the submission of the form.



5. QuickForm and calculator.


Any form can be converted 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 conditional 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 type is devoid of the disadvantages of the previous one, in addition, it can be used to display several calculation results. In general, it has no restrictions at all. To start, you need to enter a formula, the structure of which is described in the administrative panel. Let's take a quick 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 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 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. Leave this field empty if you are unsure of your knowledge.

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 paragraph, I will focus only on the features. 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 title of the field in the letter, if this title is empty, so it can be used for those fields, even to which it does not belong.


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. 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 much 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 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 "tab" interface. You can specify a vertical or horizontal view. An example of vertical tabs is 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 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 is a free extension, but unlike other free components, it allows you to remove the author's link from the site pages. For this, help is needed to develop this project. An activation code that removes the link will be sent automatically to the email that you write below.

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




Add a comment.

Add comment

Comments  

# 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