WordPress knowledge sharing

How can I add a contact form for Kadence topic?

Kadence Form yes Kadence Theme The built-in contact form block can be used in articles/pages and other publishing blocks. The contact form is very important as a function of website and visitor communication. In this article, Weiss notes share how to add and set the contact form for the Kadence theme.

Kadence Theme Click me directly The Kadence pro theme is based on the Gutenberg editor. It can quickly build a website without extra code, and Xiaobai can also get started quickly. Getting Started Click How to quickly build a website with Kadence theme For more Kadence topics, see Kadence Topic
For learning and small websites, choose servers with 1 core and 2g configuration to start, and for foreign theme websites, choose 2-core and 4g configuration to run smoothly.
Domestic servers: Alibaba Cloud Tencent Cloud (All have vouchers, which can be used to save money when paying) I don't know how to select regions and configurations. Please add Laowei Research on the right side of the page.
Foreign trade, B2C/C2C and other websites register domain names abroad. open Namesilo official website , enter and select in the search box, and then register. Remember to use the discount code to save money. Discount code click Course of domain name registration of foreign domain name provider Namesilo obtain.
Suggested choice of foreign trade website Hostinger virtual host , the price is cheap and the performance price ratio is very high! Hostinger topic
Select SiteGround virtual host Moderate price, good service! SiteGround Theme

1、 Kadence Contact Form

The prerequisite for using Kadence form is to use Kadence block free block plug-in.

If you can Kadence Theme It would be great to match it.

2、 Kadence Add Contact Form

The form block of Kadence theme is called "form", and it is called "form" in English. Literal translation is too unreliable. The forms are more direct, which made Lao Wei look for it for a long time. You can also search "form" faster.

Click "Form" and the default form will appear on the right, including name, email and message.

 Kadence Add Contact Form

3、 Kadence Contact Form

The form name and quantity can be modified or added as required.

You can create any number of custom fields, copy rows, resize columns, and select whether they are required fields.

Kadence contact form has many function items and can find many long parameters. Lao Wei simply summarizes them as follows:

  • Field types: text, email, textarea, accept, select, phone, check box, radio, hidden.
  • Text, email and textarea are all used for text input.
  • Acceptance is a radio box, selection is a multiple option, and radio is another radio box.
  • The fields of each selection box can be switched as required.
  • The basic honeypot spam check is enabled by default, and the Google verification code can also be added. You need to add a key API.
  • Each field can select whether to fill in, add a label, display a label, placeholder characters, default input characters, help text, column width, and field error information prompt.
  • There are many actions after the form is sent: submit to the specified email address, jump to another url, automatically reply to the email, record each form submission, add it to the CRM list, send it to the mailchirp list, and send it to any third-party webhook.
  • Enables the form border shadow effect.
  • Customize the label color.
  • Verify error messages, message colors, etc. after submitting the form.
  • The form is animated when the About Us page is opened.
  • There are also many settable items for the submit button. Old Wei thinks this is a highlight, and the customization functions are too rich.
  • Adjust the field layout style, including background color, border settings, font style, button settings, field line spacing, etc.

There are too many functions available to list. Kadence forms basically have all the functions that WordPress form plug-ins can do.

4、 Kadence form recording function

If you check Action and submit it (multiple choices are allowed), it is recommended to check Email and Database Entry at the same time. The latter is actually a database form storage.

stay Kadence block pro The recorded form content can be seen in.

 Kadence form recording function

One form record plug-in is used less, and the third-party form plug-in itself saves two plug-ins.

5、 Kadence Form Case

On the basis of the original default form, Lao Wei added 2 fields, changed the layout and redesigned the compact form.

The PC end effect is shown in the figure below:

 Kadence Form Case

The "Company Name" and "Phone" fields are copied from the name and email respectively, and then their tag names and domain types are modified.

Set the column width of these four fields to 50%, so that two fields in each row are displayed side by side, which is much better than the previous layout of one row and one column.

But later, Lao Wei found that the mobile terminal also showed this way. The mobile phone screen was not big, so it was very cramped.

Therefore, the column width at the moving end of each field is changed back to 100%.

 Single column width of Kadence mobile terminal table is 100%

Then it will be better to check the mobile terminal again.

 Kadence mobile end form effect

The flat end is also modified in a similar way, changing to the layout you want.

6、 Kadence Form Add Privacy Policy Link

A default privacy policy page has been added after WordPress 5.0.

There are two ways to add privacy policy links in Kadence form.

First, add a new field to the form (or copy the previous field and change it to "Accept" type), and view the privacy policy by naming it.

  • Enable "Required": required or not;
  • Enable "Link with policy": add a hyperlink on the acceptance field. You can customize the text and URL of this link;
  • The URL link is valid only when you enter an in site URL (the out site URL is invalid);
  • Enable Start Check: checked by default;

7、 Kadence Form Background

You can add a background to the form using the Kadence office block.

Create a row with a full width background image, and then drag the contact form to a column of that row.

Set the background color for the column and adjust the opacity as needed.

8、 Kadence Form Summary

The functions of Kadence form are too rich. Old Wei didn't explain each function in detail, because there are too many to talk about.

If you have used any third-party form plug-in before, such as Elementor Pro Product Inquiry Form Elementor Contact Form Contact form 7 plug-in WPForms Form Plug in Ninja Form plug-in Gravity forms These common popular form plug-ins will soon start using Kadence forms.

Advantages of Kadence form: If you have used third-party form plug-ins before, most of them need to install several additional "plug-in plug-ins" to achieve more functions, such as jump after submission, save to the database after submission, etc.

In addition to the Kadence block pro required for the form recording function, the above basic functions are included in the Kadence form. No additional plug-ins need to be installed, so the web page loading speed is faster.

So if you use Kadence to build enterprise websites, foreign trade websites and cross-border e-commerce websites, Kadence forms can be completely self-sufficient. You can try it.

Like( one )
Article name: How to add and set a contact form for Kadence topic
Article link: https://www.vpsss.net/28441.html
Copyright notice: The resources of this website are only for personal learning and exchange, and are not allowed to be reproduced and used for commercial purposes, otherwise, legal issues will be borne by yourself.
The copyright of the pictures belongs to their respective creators, and the picture watermark is for the purpose of preventing unscrupulous people from stealing the fruits of labor.