How To Create Custom Forms In WordPress

Forms enable you to collection information from your site visitors. Whether it’s registering for an account, logging into your site, giving you feedback about your product, contacting you, or signing up for your newsletter—you collect the data through forms.

With WordPress, it’s quite easy to integrate a form in your website. Most themes will provide you with common forms like login, register and contact us right off the bat.

The problem, though, is that you might not like the ones included by default. Perhaps you want one that blends better with your overall theme or collects other data,

In this article, I’ll show you how to create nice-looking forms that match your theme’s design and color scheme without having to write any HTML or CSS code.

Install a WordPress Membership Form Plugin

There are dozens of free and paid plugins that you can use to create custom forms. In this example, we’ll use a free plugin named Ultimate Member.

The best thing about this plugin is that it creates everything for you—forms, pages, email newsletters and so on. It also has a super customizable form builder that provides a vast collection of fields types (eg. date picker and file upload), as well as thousands of icons that you can include in your form to make it eye-catching.

Before we get started, you’ll need to first install the plugin. To do that, follow these steps:

  • Sign in to your WordPress admin dashboard.
  • Navigate to Plugins > Add New
  • Use the search bar to search for “Ultimate Member
  • Install and activate the plugin(the highlighted option in the image below)
Ultimate Member PluginUltimate Member PluginUltimate Member Plugin
Ultimate Member Plugin

Once the installation completes, you’ll find the Ultimate Member tab on your dashboard. Navigate to Ultimate Member > Settings to see all the options.

Custom Pages and Newsletter

As I mentioned at the start of this article, the Ultimate Member plugin helps in creating the different kind of pages you’d typically need in your website.

Sample pagesSample pagesSample pages
Sample pages

You can also include newsletter sign-up prompts in your website and customize the welcome email (Account Activation Email) to suit your taste.

Welcome email templateWelcome email templateWelcome email template
Welcome email template

You can customize the various pages and forms from under the Appearance tab. Now, let’s see how to create forms in your website.

Creating Forms

Navigate to Ultimate Members > Forms in your WordPress dashboard. There you should find the default Login, Register and Profile forms.

FormsFormsForms
Forms

You can edit one of those forms or create a new one from scratch. Clicking on edit on any of the forms will take you to the form builder.

Form fieldsForm fieldsForm fields
Form fields

Here we have fields for username, first name, last name, email address and password. The first four are all text boxes, whereas password is a field of type password—like a text field but but with masked input.

You can add a new field or customize an existing field. To customize an existing field, you simply click the pencil icon next to the field name and a modal containing the field details will appear.

Edit fEdit fieldieldEdit fEdit fieldieldEdit fEdit fieldield
Edit field

Here you can see a bunch of input customization options. You can get more information on each option by hovering on the question mark icon above it. That will display a tooltip.

To add a new field, click the + icon below the other fields to open the fields manager.

Field typesField typesField types
Field types

Choose the type that matches what you want to collect using that input. You can also choose a custom field below (if you have previously created any).

After choosing your field, a new modal will be displayed where you are to provide details about your input (title, placeholder, etc.) and add an icon. Once you’re done, click the Add button to add the field to your form.

To see how the form like, click on the Live Preview button located at the top of the form builder.

Live Form PreviewLive Form PreviewLive Form Preview
Live Form Preview

You can also add things like margin, padding, border color, border radio or even link a CSS class to each input using the row editor (click on the pencil icon just beneath Live Preview).

Edit rowEdit rowEdit row
Edit row

With these tools, you can easily create appealing forms and make them blend with your overall theme design.

Conclusion

Though there are many other plugins that you can use to create forms, Ultimate Member is definitely among those with the richest features. Not to mention that it’s free!


This content originally appeared on Envato Tuts+ Tutorials and was authored by Kingsley Ubah

Forms enable you to collection information from your site visitors. Whether it's registering for an account, logging into your site, giving you feedback about your product, contacting you, or signing up for your newsletter—you collect the data through forms.

With WordPress, it's quite easy to integrate a form in your website. Most themes will provide you with common forms like login, register and contact us right off the bat.

The problem, though, is that you might not like the ones included by default. Perhaps you want one that blends better with your overall theme or collects other data,

In this article, I'll show you how to create nice-looking forms that match your theme's design and color scheme without having to write any HTML or CSS code.

