Help: Dynimic Input Form Templates

[collinson]

My company wants to develop and internal application for our content writers for inputting copy for our newsletters.

The newsletter is pretty dynamic and is build up of various blocks/modules. We typically want to have a list of these blocks (block: html tables with variable to pulll into Newsletter) these blocks of hml are each very different and have predefine fields.

As the copywriter select the block(s) and to mockup look of the template. So if you looked at the page on the left you would have the form fields for the selected block and on the right what that block of html looks like. And as you complete the form it fills in the preview on the right. The blocks need to be used as forms to imput data.

So and example would be block 1 wiil have

1. Title
2. Description
3. Image
4. Call to action ... you get the idea.

<table>
<tr>
<td>{Title }</td>
</tr>
<tr>
<td>{Description}</td>
</tr>
<tr>
<td>{Image}</td>
</tr>
<tr>
<td><button name="{CTA}"</td>
</tr>
<tr>
<td>Table Cell</td>
</tr>
</table>

As the form is called up it will show the input fields on the left but typically on the right of the page you will see how the copy looks in the template block 1. The fields can change and each block can be very different each time.

I need advice on how you would typically create a page do this?
How would you store the results of these fields in the SQL?

I know i would have to have a table where I can store all these blocks thats fine.
Any advice would be apprecated!

[vincenthung]

You can create a table which stored the template module, then create another a table store all the required fields for the newsletter including the field(s) to store the template id.

For example in Add page, you can dividing the page as 2 part, 1 for user input and 1 for preview.

1. When the page loaded, you can hide all the fields except the field(s) for selecting the template by JavaScript
2. After user choose the template(s), you can update the preview page by Ajax and show the corresponding field for user input.
3. With the "Change" event of each of the input, you can update the "Preview" page content.