All Collections
Forms
How to create a form – Part 2 – Publishing the form and tracking performance
How to create a form – Part 2 – Publishing the form and tracking performance

Learn how to create a landing page, display the form in a portal page or integrate it with your website

Cláudia Duarte avatar
Written by Cláudia Duarte
Updated over a week ago

It's time to depan and serve the bread. Which, in "formspeak", refers to publishing your form, either internally or externally. 😃 As you'll soon see, Full Fabric has a range of solutions to fit different needs, so wherever you want to publish your form, you can. The world is your oyster, mate! 🐚🌍

However, with publishing a form also comes the responsibility to track data and performance, another thing we discuss in this article. So stick around – after all, you won't know if the recipe was a triumph unless you see that empty plate! 🍽

In this article

(click to jump to topic)

How do I publish a form?

There are three ways to make a form publicly available: creating a landing page (through the Landing page tab), integrating it into an external application or website (through the Integration tab) and displaying it on a page of the Student Hub (through the Portal module).

Create a landing page

After creating a form, the next logical progression is to design a landing page, that is, a standalone web page dedicated to hosting your form to help convert visitors into submitters. No coding required, promise. 🙏

First things first, access the tab Landing page. As you can see, the default layout comprises two panes: to the left, filling a little over half of the page, is a wide text area where you can supply relevant instructions or information to readers, and to the right is the form itself (as created in the Schema tab):

The front-facing side of the landing page also includes the side image uploaded in the Details tab (or, if none was uploaded, the same image as in your sign-up page), occupying about one-third of the page to the right:

If you don't want to have any text and thus leave the text box empty, the landing page automatically adapts by pushing the form to the left:

In both versions of the layout, the sizes and proportions automatically adjust for different screen resolutions. All in all, everything is made in such a way as to give you as little trouble as possible. As a matter of fact, provided you already defined the settings and built the schema, the only thing left to do will be to add and customise the content of the text pane as you deem fit – and even that is optional, as already demonstrated.

Speaking of which, to open the editor, tap the text area directly. You'll find an abundance of formatting options at your disposal: six levels of predefined headings styles, plus a quote style and a normal style; bold, italic, underline and strikethrough; bullets and numbering; outdents and indents; links; images; and, lastly, typographic alignment. You can also upload attachments. To complete an edit, always press Save.

In addition, you can preview the page as you tinker with different things. The old adage applies here: practice makes perfect! 🌟

Integrate the form externally

As the name suggests, the Integration tab is where you handle the ability to integrate a form with an external database or share a form on a website. The set-up should be done by your school's IT team.

Enable external integration is the main control: you can choose No (which is the default value), Endpoint, Embed iframe or Embed code.

Endpoint allows you to connect the form to an external service via the API, i.e., to a separate public-facing form outside of Full Fabric – such as, for example, in HubSpot. By further way of illustration, suppose your school works with a number of marketing agencies – since marketing agencies often have their own websites to capture data, it would make sense to integrate Full Fabric with the agencies' webpages to pull leads and other data from the former into the latter, by mapping the source fields to the destination fields.

Secondly, Embed iframe directly embeds the Full Fabric form as a frame on a webpage, using CSS customisation. It's a beautiful and natural-looking solution to promote the form outside of Full Fabric (e.g., on your school's official website, where traffic is probably higher) and therefore boost submissions. Here's an example:

That said, customisation and tracking are limited. As we alluded to above, an iframe is an extra frame on a webpage that displays an external object (in this case, the form), thereby acting as a window into another house – so because it's a web page within a webpage, they're separate environments. Without access to the iframe source code, you cannot place tracking tags in the forms. Furthermore, all CSS styling must be written in our platform (an editor appears when Embed iframe is selected).

A much better alternative, offering great customisation and design capabilities as well as the opportunity to track visitor interaction, is Embed code. With Embed code, the forms are embedded using a script instead of an iframe, whereby the forms behave as part of the page – in other words, the exact same environment. Consequently, as long as there's a tracking tool (like Google Tag Manager) installed on the page where you introduced the form, you'll be able to implement tags in the latter to monitor how visitors are using your forms – translated into metrics such as completion time, hesitation time, abandonment rate, average time taken for each form field, drop-offs, and many more. Moreover, the CSS is inserted directly in your page, which is arguably more comfortable. On the whole, this is the recommended route, as it provides a fantastic experience to both visitors and staff.

Nonetheless, whichever you decide on, what you have to do next is enter the respective URL in Allow external domain and follow the onscreen guidelines under INSTRUCTIONS, which basically consist of pasting the embed code into the HTML module of your webpage, and, in the case of iframe, setting the CUSTOM STYLING in CSS language (optional).

TIP: If you choose Embed code in the field Enable external integration, the generated code from Full Fabric may be customised to introduce additional behaviours or features such as different redirects, embedding multiple forms on the same page, and more. For more information, read this other article: How to customise the form embed code (ADVANCED)

Integrate the form using Zapier connections

You can also use Zapier to integrate your forms with Full Fabric as long as the source data forms support this option. To learn more about integrating forms through Zapier, have a look at our dedicated article here.

Display the form in the Student Hub

To embed a form into the Student Hub, head over to the Portal module, open a page and jump to Contents. Overall, portal pages work almost identically to form landing pages, but with widgets:

What we need then is the appropriate widget, and the one you're looking for is called Form – with a name like that, there's no mistaking it!

Predictably, Form lets you select a form from the assortment of all existing forms in Full Fabric, and you can reuse it to embed more of them. Just click on the widget, pick a form and it'll be promptly added to the page:

Once you're done, tap Preview on the top right corner to preview and green-light the final result!

How do I track performance and see the submissions of a form?

To track the performance of a form and see every submission you've gotten so far, click Stats on the upper right-hand corner:

The ensuing page is essentially a list of form submitters, updated to the second (although you need to manually refresh the page to see the new coming submissions, if there are any). The three-striped icon is the column selector, and the vertical ellipsis next to it, which is the bulk actions button, lets you Export submissions into an Excel spreadsheet – very convenient to produce graphical reports, process data somewhere else, etc. 📈

VIEWS indicates the total number of times that the landing page has been accessed, and SUBMISSIONS, predictably, is the amount of submissions you've hitherto received.

Finally, click X to delete a form submissions (for instance, if it's a duplicate or a test), and press the ID card to visit that submitter's profile. As Annette Hanshaw would say, "That's all!" 😊🎵

*

You have reached the end of this article. Thanks for reading! 🤓 If you have any questions or comments on the topic at hand, or if you enjoy reads like this and have article requests, feel free to start a chat or e-mail us at support@fullfabric.com. Also, please leave a rating below. Your feedback is highly appreciated! 💖


_________________

PUBLISHED: February 18, 2020
LAST UPDATED: November 25, 2022 at 6:51 p.m.

Did this answer your question?