Elements

Here’s introducing our very own JD Builder’s Form Element. Being a pro element it has almost all the features that you would ever need to create any kind of forms for your website from multiple emails to reCAPTCHA’s to Webhook integration, using Smart Tags & much more.

A quick preview of what the form element delivers is described as follows:

All the options related to element styling & configuration are under the main General tab.

Firstly we have the Basic tab, that has the following options:

• Admin Label- Add a custom label to the element to clearly identify it in the page back-end layout
• Add Field- Add the fields on your form such as text, text-area, calendar, radio, check-boxes and many more like such. To know more read the article.
• After adding any field you will have these common settings to fill in for each type:-
  1. Name: Enter the name of the field.
  2. Type: Choose what is the type of your field.
  3. Label: Give the label to your field that will be shown on front-end.
  4. Placeholder: Add a placeholder to the field for user’s clarity while filling the form.
  5. Required: Enable or Disable whether you want the field to be a required field or not.
  6. Width: Set the width of the field as compatible with the form’s layout style.

Next we have the Label Options that has these alternatives:

• Label- Enable or disable whether you want to show the field labels or not altogether.
• Required Mark- Enable or disable whether you want to hide or show the required mark on the required fields.
• Inline Label- Set all the fields & labels in a single line.
• Label Spacing- If inline label is disabled, then set the label spacing with the input field.
• Label Width- If inline label is enabled, then set the width between the label & input field.
• Label Color- Set all the label’s text color.
• Label Typography- Style the label’s typography via different typography options provided by the field.

Next we the options to style the input that the user enter’s on the form under Input Options:

• Input Size- Select the input field size Small, Medium or Large.
• Input Color- Set the input color that is each field’s input text/value color.
• Placeholder Color- Set the field’s placeholder text color.
• Background Color- Set the background color of the input field.
• Input Typography- Set the typography of the input text via the typography field.
• Border Styling Options- Style the field’s border via different border styling options.
• Box Shadow- Add box shadow to the input fields for better styling.

Every form contains the Submit/Send buttons, their styling options are listed under Button Options:

• Button Text- Enter the submission button text.
• Custom Class- Even add a custom class for styling the button.
• Button Type- Set the button’s type whether primary, secondary or link or any other type from the list.
• Button Size- Set the button’s size Small, Medium or Large.
• Alignment- Set its alignment Left, Right, Center or Block.
• Button Animation- Add animation to the button on click/hover.

• Button Icon styling options- You can even add an icon along with the button and style it as per the options available.
• Button Styling Options- Add the different colors to the button on normal.
• Button Hover Styling Options- Add the button’s hover colors.
• Button Border Styling Options- Style the button border & add the box shadow to just like any other element.

While the form is submitted with these options you can customize the submission message & style the error message all under Message Options:

• Success Message- Customize the form’s success submission message within the editor. You can even add the Smart tags here and style it as required.
• Text Color- Set the message’s text color.
• Background Color- Set the message’s background color.
• Border Styling Options- Style the border of the message box using different style such as Solid, Dotted or Groove & more such.

• Error Message’s Text Color- Set the message’s text color.
• Background Color- Set the message’s background color.
• Border Styling Options- Style the border of the message box using different style such as Solid, Dotted or Groove & more such.

 

Now comes the form styling options under Form Options, that are:

• Column Gap- Set the column’s distance each of the fields added.
• Row Gap- Set the distance of each field row, doesn’t matter how many elements are there in each row.
• Enable reCAPTCHA- Choose whether you want to enable or disable the form’s reCAPTCHA. If enabled style it under reCAPTCHA Options tab.

If you have enabled the reCAPTCHA option then its styling options are provided under reCAPTCHA Options tab that are given below, to know more read the article:

• reCAPTCHA Label- You can even add a label to the reCAPTCHA that appears on the form.
• Position- Set the position of the reCAPTCHA as per the form’s layout.
• Theme- Choose the theme of reCAPTCHA, Light mode or the Dark Mode.

Choose the action that your submit button will perform after form filling under Submit Options:

• Add Action- Choose the action of your submit button, such as Redirect, Admin Mail, User Mail or Webhook. Each of their configuration is described further.