Install a WordPress Membership Form Plugin

There are dozens of free and paid plugins that you can use to create custom forms. In this example, we'll use a free plugin named Ultimate Member.

The best thing about this plugin is that it creates everything for you—forms, pages, email newsletters and so on. It also has a super customizable form builder that provides a vast collection of fields types (eg. date picker and file upload), as well as thousands of icons that you can include in your form to make it eye-catching.

Before we get started, you'll need to first install the plugin. To do that, follow these steps:

  • Sign in to your WordPress admin dashboard.
  • Navigate to Plugins > Add New
  • Use the search bar to search for "Ultimate Member"
  • Install and activate the plugin(the highlighted option in the image below)
Ultimate Member PluginUltimate Member PluginUltimate Member Plugin
Ultimate Member Plugin

Once the installation completes, you'll find the Ultimate Member tab on your dashboard. Navigate to Ultimate Member > Settings to see all the options.

Custom Pages and Newsletter

As I mentioned at the start of this article, the Ultimate Member plugin helps in creating the different kind of pages you'd typically need in your website.

Sample pagesSample pagesSample pages
Sample pages

You can also include newsletter sign-up prompts in your website and customize the welcome email (Account Activation Email) to suit your taste.

Welcome email templateWelcome email templateWelcome email template
Welcome email template

You can customize the various pages and forms from under the Appearance tab. Now, let's see how to create forms in your website.

Creating Forms

Navigate to Ultimate Members > Forms in your WordPress dashboard. There you should find the default Login, Register and Profile forms.

FormsFormsForms
Forms

You can edit one of those forms or create a new one from scratch. Clicking on edit on any of the forms will take you to the form builder.

Form fieldsForm fieldsForm fields
Form fields

Here we have fields for username, first name, last name, email address and password. The first four are all text boxes, whereas password is a field of type password—like a text field but but with masked input.

You can add a new field or customize an existing field. To customize an existing field, you simply click the pencil icon next to the field name and a modal containing the field details will appear.

Edit fEdit fieldieldEdit fEdit fieldieldEdit fEdit fieldield
Edit field

Here you can see a bunch of input customization options. You can get more information on each option by hovering on the question mark icon above it. That will display a tooltip.

To add a new field, click the + icon below the other fields to open the fields manager.

Field typesField typesField types
Field types

Choose the type that matches what you want to collect using that input. You can also choose a custom field below (if you have previously created any).

After choosing your field, a new modal will be displayed where you are to provide details about your input (title, placeholder, etc.) and add an icon. Once you're done, click the Add button to add the field to your form.

To see how the form like, click on the Live Preview button located at the top of the form builder.

Live Form PreviewLive Form PreviewLive Form Preview
Live Form Preview

You can also add things like margin, padding, border color, border radio or even link a CSS class to each input using the row editor (click on the pencil icon just beneath Live Preview).

Edit rowEdit rowEdit row
Edit row

With these tools, you can easily create appealing forms and make them blend with your overall theme design.

Conclusion

Though there are many other plugins that you can use to create forms, Ultimate Member is definitely among those with the richest features. Not to mention that it's free!


This content originally appeared on Envato Tuts+ Tutorials and was authored by Kingsley Ubah


Print Share Comment Cite Upload Translate Updates
APA

Kingsley Ubah | Sciencx (2022-11-09T14:01:26+00:00) How To Create Custom Forms In WordPress. Retrieved from https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/

MLA
" » How To Create Custom Forms In WordPress." Kingsley Ubah | Sciencx - Wednesday November 9, 2022, https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/
HARVARD
Kingsley Ubah | Sciencx Wednesday November 9, 2022 » How To Create Custom Forms In WordPress., viewed ,<https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/>
VANCOUVER
Kingsley Ubah | Sciencx - » How To Create Custom Forms In WordPress. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/
CHICAGO
" » How To Create Custom Forms In WordPress." Kingsley Ubah | Sciencx - Accessed . https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/
IEEE
" » How To Create Custom Forms In WordPress." Kingsley Ubah | Sciencx [Online]. Available: https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/. [Accessed: ]
rf:citation
» How To Create Custom Forms In WordPress | Kingsley Ubah | Sciencx | https://www.scien.cx/2022/11/09/how-to-create-custom-forms-in-wordpress/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.