Forums

Custom Form

Permalink
I need a custom form that I can place other html elements other then form fields into. For example

<start Form>
Formfield
Image
Formfield
iframe
Submit Buttom
<End Form>

The standard form block does not allow for this. Any ideas on hard coding, custom template, or external form capabilities (still have no idea what the external form block does)

I purchased a few blocks that can get the job done, but they are extremely buggy and I an constantly having to remake forms and fix problems. I more durable solution is need.

Thanks,
Jim
jlines41
 
JohntheFish replied on at Permalink Reply
JohntheFish
Several of the advanced/extended/pro forms blocks offer such capability. But maybe they are already the blocks you have tried and are not happy with.

Another approach would be to generate your form using the standard form block without the extra images, iframe etc.

Then follow it with image and iframe blocks that are hidden (using block design).

Then have a block with a small snippet of jQuery to move the content of the hidden image and iframe etc blocks into the spaces you need them in the form.

You will probably find such hack easier with the tableless layout template for the form.
jlines41 replied on at Permalink Reply
jlines41
Thanks for your response John. I really appreciate.

I like the jQuery Idea. Any incite on where I can find some sample code on how something like that would work?

I'm not the best with JQuery.

Thanks!
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
The fields in the form will have names, so you can use the field names to key on.

For the items you want to move into the form, you can use block design to name their blocks.

You will also want to make sure nothing happens in edit mode.

In its most basic form, something like:
$(document).ready(function(){
  if (CCM_EDIT_MODE){
    return;
  }
  $('#form_element_id').after($('#my_named_imageBlock_id'));
  $('#form_other_element_id').after($('#my_named_iframeBloick_id'));
});


Or you could do it the other way round using .insertAfter().

I recommend using the form tableless layout template, which places each form element in a div, so you may want to climb up the tree.
$(document).ready(function(){
  if (CCM_EDIT_MODE){
    return;
  }
  $('#form_element_id').parent('div').after($('#my_named_imageBlock_id'));
  $('#form_other_element_id').parent('div').after($('#my_named_iframeBloick_id'));
});


You could put the above in script tags in an html block. Or you could use my jQuickie block which will do the edit mode stuff and wrap the ready handler for you as well as running jsHint to catch syntax errors.

EDIT:
Yes, if the blocks you are filling in with were hidden, yes, you may also need to .show() them.
jlines41 replied on at Permalink Reply
jlines41
Thanks again John! I really, REALLY, appreciate your help on this one.
JohntheFish replied on at Permalink Reply 1 Attachment
JohntheFish
The above functionality (and a bit more) is now provided in v1.2 of Magic Data Forms.
http://www.c5magic.co.uk/add-ons/magic-data-forms/enhanced-form-blo...

Enhanced form templates pull in other blocks according to a block naming convention, for example, use block design to name a block 'embellish_after_question5' and that block will be moved to immediately after question 5 in the form.