Take control of your form’s look with the new Field Layout option

Tutorial 27 Replies

In Visual Form Builder, you can now customize the layout for the fields in your form by using the Field Layout option.  This is an easy way to tweak and control the look and feel of your form without having to write a bunch of new CSS.  Today, I’m going to go over how to use this powerful new feature.

Where is the Field Layout option?

All fields except for Fieldsets, Sections, and Instructions will include a Field Layout dropdown, seen below.

Field Layout option

Default Layout – Single Column

By default, all fields will be arranged in a single column.  If you have a particularly long form, or just want to change up the look to make your style, this may not be an ideal layout.

Default field layout

Left/Right Half – Two Column

To achieve a two column look, we will need to assign the Field Layout options as either Left Half or Right Half, depending on where you want that field to go.  On my example form, I change the Name item’s Field Layout to be Left Half and the Email item’s (which is arranged directly beneath Name) Field Layout to be Right Half.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Half field layout

Left/Middle/Right Third – Three Column

We can arrange even more fields on a single line using the Left, Middle, and Right Third option.  On my example form, I have three fields I want placed in one line: Start Date, End Date, and Number.  Start Date will be Left Third, End Date will be Middle Third, and Number will be Right Third.

It’s important that the three fields are next to each other in the form builder in order to achieve the correct look.

Left/Middle/Right Third field layout

Left/Right Two Thirds – Mixed columns

The last option allows us to stretch one field across two thirds of the form.  This is useful when you have one field that needs to be longer than the other on the same line.  The way we achieve this is by combining a Left/Right Two Third with a Left/Right Third.  On my example form, I will assign the URL as Left Two Third and Phone as Right Third.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Two Thirds field layout

If you wish to have the larger field on the right, simply use a Left Third with a Right Two Third.

Final Result

As you can see, our final result is a much smaller footprint for this form.

Customized fields using the Field Layout option

If you have any questions, please let me know!

