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.
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.
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.
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
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.
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.
- 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.
- 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.
- 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.
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.
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.
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
Get in Touch
Shoot us a message below and we will get back to you within one business day.
Below are video tutorials that are relevant to the stacks used on this page.