ARForms: Top Featured Form Builder Plugin for WordPress

For developing forms, WordPress provides a large number of plugins. Forms, whether primary registration forms or complicated forms, will be required by users at some point.

Just having a contact form plugin isn’t enough! It is best to find an ultimate solution for consumers looking for the correct form to post on their website.

Let’s put that aside; website owners understand the importance of attracting visitors to their sites and converting them into leads.

A WordPress webmaster, in particular, must design a variety of forms, including pop-up forms, survey forms, contact forms, multi-column forms, and so on.

It is not always simple!

Creating intricate forms necessitates a great deal of effort. Therefore, you’ll need a lot of time to do this!

As a result, we’ve devised a method that will allow even the most inexperienced user to develop complicated forms without hitting any roadblocks. To start constructing complex forms, use the ARForms WordPress Form Builder plugin. This WordPress Form creator is described in this post.

A Quick Overview of ARForms Features, a WordPress Plugin That Lets You Create Custom Forms.

The ARForms WordPress Form Builder plugin is a one-stop-shop for creating any type of form with no technical knowledge required.

Even if you have no coding or design knowledge, you may utilize the WordPress Form Builder plugin.

The goal of this post is to introduce you to the ARForms WordPress Form Builder plugin and its features review, which is a one-stop-shop for developing and integrating any type of form into your WordPress site.

ARForms’ User Interface and Experience

This plugin has an excellent UI (User Interface) with easy drag-and-drop capabilities, allowing you to add a range of items to the form as well as a variety of style options, allowing the form to be configured pleasantly.

Various Form Styles

  1. Rounded Style
  2. Standard Style
  3. Material Style

Real-Time Editing Forms

The Real-Time Editor in the WordPress Form creator can help you create the form with a simple drag and drop option.

Completely Responsive Design

Any type of form you design with this WordPress Form maker plugin will be totally responsive on any device, which is one of its best advantages. Below shown a material style login form demo design.

Conditional Rule and Mathematical Computation

Conditional Rules and Mathematical Calculation are two useful features present in a form with a wide range of product categories.

You can use a conditional rule to show the list of the related things for their chosen category if you want to present a form with many types where your site visitors can select their desired goods from their chosen category.

Pop-Ups Abound on the Site.

Site-Wide Pop-Ups is another beautiful feature of this WordPress Form Builder plugin. Users can show subscription forms or contact forms on any WordPress page or post with this excellent feature.

Email Marketing Tool Integration with ARForms

ActiveCampaign, Mailchimp, IContact, GetResponse, Aweber, Constant Contact, Madmini, HubSpot, ConvertKit, and other widely used email marketing solutions are supported and integrated with this form builder. You can see an example of a contact form below.

Forms with Multiple Steps Should Include a Page Break.

If you have a long-form survey or an order form, you can divide it up and shorten it by presenting it in multiple steps.

You Can Customize the Image in the Radio Buttons

To add photos to radio buttons and display custom images in radio buttons, simply enable the “Use Image over Option” option.

Built-in Analytics

One of ARForms’ most delicate features is the analytics tool, which allows you to view form entries and views daily, monthly, and annual.

Submit Action

The Submit Action feature can be used for a variety of things, including “displaying a thank you message after a visitor submits the form,” setting a redirect URL, displaying content from another page of your website, and even sending SMS using SMS gateways like Twilio, Nexmo, Clickatell, and SMSGlobal.

Integration of a Payment Gateway and other Add-Ons

Whether customers want to add a payment gateway or purchase add-ons like Paypal, PayPal Pro, Stripe, PayFast, etc. The ARForms WordPress Form Builder gives them both options. A screenshot below illustrates a payment form created via form builder using the custom design tool.

Finally, Some Thoughts

Finally, you can rest assured that using the ARForms WordPress Form Builder will make creating any form a breeze. Consequently, there are no limits to your WordPress form visualisation when it comes to combining the functionality and employing the complex features of this WordPress Form Plugin.

Please share this post on social media if you appreciate it so that more people can benefit from it!

Please post any queries you have in the comments area below!

How to Create a Rounded Image in Gutenberg (without an External Tool)

Gutenberg, the default editor of WordPress, comes with some elements (called blocks) you can add to either a blog post or page. One of the native blocks offered by Gutenberg is the Image block. As the name suggests, you can use the Image block to add an image to a page or blog post. Although tends to limited when compared to page builders like Elementor and Divi Builder, Gutenberg also offers some styling options to style up your image. One of which, you can create a rounded image.

In web design, you can create a rounded image by setting the border radius of the image. Most page builder plugins (including Elementor and Divi Builder) have a setting option to set the border radius of an image. Gutenberg has no setting option to set custom border radius. Instead, it offers two pre-styled shapes: default and rounded. Choosing the default shape means your image will be displayed according to its original shape (e.g., rectangle).

Conversely, if you choose the rounded shape, your image will be displayed in a rounded shape. But in order to have a rounded shape, the original shape of your image should be in square. Meaning that the height and width of the image should be the same (e.g., 600×600 pixels). Luckily, Gutenberg has a simple built-in editing tool to create a square image.

How to Create a Rounded Image in Gutenberg

Although Gutenberg has an editing tool to create a square image, you can use a dedicated image editing tool like Photoshop to create a square image with a more precise dimension. GIMP is a great free alternative to Photoshop if you are looking for a free image editing tool.

In this example, we will use the default image editor of Gutenberg.

Start by creating a new page (Pages -> Add New) or edit an existing one. Once the Gutenberg editor opens, add a new Image block. Upload the image you want to use.

Once the image is uploaded, click it to open the settings bar. On the settings bar, click the Crop icon.

