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


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

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

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


  • 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. Commented Nov 10, 2014 at 19:03
  • I've added my plugin files if that helps. Commented Nov 10, 2014 at 19:15
  • Cool plugin. Looks like you're using the built in fieldLayoutModel? In which case it seems like you could also use getFields() 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. Commented Nov 10, 2014 at 20:23
  • fyi... I've never tried any of this, so just reporting on what my digging around has uncovered. Hope it helps a bit ;) Commented Nov 10, 2014 at 20:32
  • I'll look at these files and see what I can figure out, thank you! Commented Nov 10, 2014 at 20:59

2 Answers 2


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 %}
<div class="container">

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


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.


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

_includes and _components


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

  • 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
    Commented Aug 17, 2015 at 9:53
  • @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. Commented Aug 17, 2015 at 18:32
  • !See screenshot of generated markup Commented Aug 17, 2015 at 18:39
  • @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. Commented Aug 17, 2015 at 18:48
  • 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
    Commented Aug 17, 2015 at 22:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.