<p>If anyone is wondering I finally finished the plugin I was working on, you can see it here. <a href="https://github.com/roundhouse/FormBuilder-Craft-CMS" rel="nofollow">https://github.com/roundhouse/FormBuilder-Craft-CMS</a></p>

CC BY-SA 3.0
2015-08-17T09:53:40.200Z
hi - I'm trying your plugin out for the first time - so far so good , just a couple of queries:
1 - is it possible when displaying the form on the template to split the form field label from the actial input?
2 - Are the fields translatable? There is the tick in the cms for it, but where do I enter the other languages for the fields?
mmc501
CC BY-SA 3.0
2015-08-17T18:32:01.523Z
@mmc501 but the input is split up already. The label is in its own div with a class called `heading`.  The input field is also in its own div with class `input`. Then these 2 fields are wrapped in a div with class `field`.
Vadim Goncharov
CC BY-SA 3.0
2015-08-17T18:39:15.737Z
![See screenshot of generated markup](http://formbuilder-craft.s3.amazonaws.com/demo/label_input.png)
Vadim Goncharov
CC BY-SA 3.0
2015-08-17T18:48:21.350Z
@mmc501as far as translations go, I don't know much about it, but if  you have additional locales installed in your craft cms you will get an extra checkbox when you're creating fields that allows the field to be translatable. I think that I'm suppose to make localization files within the plugin as well. I'll dig more into this.
Vadim Goncharov
CC BY-SA 3.0
2015-08-17T22:26:01.623Z
Thanks - I was trying to use bootstrap form code which why I originally asked but then just used your classes to style as I wanted. Thanks, yep have all locales enabled, and checked for translateable fields but don't see where they can be changed in the CMS. Cheers!
mmc501
CC BY-SA 3.0
2014-12-04T04:29:07.107Z
2014-12-04T04:29:07.107Z
Vadim Goncharov
<p>Ok so I finally got it going with the help of that Inspector plugin. This is what I did..</p>

<p>In my front end template..(i used index.html)</p>

<pre><code>{% 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 %}    
</code></pre>

<p><strong>Explanation:</strong></p>

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

<pre><code>{% set form = craft.formBuilder.getFormByHandle('testForm') %}
</code></pre>

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

<pre><code>{% set fields = form.fieldLayout.getFieldLayout().getFields() %}
</code></pre>

<p>Now that I have <code>fieldId</code>'s I can use the following line to get all my fields!</p>

<pre><code>{% set input = craft.fields.getFieldById(field.fieldId) %}
</code></pre>

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

<p>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.</p>

<p><strong>Note</strong></p>

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

<p><code>_includes</code> and <code>_components</code></p>

CC BY-SA 3.0
2014-11-12T19:33:23.607Z
2014-11-12T19:58:03.717Z
2014-11-12T19:58:03.717Z
Vadim Goncharov
<p>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. </p>

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

<p>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.</p>

<p>Here is what I have so far: <a href="http://d.pr/f/1bHCX" rel="nofollow noreferrer">http://d.pr/f/1bHCX</a></p>

<p><strong>EDIT:</strong></p>

<p>So this is what I have so far, its getting somewhere, sort of.</p>

<p>In my front end index.html</p>

<p><code>{% set form = craft.formBuilder.getFormByHandle('testForm') %}</code></p>

<p>I get fieldLayout id with <code>{{ form.fieldLayoutId}}</code> = 69</p>

<p>And inside content block:</p>

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

<p>I get this error <code>Impossible to invoke a method ("getField") on a string variable ("69")</code></p>

<p><img src="https://i.sstatic.net/N237N.png" alt="enter image description here"></p>

<p>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 <code>for</code> statement to get results I need?! :)</p>

<p>I guess I don't know how to query my db for the fields that belong to layoutId 69..<img src="https://i.sstatic.net/HHEab.png" alt="craft_fieldlayoutfields"></p>

<p>I need to get fieldId 15 and 16 to render on the front end. </p>

<p><img src="https://i.sstatic.net/fJPKL.png" alt="craft_fields"></p>

