Even though QuickForm is a form builder, you can make great stores with it, and in a way that no other store builder can do. It can create products with a dynamic structure with a calculator of any complexity, including an individual calculator for each product. Goods can be presented as separate projects or as a single project. In the latter case, the entire store can be placed on one page, that is, to make a store for a one-page site.
The process of creating a web form can be long and difficult, especially when the form includes complex nested structures, a calculator, interactive elements or animation. On this page, you will learn details about a form development extension that can make your task easier. We will provide you with a starting guide that will help you master the QuickForm plugin.
At the end of this example, you will receive a ready-made form and protect it from bots.
Let's create a "Book a Consultation" form. You can place it on your site or export it to a quick install file to hand over to a client. This file can also be used in your future projects. If you haven't installed the QuickForm plugin yet, now is the time to do so.
In this article, I won't go into complex concepts and features, but will focus on the basics and workflow. You can see what the end result will look like at the bottom of this page.
Creating and configuring a form project.
A form project is a set of its basic settings. Go to the main page of the extension in the admin panel of the site and click the "Add new" button. A page will open where the work process begins. We are interested in several fields that need to be filled in. First, add a title for the project. I specified: "Sign up for a consultation. For the "First Form, Introduction" page.". At the bottom, add text that will inform the user about the successful submission of the form. I wrote: "Hello, {replacerName}! Thank you for your order. Our manager will contact you soon.". Also, select QuickForm to display this message.
Next, we need to create a CSS file for our form. In the "CSS file for form" section, click the "Create" button. In the field that appears, enter the file name: "firstexample.css". Leave the "Copy styles from default.css" button selected.
It is important to note that after installing the extension, you will only have access to the default.css file to select the form style. This is a technical file containing the current set of rules for all plugin fields. You cannot use it to select the form style , since all changes to it will then be restored, and the form will be damaged.
Filling out the form with fields.
After completing the previous instructions, a "Fields" link will appear next to the name of the created project. Follow this link, and the field group manager will open. The constructor works not with individual fields, but with their groups. In our case, the form consists of one group, since it is simple. Let's create this group by clicking on the "Add new" button. On the page that opens, fill in the group title, I indicated: "Starting group". Then click the "Add fields" button and add fields, as shown in the screenshot below:
Description of fields
customHtml. This is a special extension field that adds HTML markup. In this example, I wrapped the "calendar" field and the "convenient time" field in a container with the "qfflex" class to place them on the same line.
username. This field belongs to the "one-off" menu group. Fields from this group should only appear once in the visible part of the form and usually have additional functionality. For example, the "useremail" field differs from the "input[email]" field in that it specifies who is filling out the form. The value from the "useremail" field is used by the plugin to send a copy of the message to the user, serves as a placeholder reply-to address, and can be used in messages like "{replacerName}" and so on. The "input[email]" field is used, for example, if you need to get the addresses of some unspecified people. The settings for the "username" field can be seen in the second screenshot above. The other fields are configured in a similar way. Once you have completed the settings, click "Save & close".
Displaying the form on the page.
To display the form, you need to copy the Hashtag from the project manager and paste it into the page content. Additional output methods can be found on the plugin page. Immediately after that, you will see something similar to the first screenshot below. This is because we need to enable the CSS magic. Let's open the firstexample.css file in our favorite code editor and start the process... First, I delete all the blocks not used by the form, and continue working with the remaining code. Unfortunately, it cannot be described due to its creative nature. However, some technical aspects need to be explained.
CSS Features.
After cleaning, my firstexample.css file looks like this:
.firstexample {
background: #fff;
}
.firstexample * {
margin: 0;
box-sizing: border-box;
max-width: none;
font-size: 1em;
line-height: 1em;
}
.firstexample .qf3txt input,
.firstexample select,
.firstexample textarea {
background: #fff;
padding: 0.6em;
border: 1px solid #8e8e8e;
border-radius: 0.3em;
}
/* message */
.firstexample .qfmess span {
padding: 1em;
margin: 1em;
display: block;
}
/* textarea */
.firstexample textarea {
height: 10em;
}
/* checkbox */
.firstexample .qfcheckbox input {
margin: 0 0.5em 0 0;
}
/* link */
.firstexample .qfcapt {
text-align: right;
}
.firstexample .qfcapt a {
color: #CCC;
font-size: 10px;
padding: 1em 2em;
}
.firstexample .nfl {
display: none;
}
/* calendar */
.firstexample .single {
display: inline-block;
width: 38%;
}
.firstexample .qfcalendar input {
width: 100%;
}
.firstexample .qf_date_inner {
display: flex;
justify-content: space-between;
}
.firstexample .qf_calen {
position: relative;
z-index: 999;
}
.firstexample .widgetCalendar {
position: absolute;
left: 0;
height: 0px;
overflow: hidden;
width: 100%;
min-width: 180px;
}
.firstexample .qf_date_a {
display: block;
padding: 0 1.2em;
background-image: url(../datepicker/images/calendar.png);
background-size: 100% 100%;
width: 3em;
}
It's easy to notice that all the rules start with the name "firstexample". This is because QuickForm added this class to the parent container, and we can use it. This approach allows you to place forms with different designs on the same page without creating conflicts between them. If you want your forms to be consistent, just use the same CSS file for all forms. However, all rules must start with a name that matches your file name.
In addition, the class "touch" or "desk" is added to the parent container, depending on whether the device has a touchpad. Also, if the width of the container in which you placed the form becomes less than 500px, the class "compact" is automatically added to the form.
After 3.5 hours of intensive work with styles, the form has acquired a finished look. Now it looks like the second screenshot above. For many templates, such a design will look impressive. At this point, you can finish the design, but you need to pay attention to one more important aspect.
Spam protection.
QuickForm offers three-level spam protection, which increases as the form structure becomes more complex. For our simple form, the basic algorithm will be used, which will already provide a sufficient level of protection. However, I want to add a second layer, using the functionality of dependent fields. In short, this layer is based on the fact that bots usually cannot correctly process XMLHttpRequest requests. Correct submission of the QuickForm is possible only by clicking on a special "submit" field. If the form does not display this field, its acceptance by the server becomes impossible. Therefore, it is enough to add this button via a dependent field.
To do this, remove the "submit" button from our group and add "input[button]" instead. Screenshot. In the fake button settings, specify: value="Sign Up" onclick="this.form.submit()". This is necessary to check for unfilled fields: in this configuration, the form will not be submitted. Let's create another group of fields in our project, I called it "Real submit button". Screenshot. This group will contain the real button. Screenshot. We return to the main group and link the new button to the input[checkbox] field. Screenshot. Now, after the user agrees to the terms, the submit button will be loaded from the server and the form will be accepted by them.
The third layer of protection is for calculators, and I won't cover it at this point. In addition, the plugin provides reCAPTCHA, but it does not add additional protection on top of the basic one, so I do not use it.
Result.
After I'm done, I export the form to a .qf3.zip file using a name that matches the CSS file name. This file can now be used in future projects by simply installing it using the "Import" button on the main page of the plugin. The final project settings and styles can be seen in the firstexample.qf3.zip(11 KB) file.
The form builder allows you to make tabs in many ways. Tabs can be made in javascript, css, or a combination of them using the customHtml field. Obviously, QuickForm would not be quick if it did not offer a ready-made widget for the usual interface. In fact, there are two ways to implement tabs in the component, and these ways will lead to two different functional results.
QuickForm can create calculators of any complexity, including those with dynamic fields and dynamic field groups. To do this, the component has four types of calculators that calculate by a formula, without a formula, and also from the logic written in a php file. Calculators are designed for the average level of the user, but you will need knowledge of mathematics. In this article, I will try to describe each of the four types and give simple examples of how they work. To return to the QuickForm page, follow the link: QuickForm.