You will three more icons after clicking the Crop icon. Click the Aspect Ratio icon and select the Square option.

Select the image part you want to retain by dragging it downward or upward. Once done, click the Apply button to apply the change.

Wait a moment until Gutenberg is done cropping the image. Once done, go to the settings panel. On the Styles settings block under the Block tab, simply select the Rounded option.

To resize the image, you can open the Image settings block. Or, or you can also do so by dragging the edge of the image on the Gutenberg editor.

To set the alignment of the image, you can simply click the Alignment icon on the settings bar. There is also a setting option to apply a duotone filter if you like it.

The Bottom Line

The Image block is intended to add an image to either a blog post or static page of WordPress. It is one of the default Gutenberg blocks. When adding an image using the block, you can apply some stylings, including turning the original shape into a rounded shape. The prerequisite to create a rounded image in Gutenberg is the original shape should be in a square shape. Gutenberg has a built-in feature to crop an image into a square shape so that you don’t need to use an external tool like Photoshop or GIMP only to crop the image.

How to Change Header on Page Scroll in Elementor

There are many header behaviors you can achieve with Elementor Pro. One of which is by changing a header with another one on page scroll. This article will show you how.

Elementor Pro, as you have known, comes with a Theme Builder feature to allow you to create a custom header on your WordPress site. Thanks to this feature, you no longer need to rely on what’s offered by your theme regarding header customization, which mostly limited. You can add any element you like, use any typography setting you want, and set any behavior to your liking.

Elementor Pro has a built-in setting option to add a sticky header. We will make use of this feature to create a changing header on page scroll. Custom CSS is also needed for this kind of header behavior. Here is the example of the changing header on page scroll.

Step 1: Create the Custom Header

Before getting started, make sure you have upgraded your Elementor to the pro version as Theme Builder is only available on Elementor Pro. You can get the pro version of Elementor Pro on its official website.

Once you are ready, go to Templates -> Theme Builder on your WordPress main dashboard. On the Theme Builder dashboard, hover your cursor over the Header tab and click the plus icon to create a new header template.

On the appearing template library, you can select a pre-made header template you like. Or, if you want to create the header from scratch instead, you can simply close the template library to open the Elementor editor. In this article, we will create the header template from scratch.

Start creating your header by adding a section and then add the necessary elements and make the stylings accordingly.

Once done adding the necessary elements and making the stylings, go to the Advanced tab. Under the Advanced settings block, set the Z index to 100 and add CSS class header-1.

Next, duplicate the section of the header you have just created above. The duplicated section will be your second header, which will appear when the page is scrolled down.

Edit the duplicated header. You can add other elements or remove the existing ones. You can also change the background. Anything you want. Once done editing, go to the Advanced tab. Under the Advanced settings block, rename the CSS class to header-2.

Next, open the Motion Effects block. On the Sticky dropdown, set to Top. You can set the effects offset on the Effects Offset field. The value you set here will determine the scrolling depth before the effect (sticky in this case) takes place.

Once done editing both sections of the header, change the order of them.

Edit the lower section and set the negative margin to make it lies above the upper section. To do so, go to the Advanced tab and set the top margin to about -65.

Publish your header by clicking the PUBLISH button on the bottom side of the Elementor settings panel. Add a display condition by clicking the ADD CONDITION button. Click the SAVE & CLOSE button once you are done setting the display condition.

Step 2: Add the Custom CSS

The CSS below is used to control the transition effect. You can add the CSS on theme customizer. Go to Appearance -> Customize on your WordPress main dashboard. On theme customizer dashboard, open the Additional CSS block and paste the following CSS snippet.

The CSS snippet:

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}

.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
 display: none!important;
}

Click the PUBLISH button to apply the change.

The Bottom Line

Elementor Pro comes with a Theme Builder feature in which you can use the feature to create custom templates for your theme parts, including the header. When creating a custom header using Elementor Theme Builder, you can set any behavior you like thanks to the ability to add custom CSS. Even without adding custom CSS, you can set effects like sticky and transparent.

Changing the header on page scroll itself offers some advantages.

For instance, you can use the secondary header (the header that appears once the page is scrolled down) to increase the chance your page will be shared by displaying only the social media sharing buttons on it.

How to Change the Default Post Category in WordPress

A brand-new WordPress installation includes a new post category called “Uncategorized”. It is a default blog post category. When you write a new blog post and forget to assign it to a certain category, WordPress will automatically include the blog post to the “Uncategorized” category. The “Uncategorized” category itself cannot be deleted unless you have set a new default category. The question is, how to change the default post category in WordPress?

In WordPress, category is one of the elements to sort blog posts, other than tag. Technically, category and tag are called taxonomies. You can create as many categories as you need. To add a new category, you can go to Posts -> Categories on your WordPress dashboard. From here, you can also edit and delete the existing categories. There is one category you can’t delete: the default category. You can’t delete the default category as category is one of the required WordPress components. You need to have at least one category on your WordPress site.

How to Change the Default Category in WordPress

To change default post category in WordPress, first, go to Settings -> Writing on your WordPress dashboard. Simply select a category you want to set as the default category on the Default Post Category dropdown. Make sure to click the Save Changes button to apply the change.

The Bottom Line

Category is one of the WordPress default taxonomies used to sort blog posts. Every WordPress website has a default category. Every blog post you write will be included to the default category unless you set it yourself. Category — as well as tag — are used to sort blog posts in archives. Every WordPress theme has a default template file (archive.php in most cases) that controls the layout of the archive pages. If you are willing to change the layout of the archive pages, you can simply edit the template file. Or, if you have no PHP knowledge, you can use a theme builder plugin like Elementor and Divi Builder to create a custom template for the archive pages (e.g., the category archive page) in a visual way.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.