How can I display fields from Field Layout Designer in the template? I'm working on a plugin that lets you create multiple forms. For each form I have a Field Layout Designer that lets you add fields from the fields groups. 

My question is how can I display those fields on the front end template..say a contact.html single page. 

Basically the same way you add fields to entry types and they show up when you are adding an entry... but I would like this to render a form on user facing pages with all the fields.

Here is what I have so far: http://d.pr/f/1bHCX

EDIT:

So this is what I have so far, its getting somewhere, sort of.

In my front end index.html

{% set form = craft.formBuilder.getFormByHandle('testForm') %}

I get fieldLayout id with {{ form.fieldLayoutId}} = 69

And inside content block:

{% for item in form.getFieldLayout() %}
  {% include "_includes/fields" with {
    fields: item.getFields(),
    element: form
  } only %}
{% endfor %}

I get this error Impossible to invoke a method ("getField") on a string variable ("69")



So its great that I get fieldLayout id for specified form handle but now I need to figure how to get all the fields related to that fieldLayout. I understand the error message but maybe someone knows how to rewrite that for statement to get results I need?! :)

I guess I don't know how to query my db for the fields that belong to layoutId 69..

I need to get fieldId 15 and 16 to render on the front end.
Ok so I finally got it going with the help of that Inspector plugin. This is what I did..

In my front end template..(i used index.html)

{% extends "_layout" %}

{% import "_includes/forms" as forms %}
{% set form = craft.formBuilder.getFormByHandle('testTwo') %}
{% set fields = form.fieldLayout.getFieldLayout().getFields() %}

{% block content %}
&lt;div class="container"&gt;


{% for field in fields %}
  {% set input = craft.fields.getFieldById(field.fieldId) %}
  {% set requiredInput = field.required %}

  {% include "_includes/field" with {
    field: input,
    required: requiredInput
  } only %}
{% endfor %}

&lt;/div&gt;
{% endblock %}    


Explanation:

Each form will have a formHandle name. With the following line I can target that form in the template (see screenshot 1)..

{% set form = craft.formBuilder.getFormByHandle('testForm') %}


Each form has a fieldLayout Builder so I now need to get the fieldLayoutId associated with the form above. While I'm getting the fieldLayoutId I will ask for fieldId's associated with this fieldLayoutId..The bellow will let me get fieldId (also see screenshot 2 in my question, basically the following line lands me on that table)

{% set fields = form.fieldLayout.getFieldLayout().getFields() %}


Now that I have fieldId's I can use the following line to get all my fields!

{% set input = craft.fields.getFieldById(field.fieldId) %}


I'll need to include that inside my for loop so I can render all the fields.

There is more work for what I need to achieve in this plugin, but this was biggest obstacle for me personally so hope this helps someone too. Thanks for help and info on the Inspector plugin.

Note

There are 2 folders you will need to copy from craft/app/templates/ directory into your craft/templates/ directory.

_includes and _components