CC BY-SA 3.0
2014-11-10T19:03:57.407Z
Hard to answer without knowing what your plugin architecture is. I would guess that you would also want a custom field as part of your plugin that would allow you to assign the form to an entry (i.e. something like a related entries field-type, or a drop-down field-type with a form ID.) You could then use that ID to lookup the form fields from your custom field layout, and render each field in turn. Otherwise you would have to hard-wire the forms into specific templates somehow.
Douglas McDonald
CC BY-SA 3.0
2014-11-10T19:15:10.513Z
I've added my plugin files if that helps.
Vadim Goncharov
CC BY-SA 3.0
2014-11-10T20:23:38.640Z
Cool plugin. Looks like you're using the built in fieldLayoutModel? In which case it seems like you could also use [getFields()](http://buildwithcraft.com/classreference/models/FieldLayoutModel#getFields-detail) method to build the form on the front-end. You would still need a way to assign the form to an entry however (via custom drop-down, ala 'assign entry type'), which in your front-end template could trigger a forms include to render the fields. Have a look at `craft/app/templates/entries/_edit.html` and `_fields.html` and then follow the rabbit-hole to `templates/_includes/fields`.
Douglas McDonald
CC BY-SA 3.0
2014-11-10T20:32:36.437Z
fyi... I've never tried any of this, so just reporting on what my digging around has uncovered. Hope it helps a bit ;)
Douglas McDonald
CC BY-SA 3.0
2014-11-10T20:59:46.183Z
I'll look at these files and see what I can figure out, thank you!
Vadim Goncharov
CC BY-SA 3.0
2014-11-11T03:32:31.217Z
There is a great little plugin called `inspector` that is really helpful for figuring out the type of object you are dealing with (along with all the available methods, properties, etc).
Douglas McDonald
<field-layout-designer>
How can I display fields from Field Layout Designer in the template?
# How can I display fields from Field Layout Designer in the template?

(Asked by: username_0 on 2014-11-10)

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")`

![enter image description here](https://i.sstatic.net/N237N.png)

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..![craft_fieldlayoutfields](https://i.sstatic.net/HHEab.png)

I need to get fieldId 15 and 16 to render on the front end.

![craft_fields](https://i.sstatic.net/fJPKL.png)

**Tags:** field-layout-designer

> **Comments:**
> **username_1**: Hard to answer without knowing what your plugin architecture is. I would guess that you would also want a custom field as part of your plugin that would allow you to assign the form to an entry (i.e. something like a related entries field-type, or a drop-down field-type with a form ID.) You could then use that ID to lookup the form fields from your custom field layout, and render each field in turn. Otherwise you would have to hard-wire the forms into specific templates somehow.  
> **username_0**: I've added my plugin files if that helps.  
> **username_1**: Cool plugin. Looks like you're using the built in fieldLayoutModel? In which case it seems like you could also use [getFields()](http://buildwithcraft.com/classreference/models/FieldLayoutModel#getFields-detail) method to build the form on the front-end. You would still need a way to assign the form to an entry however (via custom drop-down, ala 'assign entry type'), which in your front-end template could trigger a forms include to render the fields. Have a look at `craft/app/templates/entries/_edit.html` and `_fields.html` and then follow the rabbit-hole to `templates/_includes/fields`.  
> **username_1**: fyi... I've never tried any of this, so just reporting on what my digging around has uncovered. Hope it helps a bit ;)  
> **username_0**: I'll look at these files and see what I can figure out, thank you!  
> **username_1**: There is a great little plugin called `inspector` that is really helpful for figuring out the type of object you are dealing with (along with all the available methods, properties, etc).  

---

## 2 answers

### Answer by username_0 on 2014-12-04. Score: 1

If anyone is wondering I finally finished the plugin I was working on, you can see it here. <https://github.com/roundhouse/FormBuilder-Craft-CMS>

> **Comments:**
> **username_2**: hi - I'm trying your plugin out for the first time - so far so good , just a couple of queries: 1 - is it possible when displaying the form on the template to split the form field label from the actial input? 2 - Are the fields translatable? There is the tick in the cms for it, but where do I enter the other languages for the fields?  
> **username_0**: @username_2 but the input is split up already. The label is in its own div with a class called `heading`.  The input field is also in its own div with class `input`. Then these 2 fields are wrapped in a div with class `field`.  
> **username_0**: ![See screenshot of generated markup](http://formbuilder-craft.s3.amazonaws.com/demo/label_input.png)  
> **username_0**: @username_2as far as translations go, I don't know much about it, but if  you have additional locales installed in your craft cms you will get an extra checkbox when you're creating fields that allows the field to be translatable. I think that I'm suppose to make localization files within the plugin as well. I'll dig more into this.  
> **username_2**: Thanks - I was trying to use bootstrap form code which why I originally asked but then just used your classes to style as I wanted. Thanks, yep have all locales enabled, and checked for translateable fields but don't see where they can be changed in the CMS. Cheers!  

---

### Answer by username_0 on 2014-11-12. Score: 1

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 %}



{% 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 %}


{% 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


---

