When we build an independent website, in our website, such as Contact Us, or some tob sites, we often add some contact forms with an effect similar to this. Well, we have shared another form plug-in with you before, which is contact form 7 is the form plug-in we see now, but there is a problem with this form plug-in. After we open it, we will find that it uses shortcodes when setting up the form. For example, we want to insert a text form. , we will directly insert such a text shortcode, but the effect displayed by the shortcode is not particularly good. For example, our name often does not need to be long. We hope that the name and email address will be placed together. Well, if you don’t know the front end, you won’t be able to modify it.

contact form 7 form editing interface

Introduction to the wpforms plugin:

In fact, when we build an independent website, we will also use another very famous form plug-in called WPforms. This plug-in is visual, and we can directly drag and drop the form module inside. Now, we will demonstrate it to you. If you have WPforms installed, then this contact form 7. Just delete it; they both have the same function.

Introduction to the wpforms plugin

Install wpforms form plugin:

Now, we install the plug-in similarly, click upload, and select the plug-in we have prepared on the desktop. Its latest version is 1.84. If it has a version update later, you can download it directly from the article about learning to build a website. That’s it.

Of course, a Chinese package is also provided. We don’t need it now because when we use an independent website, we usually use English and click to open the installation. After the installation is completed, we can then activate this plug-in. After successful activation, it will enter such an interface. It adds a function to our left side.

Install wpforms form plugin

The wpforms plugin sets the settings interface;

First, we go into the settings and click settings. Then, this form plug-in will have some simple settings. First, we see the current plug-in. It is activated, and then it will have some default settings. We don’t need to modify the settings.

wpforms plugin settings

The other one is our sending email, so we can also modify the format of this email so that under normal circumstances, we default to it, and it can be displayed normally. There is also a process of imitating garbage. For example, if some people fill in our forms randomly, then at this time, we can identify whether they are robots. This is mainly a function.

wpforms plugin validation

There are also some other settings. We can take a brief look at them. This is for after you send the email, it will have a description, such as which items are required. Then, if you do not fill in any item, for example, The email is set to the required fields. If you do not fill in the email, he will tell you that the email is required. There are also some other instructions. For example, if you send successfully and fail to send, there will be some explanations. Of course, there are. If the text is normal, we can use it by default.

wpforms form information notification

We will not generally use this form to pay. Some other settings can be used by default, and there is no need to set them.

Create forms using  wpforms;

The form function we mainly use here, we open all forms, first we create a form, click add new, and then it will enter the form setting interface. This interface is very simple. For example, first we set a For example, you can set a form name casually, but this name will not be displayed in the front desk. It is just normal that when you display it to the front desk, it needs to call this name. We can use English or Pinyin.

wpforms form creation

There are two options. The first option is to create a blank form. The second option is to use the template. At present, we see that there is a simple template here. We can preview it directly. It is To display this format. When we see these two contents, they will be displayed in one row. This is the default. It is no different from creating it ourselves, so we go directly to create a new form.

The biggest difference between this form and Contact Form 7 is the visualization. For example, you can drag and drop all the modules on the left. Here, we will demonstrate this to you. For example, my form needs to fill in the customer’s information. For example, I just select Name and then drag it here, and it will appear as an input box for the name.

wpforms form item additions

After dragging the input box in, we can also drag other things. For example, we can add another email, EMAIL, or a phone number. Of course, we can also add text to explain these. You can just add them all.

After adding it, we will preview it. We need to save it, and then we will refresh it.

wpforms form frontend demo

wpforms form module layout settings;

Well, this form displays this format. You can drag and drop the content here, which is more convenient than contact form 7. Then, we can modify and set each option. For example, we will enter the editing interface if we click Edit. There are several options in the editing interface. The first one is its header. You can select it. Here, enter its name and user name. For example, our user name is here, and its display format is below. , because foreign names are generally composed of two parts. Of course, you can also set it to one according to your needs. Here, we simply set it. There is also a description below. For example, you can tell him What to enter here is explained below.

wpforms form module layout settings

