Blog

How to Add Space Between WordPress Form Fields

Add Space Between WordPress Form Fields with RegistrationMagic

Proper spacing is quite important for a well-organized online form. Else users lose the patience and interest to read through it, forget filling it.  So, in order to add space between WordPress form fields, one has to use a user registration plugin with custom fields. 

A clean WordPress registration page gives ample space to arrange form data fields and other contents. Since a default WordPress form does not allow the addition of extra space, we take help of the RegistrationMagic plugin.

This WordPress user registration plugin offers custom fields to add into registration forms. The Spacing field is one of these fields that controls the CSS code to increase or decrease spaces between form fields.

We already discussed that spacing is crucial since it enhances readability. Moreover, proper spacing improves the appearance of your webpage; in this case, your form.

This WordPress user registration plugin with custom fields apart from adding extra space between form fields can create custom user area in WordPress.

Tips: From publishing forms to displaying user area on the frontend, the shortcodes of RegistrationMagic helps users perform many tasks easily. One only has to paste these specific shortcodes on a new WordPress registration page and publish them on their site.

So, let’s start our today’s tutorial that is aimed at adding space between WordPress form fields.

Navigating to the Spacing Field

First, install the RegistrationMagic plugin and activate it. You will find the plugin menu on your site dashboard. Now navigate to the “All Forms” page from this WordPress user registration plugin with custom fields.

space between WordPress form fields navigation

The All Forms page contains all the forms that you create through this plugin with the details of their registered users. Now, hover your cursor across any of the forms. You will find two links appearing at the bottom of each form – Dashboard, and Fields.

space between WordPress form fields dashboard

When you click on the Fields link, you will land on the Field Manager page. From the Add Field link at the top corner of this page, you can start adding new fields to your form. Each field that you add to a registration form through RegistrationMagic stays unique to it.

 

After clicking on the Add Field link, you will find a pop up with a list of custom fields to add to your form.

The Spacing field is part of the Display Fields in RegistrationMagic. Since it takes care of the appearance and content spacing of the form on the frontend.

space between WordPress form fields spacing field

Now, click on the Spacing link from the fields pop up and you will land on the Spacing Widget page.

Configuring Space between WordPress Form Fields

Now, on the Space Widget Settings page, you have to give a label to the field. This label does not appear on your form, it is just for the admin on the backend. You can also assign the CSS Class attribute if you want.

The CSS class attribute can only be included in the class if it is predefined in the coding file.

Fill the label as “Space” and then click on Add to Form.

space between WordPress form fields spacing widget

 

As you add the field to your form you will find this field with its label in the Field Manager page.

space between WordPress form fields field manager

You will find an arrow handler beside each field. With it, one can drag and drop fields and arrange them in any order that they like. Also, by clicking on the checkbox beside each field, one can even choose to delete or duplicate any field.

Publish Registration Form

After adding space between WordPress form fields, you got just one thing left, to view your form on the frontend. So, go back to the “All Forms” page on your dashboard and copy the shortcode from the cover of the form.

space between WordPress form fields all froms

Click on Add New from “All Pages” on your WordPress dashboard. Then, paste the form shortcode, name the page whatever you want and click on Publish.

space between WordPress form fields i staff from

Now that we published this form, let’s check out how it looks live on the site.

Given below is an image of the form before using the Spacing widget.

space between WordPress form fields form before

The image below is the same form after applying the spacing widget.

space between WordPress form fields form after

In the image given above, you can see the space widget between the Email and Designation (radio button) fields. It has come out just the way we set it on the backend.

Thus you see without applying much web designing skills we could create a clean and spacious WordPress form design.

You can add this space between WordPress form fields anywhere on the form. Similarly, users can add timer to WordPress forms through this WordPress user registration plugin with custom fields.

Tips: The custom fields of RegistrationMagic allows you to embed form metadata to your WordPress form. So that, you can show your users the number of successful submissions etc. on the form.

Spacing Usage in Forms

The spacing widget comes in use when your form has various fields or long text fields that require a lot of space. Cleanliness appeals to the eye. Thus, when a user finds a balanced spaced-out form while signing up they develop a positive impression about your site.

Generally, users don’t prefer registration forms with too much content or fields. But if you have to have a content heavy form on your site, make sure it is appealing. That’s why the Space widget works like magic on registration forms. But make sure, you use it wisely. Too much space can also distract a user if he/she has to scroll too much while reading it.

So, if it is an event registration form where you have long paragraphs describing the various event modules, use the Spacing field to demarcate each of them.

Moreover, if you want your users to register to your site quickly then RegistrationMagic offers one more smart way to do that. Janrain released a study by Blue Research stating, 66% of users find social login option as an attractive solution to reduce manual work. So that, their basic data is fetched from their social media accounts directly to complete the sign up process.

Tips: RegistrationMagic offers easy external integration of social accounts. Thus you can allow your users to autofill contact form fields from their social profiles.

Making Development Easy

So, you saw it was a mere cakewalk to add space between form fields with RegistrationMagic. This plugin takes care of all the hassles to code or design forms. Moreover, there are multiple fields and login options available for every form. Besides, it gives various smart ways to the admin for managing users. With time, it provides exciting updates to enhance its functionality. Reason enough to become one of the most popular plugins to create online forms.

For more details on RegistrationMagic, feel free to visit our Knowledgebase.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares