<p>You have (at least) two options here:</p>

<ol>
<li><p>Create a matrix block with the fields you need. That way, the user kan add one or more blocks of the type 'button' (for instance) to the page. Within button, you could have a plain text field for the link and name, a color field for the color, a number field for size, etc.</p></li>
<li><p>Create your own fieldtype (<a href="http://buildwithcraft.com/docs/plugins/field-types" rel="nofollow">http://buildwithcraft.com/docs/plugins/field-types</a>, not as easy as first option). That way you have optimal control over the way your user inputs values.</p></li>
</ol>

<p>I would go with option 1.</p>

CC BY-SA 3.0
2014-07-16T22:05:17.253Z
A Matrix block won't work currently as this is an element that I envision being able to be put into Matrix blocks. The question is geared more towards how to do option 2. I'll edit my question to be more clear.
Ian
CC BY-SA 3.0
2014-07-16T20:34:48.883Z
2014-07-16T20:34:48.883Z
Paul
<p>Paul's suggestion should work fine based on your description. Another way to improve this would be to set the max blocks to 1 in your field settings, and to also use a different tab along the lines of 'theme' in your field layout. This will help separate the content and styles in the CMS, and prevent the client from adding multiple blocks of classes that will override each other.</p>

CC BY-SA 3.0
2014-07-16T21:08:46.367Z
2014-07-16T21:08:46.367Z
Jack Pallot
<p>It turns out I ended up needing to utilize a <a href="http://buildwithcraft.com/docs/plugins/models" rel="nofollow">Model</a> with the fieldtype. I'm changing my approach to this and won't be needing this custom fieldtype. But you can see what I ended up coming up with via this <a href="https://gist.github.com/irock195/a86cf3dd9c8a72c2244f" rel="nofollow">gist</a>. I'm not sure this is the totally correct way to handle this, but I got it working how I imagined.</p>

<p>If anyone is super interested this is how I went about figuring it out. I picked apart the <a href="https://github.com/lindseydiloreto/craft-smartmap" rel="nofollow">SmartMap</a> plugin to learn more about models and how to output them within templates.</p>

CC BY-SA 3.0
2014-07-17T22:52:26.833Z
2014-07-17T22:52:26.833Z
Ian
<p>Front-end developer here playing with fire. I'm developing a site that as a specific UI element that I want to reuse throughout the site. Specifically it's a button that has different "configuration" options. You can change the colors, add an icon, etc. It's currently all controlled via CSS classes. You can think of the element as something akin to a Button within <a href="http://getbootstrap.com/css/#buttons" rel="nofollow">Twitter Bootstrap</a>.</p>

<p>I'd like to build a custom fieldtype so that users within the CMS can add in these UI elements throughout the site and change the options such as color, size, name, link, etc. I'd like to be able to place this type inside of Matrix blocks. So doing this within an existing Matrix isn't really feasible.</p>

<p>I'm kind of thinking of it as a mini-matrix or an advanced table element. If someone can point me in the right direction that'd be great. Thanks!</p>

<p>The concept I'm currently struggling with is how to create the fieldtype and have it save the data from the different form elements within my fieldtype to the database. </p>

<plugin-development>
Fieldtype with multiple form elements
# Fieldtype with multiple form elements

(Asked by: username_0 on 2014-07-16)

Front-end developer here playing with fire. I'm developing a site that as a specific UI element that I want to reuse throughout the site. Specifically it's a button that has different "configuration" options. You can change the colors, add an icon, etc. It's currently all controlled via CSS classes. You can think of the element as something akin to a Button within [Twitter Bootstrap](http://getbootstrap.com/css/#buttons).

I'd like to build a custom fieldtype so that users within the CMS can add in these UI elements throughout the site and change the options such as color, size, name, link, etc. I'd like to be able to place this type inside of Matrix blocks. So doing this within an existing Matrix isn't really feasible.

I'm kind of thinking of it as a mini-matrix or an advanced table element. If someone can point me in the right direction that'd be great. Thanks!

The concept I'm currently struggling with is how to create the fieldtype and have it save the data from the different form elements within my fieldtype to the database.

**Tags:** plugin-development

---

## 3 answers

### Answer by username_1 on 2014-07-16. Score: 3

You have (at least) two options here:

1. Create a matrix block with the fields you need. That way, the user kan add one or more blocks of the type 'button' (for instance) to the page. Within button, you could have a plain text field for the link and name, a color field for the color, a number field for size, etc.
2. Create your own fieldtype (<http://buildwithcraft.com/docs/plugins/field-types>, not as easy as first option). That way you have optimal control over the way your user inputs values.

I would go with option 1.

> **Comments:**
> **username_0**: A Matrix block won't work currently as this is an element that I envision being able to be put into Matrix blocks. The question is geared more towards how to do option 2. I'll edit my question to be more clear.  

---

### Answer by username_2 on 2014-07-16. Score: 2

Paul's suggestion should work fine based on your description. Another way to improve this would be to set the max blocks to 1 in your field settings, and to also use a different tab along the lines of 'theme' in your field layout. This will help separate the content and styles in the CMS, and prevent the client from adding multiple blocks of classes that will override each other.


---

### Answer by username_0 on 2014-07-17. Score: 1

It turns out I ended up needing to utilize a [Model](http://buildwithcraft.com/docs/plugins/models) with the fieldtype. I'm changing my approach to this and won't be needing this custom fieldtype. But you can see what I ended up coming up with via this [gist](https://gist.github.com/irock195/a86cf3dd9c8a72c2244f). I'm not sure this is the totally correct way to handle this, but I got it working how I imagined.

If anyone is super interested this is how I went about figuring it out. I picked apart the [SmartMap](https://github.com/lindseydiloreto/craft-smartmap) plugin to learn more about models and how to output them within templates.


---

