How To Create Custom Forms In WordPress

Date:


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 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!



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Share post:

Subscribe

spot_imgspot_img

Popular

More like this
Related

Podcasts For UX Designers — Smashing Magazine

Podcasts are a fantastic opportunity to get up...

How this Series A startup used Webflow to turn their website into their best marketing asset

In the past 5 years, legislators worldwide have...

Prioritizing What to Test and When

For most SEOs, testing isn’t a novelty idea anymore....