The last one is a required item. Is this item required? If you select a required field and it is empty, it will not be submitted. There are also some advanced options. The advanced options are to set its size and some content, including adding some CSS styles. There is another logic below. What does this logic mean? If we open it, should this form module be displayed? For example, if we display it normally, we will give it a condition for display. For example, only after you fill in the number will it be linked to the form module. Only after you fill it out, if it is empty, will it be displayed.

So, if we save it, the final result is that we can’t see the username because it will only be displayed after filling in the numbers. We can save it and refresh it, and we will see that it is not there. Where we enter the name, if we just enter some numbers here, it will be displayed, so it means a logical option.

Of course, this depends on your own needs. If you don’t need it, just turn it off. Then, the other options are similar. For example, in the second one, it is the same when we enter EMAIL. We can set a header here, then describe whether it is a required item and whether this email must be confirmed. That is, it enters an email address, and then a confirmation box will appear here. It must send a verification code and then fill in the correct one before the form can be submitted. Normally, Under normal circumstances, we will not set it up like this. Unless it is some special content, we need it in advance. Its style also has a logic, and the setting logic of all modules is exactly the same.

wpforms form item settings

We see that the name below is also the same. Is it a required field? If it is a required field, add a prompt symbol and then add logic to its advanced options. Other modules are similar. Just add them according to your own needs.

Sometimes, we need a situation in these settings. For example, we need to put the email address and user name in one row instead of two because the name is short. At this time, we can use it. In the layout module, we see a layout. We pull this layout over first. After pulling it over, it is first divided into two columns. We can put our name on the left and the email on the right. Then, we can also edit the width of this area. For example, we can make the left side wider and the right side narrower, or the left side narrower and the right side wider. Just set it like this. After setting it, save it and then refresh it. It will be displayed as a row, but below is the mobile phone number, so of course, you can adjust its width; just set it in its style.

For example, let’s edit this one and then display it as a row. In this case, we don’t need any front-end knowledge, and we can design a very beautiful form.

There is also a setting, and the setting is its rules. First of all, the name of your form and the description of the form are only here if you can see it. Below is a submit button. We now see that the submit button is called submit so that you can set it to other content. Okay, after submission, there will be a waiting process. There are some advanced options below, such as adding some CSS styles. Then there is another one below: Ajax submission means that the page will not be refreshed when we submit this form. All Ajax means this. Submit on this page without changing the link address.

There is another one below that is part of the settings we talked about before. We add an anti-bot operation to it. Normally, we would use Cloudflare, which is free. After setting it up, of course, we need to follow some of the requirements here. Then, we apply for an account. After the application is completed, you fill in the account number, and the effect will be like this.

34

When people fill it out, it will automatically determine whether it is a robot. If it is a robot, the submission will be unsuccessful. good. There are also some reminders in our settings. After it is submitted successfully, it will have some instructions, including instructions on sending emails and which one you use to send emails. Of course, this form is just a style. To submit, we need to normalize this function. We also need to use SMTP because we have told you before that the email submission system of WordPress PHP will often fail or go into the trash, so normally, we need to fill in our own sending email address. We need to check it out, Such as a plug-in for SMTP configuration.

The last one is the submit button. After the submission is completed, we can explain it to him. Thank you for your submission and for contacting us. We will contact you as soon as possible. This is such an explanation.

35

How to insert the form created by wp forms into the stand-alone page;

The other contents are some extended functions, which are normal outside the form, and we don’t need them. After setting up this form, we see that after this form is set up, it will have a short code, and then we can click the short code, and this short code will automatically help us create a page, and then put it here Inside the page, this is one way.

Of course, another way is to turn it off. After turning it off, we see it will have a short code here. Then we can put this short code wherever we want, for example, we Now copy the shortcode, and then we create a new page. We can fill in a random name for this page and add a shortcode below. We can use the shortcode in Gutenberg, of course, we can also use other ones. , then we put this shortcode here, after pasting it, and then publish it successfully, then we open the newly created page, and this form will be displayed.

36

Of course, after this form is displayed, you can also return to the settings we just made and modify them. This is also possible. This is about using wpforms, a very famous form plug-in.