Overview

Foundation forms are extremely powerful. The demos on this page just scratch the surface of what you can do with these forms. As with everything with Foundation stacks, you can customize the styles of all form components with swatches. You can combine other Foundation stacks to create the form layout and style that you want. There are some great examples of this here that should give you some inspiration.

Fields

Below are examples of the various fields that are available in Foundation forms. One very important feature of every field is how much is done to support accessibility. Every field has label and help text. You also have the ability to customize browser autofill, mobile keyboards and more for each field individually.

Every form field has a label (above) and help text field (this). These are great for accessibility.

This field is required

Datalists allow you to pick from a pre-determined list or type in your own text.

This field is required

Customze the height, enable spellchecking and more.

This field is required

This is a super customizable date field.

This field is required

Build custom option lists or choose from over a dozen premade lists for your convenience

This field is required

Supports both integers and decimals with min, max and step values.

This field is required
50

Type your input data here

This field is required

Select multiple options from a pre-defined list.

This field is required
This field is required
This field is required
This field is required

Inline Fields

You can group labels, fields and buttons inline to create a very streamlined interface. Below is an example of an inline email subscription form. Then you can see there is the ability to have inline labels in order to create very unqiue and informative form fields.

Autofill

You can autofill form fields with data simply by passing the name of the form fields with the value that you want via the URL. In the example below, you can click on the button below and it will fill both text input fields below.

The below form fields have names of fill and fill2. In order to fill the data you only need to append the following to the URL of the page. 

?fill=Foundation 6 is amazing!&fill2=Joe Workman is one cool dude.

This is a very powerful feature that comes with every Foundation form. You can even use this with hidden fields in order to pass data to the form without the end user really knowing that its even happened. For example, you could populate a hidden field that lets you know that a customer came to the form from a particular link from another website.

Autofill Form

Click on the button above to autofill this form field

This field is required

Click on the button above to autofill this form field

This field is required

Spam Protection

Form spam is one of my most annoying things ever. Foundation forms comes with 3 different ways to help you battle spam submissions of your form.

  1. HoneyPot is the recommended method. HoneyPot creates a hidden field that to a normal user is not visible. However, bots see this field as if it was a required field in the form. When a bot fills in this field, the form will not be allowed to be submitted.
  2. Recaptcha is a very popular (albeit annoying) method of stopping spam by prompting the user with an image based quiz. Both Recaptcha v2 and v3 are supported.
  3. Human Test fields can be created with the supplied form fields. Below is an example of doing a simple math problem. However, you can have someone answer any type of question.

Enter the incorrect answer below to see the form validation error.

What is 2 + 2?

You did not pass the test

Validation

You can mark any field in a Foundation form as required. You can also do some verifucation that the data entered is correct. For example, you want to make sure that an email entered is a valid looking email address. When data is missing from a form, you will be informed with detailed errors on why the form could not be submitted.

The below form shows a few other feautres of Foundation forms. If you fill out the form below with your name and email address, you will receive an email to the address listed with the data that you submitted in this form. This data is not stored anywhere. It is only provided as a test for you.

Please fill in your full name

This field is required

Your email address will never be used for evil

This field is required

Please let us know what we can do to assist you.

This field is required

Actions

Foundation Forms supports the following actions. You can add as many actions as you want when a form gets submitted. You are not limited to just one action. You can send 3 different emails to as many people as you want as well as also send a custom AJAX request.

  • Email: You can easily integrate the form data into your email. You can send plain text email or go all out and use our Email Stacks to design full fledged HTML emails that can be styled to match your website.
  • GET URL Action: This allows you to pass all form data to another webpage via URL parameters. This is just like the autofill featrure above works, but with sending the data.
  • POST URL Action and POST URL Ajax: This allows you to integrate your form with any custom server code or external service. This may require knoweldge of server side coding like PHP.
  • Redirect on Success: You can use this alongside other form actions. When those actions are completed successfully, you can then redirect to a separate URL.
  • The Call to Action stacks allow you to launch various UI components such as a lightbox when a form is successfully submited. This could be very useful.

The validation example in the previous section on this page has a demo of an Email action.

Layout Inspirations

Your imagination is the limit when it comes to designing your forms. Below are a few elegant examples of what you could do with your forms.

Labels on Left

Multistep Form

This layout uses Tabs to create a multistep layout. This could be good for tutorials and multistep forms. The buttons are used to navigate between each panel.

33%

Prev Next

Miultistep Form - Step 2

Please fill in your full name

This field is required

Your email address will never be used for evil

This field is required

66%

Prev Next

Miultistep Form - Step 3

Please let us know what we can do to assist you.

This field is required

Time to Submit

Prev

SVG Radios

What type of home do you have?

Contact Widget

Get in Touch

Shoot us a message below and we will get back to you within one business day.

This field is required

This field is required

This field is required
feedback

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...