by John G. Levis Jr.

NGO Connect‘s form and application builder is an easy-to use tool that requires minimal coding for its UI (User Interface) and UX (User Experience) creator. This native builder can be enhanced by leveraging Visualforce data with IFrames when building forms and applications.

With IFrame (Inline Frame) HTML tags, you can use the form/application builder in conjunction with custom Visualforce pages. This enables you to echo data, or pull any field from any object into the UI. In addition, IFrames increase your adaptability and mobility with forms and applications in NGO Connect. As a result, you can build forms and applications that strengthen your organization’s marketing and production.

Visualizing Data with Visualforce Pages

In a custom Visualforce page, you can create fields that exist in objects (both standard and custom). Identifying your goal will dictate your visual model. Take for example, an object with a membership drive. You can show a list of all new members or keep count of how many have signed up. Other examples of visual models include donor auction, represented through an auction item with a timer, or a set donor goal amount, represented through a donation meter.

Adapting Visualforce Pages to Forms with IFrame

In the NGOC form builder, creating a simple HTML block is a two click process. By adding an IFrame HTML tag, you can include a custom Visualforce page. Within that Visualforce page, you can create the visual model using HTML, CSS, and a bit of Apex and Javascript. Adapt the page to any form by dropping in the HTML IFrame block and adjusting the HTML to fit your branding. Since NGOC is comprised of primarily universal objects, forms can also be shared across organizations.

Increasing the Mobility of IFrames

In order to make the IFrame responsive outside your typical medium, you can give the IFrame a CSS class. Assigning bootstraps or writing custom CSS classes allows you to adapt the IFrame to any medium. Verify each individual medium via medium simulators to get a general sense of the UI and UX design and browser response. IFrames have less limitations than you may think!

Leverage Visualforce Data for Marketing and Production

There are many potential use cases for bringing Visualforce data into NGO Connect’s form and application builder. Take for example, you have a Visualforce page with an object that represents the number of clubs your organization has established. When you connect this data to a form/application with IFrame, you can search clubs by location to match end users with the club closest to them. Your organization can then capture the geospatial data when end users choose their specific club in a form or application.

Learn More

Leveraging Visualforce data with IFrames is a very powerful tool, and a viable option to enhance NGO Connect’s native features. 

If your organization has questions about NGO Connect’s form and application builder, contact us.

Comments are closed.