Back to contents

Crocoblock tools overview. Contact Form Builder and WP Query Generator

This tutorial is dedicated to the Crocoblock tools for simplifying your work. These free tools are open-source and can be used easily right on Crocoblock website.

While creating a website you can sometimes face difficulties with coding in case you don’t have enough skills yet.

In order to make your work easier, Crocoblock has developed a set of free tools that will be of immense help. These tools are totally free and do not require any coding, so even an amateur can handle them.

At the same time, even if you’re a developer, you’ll still find them equally useful, as they will allow you to work faster.

Let’s explore the free tools provided by Crocoblock a bit deeper.

WP Query Generator

WP Query Generator

WP Query Generator tool allows creating custom queries for displaying the dynamic publications with Smart Post List and Smart Posts Tiles widgets from JetBlog. The custom queries will work for Posts widget from JetElements plugin as well.

The generator has 9 tabs which are helpful when you want to set a complex query with several conditions, that are not available within the widget by default.

Here is the shortlist of the query types that can be handled with WP Query Generator:

  • General Parameters tab – allows to specify the posts order, the posts type to query, etc.
  • Pagination Parameters tab – here you’d be able to set the posts pagination and offset settings.
  • Post & Page Parameters tab – set the IDs of the posts to exclude or include.
  • Author Parameters tab – here you can set the query by the author.
  • Category & Tag Parameters tab – allows querying the posts by their tags and categories.
  • Tax Query Parameters tab – here you can set the query using custom taxonomy terms.
  • Meta Query Parameters tab – use it to query posts by meta key values.
  • Date Query Parameters tab – here you can approach the advanced settings for posts query by date.
  • Misc Parameters tab – this block contains the options that allow setting the query by password, comments count, etc.

After you’ve set all the needed parameters they will be automatically added to the Generated Query code. Then you just need to copy and paste the code in the widget’s settings. Ensure you’ve turned on the Use Custom Query option in the Query&Controls settings and paste the code in the Set custom query empty field (however, the location of this option varies depending on the widget you are using).

Contact Form 7 Layout Builder

Contact Form 7 Layout Builder

Another useful free tool is Contact Form 7 Layout Builder. It allows creating the most complicated and advanced Contact Form 7 layouts. The task of adding the standard Contact Form 7 form becomes so much easier with it! Let’s explore this tool a bit deeper.

Working with Contact Form 7 Layout Builder

Step 1 — First, open the Contact Form 7 Layout Builder tool.

As you can see there are two columns by default.

Step 2 — You can drag them as you wish in order to set up the needed layout and add as many columns as you need by clicking the Add New Field button.

Set Form Layout

After that, you will get the HTML and CSS code pieces.

Step 3 — Afterwards, copy the HTML code and navigate to Contact > Add New in WordPress Dashboard.

Step 4 — Paste the code to the Form tab.

Paste the cord in Form

Step 5 — Then, move back to the Contact Form 7 Layout Builder tool and copy the CSS code.

Step 6 — Afterward, open the Appearance > Customize > Additional CSS directory in Customizer and add the code here.

Step 7 — Finally, click the Publish button in order to save the changes.

Using Contact Form 7 widget

Step 8 — Open the page where you want to add a Contact Form 7 with Elementor editor, find Contact Form 7 widget and drop it to the page’s canvas.

Step 9 — Proceed to the Content > Form directory and select the layout you’ve created from the Select Form dropdown.

We’ve just completed the overview of the Crocoblock tools and, as you can see, the free tools can make creating custom queries and contact forms extra easy! Hoping you’d find them of use!