Form Builder

PAFE Form Builder has 3 widgets, Field, Submit, Multi Step Form, so you can easily customize the layout, can insert any other widget in a form. PAFE Form Builder has many great features such as Booking, Multi Step Form, PDF Generator, Repeater Fields, Conditional Logic, Calculated Fields, Stripe Payment, Strip Payment Subscriptions, Submit Post support ACF, Toolset, JetEngine, Edit Post, Woocommerce Add to Cart, Dynamic Pricing, Checkout with Woocommerce, Remote Request, Image Select, Range Slider, Google Sheets Connector, Form Database, MailChimp, ActiveCampaign…

Demo

Template Json Files

Please extract zip files before importing.

How to import Elementor Templates

repeater-fields-multi-level-nested

calculated-fields-conditional-logic-woocommerce-checkout​

loan-calculator

multi-step-form

register-login-form

submit-post

coupon code field

date range calculated fields

Calculated Fields + Conditional Logic + Woocommerce checkout

Website Design Package

Show Gift Select Field if Choose Unlimited Page Package

Daily Visitors

Set Hosting Plan 2 if Daily Visitors >= 3000, Hosting Plan 3 if Daily Visitors >= 6000






The form was sent successfully.
An error occured.

Multi Step Form

1
2
3

Where are you going ?

Which styles would you prefer for your trip?


Your Information











The form was sent successfully.
An error occured.

Tutorial

To begin, go to Elementor Panel > Elements > PAFE Form Builder. Use Field Widget and Submit Widget to create your Form.

Field Widget

Content Tab

Field Section

  1. Form ID* (Required): Enter the same Form ID for all fields in a form, with Latin characters and no space. E.g. order_form
  2. Field ID* (Required): Field ID has to be unique in a form, with Latin characters and no space. E.g. your_field_id
  3. Shortcode: [field id=”your_field_id”]
  4. Type: Text, Email, Textarea, TinyMCE, URL, Tel, Radio, Select, Select Autocomplete, Terms Select, Image Select, Google Address Autocomplete, Checkbox, Acceptance, Number, Date, Time, Image Upload, File Upload, Password, HTML, Hidden, Range Slider, Calculated Fields, Stripe Payment, Honeypot

Special Fields

Image Select

You can set One Selection or Multiple Selection. Customize styles at Style Tab


Range Slider

Range Slider Options: skin: “round”, type: “double”, grid: true, min: 0, max: 1000, from: 200, to: 800, prefix: “$”

Range Slider Options: skin: “round”, type: “single”, grid: true, min: 0, max: 1000, from: 200

More options : http://ionden.com/a/plugins/ion.rangeSlider/api.html

Calculated Fields

You can calculate complex formulas with Math, e.g Math.pow([field id=”a”]*[field id=”b”],2) . Click here to view more




Total Price: $

Stripe Payment

Stripe Subscriptions

Google Address Autocomplete


Select Autocomplete

Note: When you are logged in, the Options list has the incorrect top position. Please log out to see.

Image Upload

You can set single or multiple images upload

TinyMCE

You can add text, images, videos

Number

You can add (-/+) button to number field


Conditional Logic

Show a field and set value to a field

Edit Pizza Size Field > Conditional Logic

Show a Section by Field value

Edit Section > Advanced Tab > PAFE Form Builder Conditional Logic

Submit Widget

Button Section

  1. Form ID* (Required): Enter the same Form ID for all fields in a form, with Latin characters and no space. E.g. order_form
  2. Type, Text, Icon: It looks like Elementor Pro Form Widget

Actions After Submit

Submit Post, Edit Post. Integrate ACF, Toolset, JetEngine

Shorcode Delete Post

Woocommerce Add to cart, Dynamic Pricing, Check out with Woocommerce

Remote Request

Email

It works like Elementor Pro Form Widget

Email 2

It works like Elementor Pro Form Widget

Redirect

It works like Elementor Pro Form Widget

Webhook

It works like Elementor Pro Form Widget

Popup

It works like Elementor Pro Form Widget

Open Popup
Close Popup
Stripe Payment​

reCAPTCHA V3

Go to Your WP Dashboard > Piotnet Addons > reCAPTCHA (v3) Integration. And then Go to Edit Submit Widget > reCAPTCHA V3 > Enable.

Conditional Logic

It looks like Conditional Logic Field. You can show submit button if Value of the Field not empty, equals, <, >=…

Google Sheets Connector

Stored all records to Google Sheets

WooCommerce One Page Checkout

Booking

Register and Login

Repeater Fields Multi Level Nested

Multi Step Form

  1. Create Step 1, Step 2, Step 3 templatesGo to Your WP Dashboard > Elementor  Templates > Saved Templates > Add New > Type : Section > Name : Step 1. And then create Step 2, Step 3,…
  2. Go to Elementor Panel > Elements > PAFE Form Builder. Use Multi-Step Form Widget.
  3. Form ID* (Required) Enter the same Form ID for all fields in a form, with Latin characters and no space. E.g. order_form
  4. Add Step Item > Enter Step Title > Enter Step Template Shortcode


Multi-Step Form has many features like Submit button PAFE Form Builder and Scroll To Top when Click Next and Previous

Stripe

Stripe Subscriptions

Example:

  1. Create Plan Selection Field with Options: 3 months, 1 year
  2. Create 2 Amount Fields – Hidden Field or Calculated Field, one for 3 months and one for 1 year.
  3. Amount Field for 3 months has Field ID “amount”
  4. Amount Field for 1 year has Field ID “amount2”


Submit Post

Shortcode Delete Post: You should add this shortcode into Single Template


Submit Post With ACF Repeater Field

Form Database

Stored all records to Database. Go to Your WP Dashboard > Piotnet Addons Menu > Form Database

Hooks

Filter Hook Before Submit:

  • apply_filters( ‘pafe/form_builder/fields’, $fields );
  • apply_filters( ‘piotnetforms/form_builder/form_settings’, $settings);

Filter Hook for Stripe metadata:

apply_filters( ‘pafe_customs_metadata_stripe’, $fields_metadata );

Action Hook after submit:

  • do_action(‘pafe/form_builder/new_record’,$record) .
  • $record ($fields) is an array of fields, e.g
    array(
        array(‘label’=>’Email’, ‘name’=>’email’, ‘value’=>’support@piotnet.com’) ,
        array(‘label’=>’Message’, ‘name’=>’message’, ‘value’=>’Hello’)
    )