Jump to content

FieldtypeFormSelect - A field for selecting forms built using the pro FormBuilder module


FireWire
 Share

Recommended Posts

Hello all-

FieldtypeFormSelect does what the post title says it does. Lets you create a field to select a form created by the FormBuilder pro module. This type of field (or some variation of it) has probably been done elsewhere but I put this together with a few extra considerations for flexibility and utility. When creating a form select field you can choose what forms will be present and how their names will be shown. Let's go to the pictures:

A form select field:

857379945_Screenshotfrom2024-03-0106-33-14.png.feee32db87c81fd2790eae68ed62ebed.png

Creating fields to choose from specific forms? You have options.

1004126442_Screenshotfrom2024-03-0106-41-57.png.e654bf108485b5c1ffd716b03a8f368b.png

You can also create a field that will only include forms that begin, include, or end with a specific string. This allows you to create a field once, then use form names to help group them together and add/remove them from form select elements without editing the field. This is also a pretty simple way to allow end users to create forms that will be selectable without having to ever edit a field configuration.

For example, this field will only allow you to choose forms having names enting with "request", so "customer-support-request" and "consultation-request" will be included, but "newsletter-signup" and "call-to-action" won't.

1415003577_Screenshotfrom2024-03-0107-15-36.png.0503a19a39604cc09e9022b86869242a.png

You can also choose how the form names will be presented in the select element.

123672451_Screenshotfrom2024-03-0107-08-33.png.ef1f35ce47fadc2e4403a9b839fa6fa4.png

They can be shown as they are originally named, as spaced words, or as capitalized/spaced words.

41276071_Screenshotfrom2024-03-0107-09-49.png.bf272e28a42ed55e6b4a50f71e138fcf.png461606604_Screenshotfrom2024-03-0107-10-19.png.53150f7d2596df61ca23d0126b13cf49.png1310093308_Screenshotfrom2024-03-0107-10-43.png.2e71b84c5bb6319eed067376bce5974a.png

So, how does this field work?

Form select fields store the ID of the form you select, but it also has a nice trick for working with forms in your markup too. FieldtypeFormSelect makes use of ProcessWire's built-in field rendering to keep things simple. Let's go to the code.

<?php

$page->select_a_form; // => Outputs the form ID, or null if no form has been selected

// You could do this to output your form markup
echo $forms->render($page->select_a_form);

// Or you can do it this way. If a form has been selected the markup will be output to the page, if no form is selected, the output will be null.
echo $page->render('select_a_form');

The fields you create will always be up-to-date with the forms that have been created in FormBuilder. This module also keeps things tidy- if a form is deleted that has been selected in one or more fields, on one or more pages, the values for those fields will be set to null so you won't experience any reference errors to form IDs that no longer exist.

My primary use is to have a form select field available for blocks created in the RockPageBuilder module by @bernhard. I wanted each section on the page to contain an option to include a call to action button that can be a link to a page, a link to another URL, or that can open a modal with a call to action form to capture leads and visitor contact information. It's a great way to easily add flexibility and give some extra power to the end user when considering what they want visitors to do when browsing their website. RockPageBuilder is not required, but makes for a useful example!

Protip for website designers- in my experience and empirical study of conversion analytics for sites that I've built, buttons located within sections of content on the page captured more leads and outperformed a call-to-action button in the page header, the call-to-action form at the bottom of the page, and forms located on a "Contact Us" page- by far. The true purpose of this field is to get the right forms in the right places quickly and easily without any need to work around markup output strategies or short codes.

Contributions on Github are welcome if there's some extra functionality anyone wants to add that makes sense. Please let me know if you run into any bugs as well, when there's some extra usage and testing I'll submit it to the modules directory. Hope you find it useful!

https://github.com/SkyLundy/FieldtypeFormSelect

  • Like 16
  • Thanks 1
Link to comment
Share on other sites

  • FireWire changed the title to FieldtypeFormSelect - A field for selecting forms built using the pro FormBuilder module

Thanks for this – I've been using FieldtypeForms for years, which was just a gist

https://gist.github.com/craigrodway/7515600

there may be another one here:

but much appreciated that you have made an official module for this, I use the form select module to allow site editors to select a form to show in a configurable page builder section.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@Macrura I did take some inspiration from those conversations. Glad you find the module useful!

I've developed it on the fly and am using in a site that I'm building right now so any feedback or bugs you can report from your use will be helpful.

Link to comment
Share on other sites

Sure, well I don't know if/when I'll be able to use your version as I have mountains of infrastructure running on setups that I'm hesitant to change (if it ain't broke don't fix it), but probably on the next iteration of the main profile I use, I can see how the existing field could be replaced, and whether it will be a "drop in" replacement, or require some front end code adjustments...

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...