Monthly Archives

March 2012

How to configure the email details in Visual Form Builder

One of the more common support questions I see for Visual Form Builder is how the Reply To Name and Email fields work.  This is probably because if you are not familiar with the process of sending an email through a server, it can seem a little obtuse.

When you make an email in a program such as Gmail or Outlook, that program controls the sending details.  It knows your display name (usually your first and last name), your email address, subject line, and all other things that go along with an email.

However, when sending an email without one of these programs we have to tell the server what each of those are.

Email configuration details

As you can see in the image above, all emails have these details in common.  You can email to one or more people, set a subject, plus the name and email of who it’s from.  Let’s go over how to do this in Visual Form Builder.

Go to your form and click on the Form Settings button. Click on Email to reveal the email details settings.

Email details settings screen

So, we can see that the same kinds of details can be customized to control what your email looks like when received in the email client.

  • E-mail Subject = Subject Line (painfully obvious, I know)
  • Your Name or Company = From Name
  • Reply-To E-mail = From E-mail
  • E-mail(s) To = To

That’s great, you say, but what about if you want to have the user’s name and email already set in the email?  This is great for when you want to reply directly to the user via email.  This is where the User’s Name (optional) and User’s E-mail (optional) fields come into play.

  • User’s Name – requires your form to have a Text field and the Required option set to Yes.
  • User’s E-mail – requires your form to have an Email field and the Required option set to Yes.

NOTE: If you have not fulfilled those requirements, the drop downs will not be populated with choices.

In the end, all we’re really doing is sending an email and we have to configure the program (in this case, the server) with all of our email details.  If you have any questions, please leave a comment!

 

Tutorial 47 Replies

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

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!

Tutorial 27 Replies

How to change the layout of Radio buttons and Checkboxes

In the latest version of Visual Form Builder, you are now able to take control of how radio buttons and checkboxes are arranged.  Previously, you had no control (other than directly modifying the CSS) of the layout and it was a simple vertical list.

If you have a lot of options, this single vertical column can get pretty long.  Even if you don’t have a lot of options, perhaps you want to save a bit of space.  Whatever your reasons, being able to play around with the look and feel of your form is important.  So, in light of that, let’s see how you can customize the layout.

The Options Layout dropdown in the admin

It’s easy to change the look: go to your Radio or Checkbox field and you’ll see the Options Layout dropdown.  Choose from the different options to achieve the look you desire.  By default, all Radio and Checkbox fields are arranged in a One Column layout.

Options Layout

  • One Column: a single, vertical list
  • Two Columns: creates two equal columns
  • Three Columns: creates three equal columns
  • Auto Width: uses the width of the options to control the width

With only a few minutes, you can totally change the look of your form without ever having to touch the CSS.

Tutorial 3 Replies

Control what file types you accept with the File Upload field

The File Upload field was recently expanded in Version 1.2 of Visual Form Builder to allow control over the file types accepted.  Up until now, it has accepted all files, but you may not want that behavior for a public form.

If you are building a contact form to accept job applications, you might want the user to only upload a PDF, DOC, or TXT.  Using the Accepted File Extensions option, here’s what you need to enter:

pdf|doc|txt

Note the pipe character ( | ) in between each file extension.  If you are not a fan of the pipe character you can substitute it with a comma ( , ).

As of Version 1.2, if you leave this option blank, the default validation for File Uploads will be to only accept images (png, jpeg, gif).

That’s it!  A super simple and quick way to restrict the types of files uploaded with your form.

Tutorial 13 Replies

Search Blog

Recent Posts

Archives

Categories