27 thoughts on “Take control of your form’s look with the new Field Layout option”

  1. hi!

    very cool script, thank you!

    bit is there a way not to store the attachment as wp-media, just send als email?

    would be great!

    best, matthias

    Reply ↓

    1. Up until the latest version, it only stored the attachments in your wp-uploads folder. Now, however, it displays them in the Media Library. I’ll see what I can do about making it optional, but there’s no timeline on that.

      Reply ↓

      1. Hi, i see that it’s not so important ;-)
        The media entry was not stored when i commented out lines 2430->2442 in file visual-form-builder.php and changed the link to the plain filename in line 2455, but i don’t know how this impacts the security.
        Btw: maybe there is a way to store the files outside the regular wp upload directory (or only send as mail which would be best) because then website data (images/pdf/…) gets mixed with user uploads from contact form.
        best regards, matthias

  2. I’m in the process of redesigning our company’s site. I am trying to replicate the Contact Us form as well as another form. Where I am getting confused is the submit button. Where or how do I set it up to tell it where to submit the form upon completion? Also, what is the verification field about? Clearly I’m missing something but I just don’t know what that is at the moment.

    Your help is appreciated.

    Reply ↓

    1. The example form that’s in the picture does not include the Verification section (which includes the Submit button).

      The Verification section is a simple logic-based captcha system that deters SPAM. It is automatically included on every form.

      Let me know if you have any more questions.

      Reply ↓

    1. I assume you are talking about the Free version of the plugin based on the version numbers you reference. The Free version does not integrate with PayPal, so I’m not sure what the problem is. My first guess is that the jQuery versions between 2.0 and 2.2 were updated and there may be something configured for that person that caused the issue.

      Reply ↓

  4. Hi I am very new at this so bear with me please. This is the Pro version not the free one. How do I attach Paypal to the form? there is nothing there indicating like the others except currency.
    Thanks

    Reply ↓

  5. Hi – first I like to apologize that I didn’t start a post of my own, but although I am logged in and a Pro user, I can’t make a new post.

    I too have problems with lining the fields up… I fear the theme CSS is playing havoc with the FormBuilder…?
    i would appreciate a look: http://www.bamboobalibonaire.eu/?page_id=126

    Thanks, Eric

    Reply ↓

    1. Looks like some conflicting CSS in your theme. If you look in your style.css file, around line 783-786, you’ll see these styles are causing some issues:
      .content-wrap ul.paging, .content-wrap label{float:left;}
      .content-wrap label{margin:18px 10px 0 0;padding: 0;}

      Either remove those or fix them to where they don’t interfere and you’ll be good to go.

      Reply ↓

  6. Hi Matthew.

    Just upgraded to pro, lovely to be able to disable the spam option.
    Another issue for me is that I translated almost every error message, except for the incorrect phonenumber entry.

    I already created a .js file and added the ‘phone’ line in it as you can see below:
    ——————
    jQuery(document).ready(function($) {
    $.extend($.validator.messages, {
    required: “dutch translation for required field”,
    email: “dutch translation for incorrect email address”,
    phone: “dutch translation for incorrect phonenumber”
    });
    });
    ———————
    However the phone error message stays in English stating that:
    “Please enter a valid phone number. Most US/Canada and International formats accepted.”
    The email error message is in Dutch thus working though.
    Is there a right way to also change this Phone error message into Dutch?

    Reply ↓

    1. The reason the Phone field isn’t being translated is because it’s not part of the default validator plugin. I added that method myself. I’ll look into how that gets registered so you can translate it using the .extend method.

      Reply ↓

  7. Matthew – If you have shown 5 radio buttons within a single question, is there a way for the customer to select more than one Radio Button at a time for there answer. It appears by default you can only choose one at a time per question – Terry

    Reply ↓

  8. Hi Matthew, thanks to you I solved my column problem. But I still have one more question. I’m using upgraded pro version. I’m making an application form for an exhibition. And each participator may submit up to 5 projects. (I made sections like Project 1, Project 2,..) And also they must submit some informations about this projects too. (under the Project 1 section, I put text fields, checkbox, file upload,..) That time the form gets too much longer. When the participator wants to submit only 2 projects, the other fields will be unnecessary. Is there any possibility to make sections addable with their all content? So I will put only Project 1 section, when the need arises they can click “add project button” and reproduce the section with contents. I’m sorry for my english and also for the longest explanation :) Thanks, Peko

    Reply ↓

  9. Hi Matthew, i bought the paid version of VFB, and its a great plugin for a form needing person. thanks a lot for your work, but i have one thing i would like to ask since i couldn’t make it on my own.

    i’ve been messing around with visual-form-builder-validate.js in order to enable support for the phone verification for Countries other than US / Canada or International in general.

    What i would need is support for this kind of phone number:
    999999999 or 999 999 999. I can’t make the form to validate the phone field. If it helps i’m from Portugal.
    Thanks a lot.

    Greets from Portugal
    Tiago

    Reply ↓

    1. It’s difficult to account for all variations of phone numbers throughout the world. The Phone field takes into account lots of them. In your case, if the validation is failing, you will have to assemble your own method. Check out the jQuery Validator documentation for more on how to do that.

      Reply ↓

  10. Pingback: Visual Form Builder Pro: Field Layout (video) | Matthew Muro

  13. Hi,

    I’m loving your plugin and using it on a dog rescue site that I am redesigning for them.

    I’m using the free version. I already did 2 long forms and now was doing the contact form and I was wondering if it is possible to make the ‘message’ box taller?

    Thanks
    Lise

    Reply ↓

  14. Great Product. I just purchased the Pro version. I have some back end functions that monitor the actions of some of the form fields (click, update, change) and so forth. I see how VFBP names the id for the elements the same as the field labels. Is there any way to modify the element id to something shorter when you have a longer label name. For example if I have a text box with the label/field “Please enter the number of widgets you would like to order”, can I rename the id for that element to “vfb-num-widgets-to-order-1″ or something. It’s not a deal breaker but it just makes my job a little easier on under the hood. Thank You again for a great product.

    Reply ↓

Leave a Reply

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

Search Blog

Recent Posts

Archives

Categories