Custom forms provide the perfect customer experience

Don’t settle for templates!

From the humble contact form to the extensive survey, forms are a crucial component of any website. They provide a way for your users to communicate back to you – whether that’s site feedback, testimonials, or even a quick question. While template options like WPForms or Gravity Forms may help you get started, there are limits to what these programs can do. While there are customization options, they’re not always extensive. And while there a wide variety of field types, they can’t always account for your specific needs. If you’re in a need of a truly specialized form, then having a custom one coded is your best option!

The available inputs

While form templates may seem like they have a lot of options, they’re often simple input types with some validation rules (e.g. a phone number field is just a number textbox that requires exactly 10 digits). There are plenty of standard options, but what if you needs fall outside of the standard? Take a look at the available input types, and how they can be customized to provide your customers with the most intuitive experience.

• Radio options provide a series of options where only one can be selected at a time. Good for reviews where you want your users to select a product, or custom service issue categorization.  These can also be stylized in many different ways – dropdowns, image selection, and many more.
• Like radio options, the checkbox input also provides a series of options, of which the user can select any combination. These can be stylized in all the same way as radio options, too.
• Did you know there’s an input specifically for choosing color? In some browsers, a color picker will be provided, but even if not, a color must be entered into this field. Great for providing customization options to your users.
• Date is a fairly standard option, where the input must be in date format. Want to limit the date range for any reason? You can easily set min and max dates. There’s also datetime-local if you want to include a time of day as well.
• Don’t need the full-on date? Maybe you just need the month, or the time, or even a week. Those are all available input types, too!
• Email has its own type of input, which most browsers will automatically validate for you (looking for the @ symbol and the . symbol).
• Some platforms require you to pay extra to allow your users to upload files, like screenshots or receipts. But file is a built-in input type in HTML!
• Hidden fields aren’t visible to your users, but are great for automatically collecting data like device (desktop vs mobile) or browser, as well as more behavioral data like time spent on your site or where they came from in the first place.
• Text is the most freeform – your users can type in anything! Unless you set up validation rules, of course, which can limit just about anything from the length of the input to forbidden characters or phrases. Number is similar to text, only it only takes numbers instead of any characters. Telephone is also a built-in field type as a variation of number, just like url is a variation on the text field that checks to make sure a proper web address is entered.
• There’s also password, which is about the same as text except for the fact that the input is only shown as dots.
• Range is one of the most versatile input types. By default, these are number sliders, for instance letting your users rate your service on a scale of 1-5. But by having your own little code where you set numbers to mean certain things, that range can turn into just about anything!
• Crucial to the functioning of the form, submit is often a button that does just that – submits the form. There’s also reset if you want your users to have an option to start over.

That may be a lot of inputs, but that’s not even the breadth of the subject! These inputs all come with their own validations and other internal settings that make the possible variations endless. Want an input to be checked by default? Want an input to be disabled until certain criteria are met? All this and more is possible with a little custom development!

Set your own style

Outside of setting your own mechanics, having a custom form developed also lets you set your own style. Templates come with some basic options like fonts and colors of course, but anybody who uses it is getting the same general look and feel. Not so with a custom form! You can use the full capabilities of CSS to customize any aspect of your form, without being limited to some preset options. The form will fit seamlessly into your site, and your users will be able to tell that you went the extra mile to create an integrated experience.

Form submission actions

Going back to the logistics side, having your own custom form opens up numerous possibilities for what your form should do when it’s submitted. Sure, you can have a basic setup where you send a notification to a few email addresses. But what if you want to automatically add new entries to a Google Sheet? What if you want to provide them with a custom results page based on their entries? What if you want to automatically add them to your email platform to follow up after a set amount of time? Practically anything is possible with your own custom forms and a touch of JavaScript!

All of these seem a little overwhelming? Mr. WPress is here to help! We can include custom forms built right into your custom theme, or build you a custom plugin that houses all the forms you could need. The possibilities are endless, so don’t hesitate to reach out for a free quote if you’re ready to invest your user experience!