RackForms
v7.8.8
bar code
Latest Release: Build 958 - Arpil 18th, 2023
Home > Form Elements > Code Block
Code Block
In Brief: This element lets you inject raw code in a form page.
Dependencies: A standard form page.
Hints & Tricks: Because the code we inject into the form is raw, it can be any valid code for that page type. This makes it easy to create a block of code that "wraps" a group of elements.
The main purpose of this element is to make editing such blocks of code easier to manage in the RackForms user interface. This is because unlike say, a text field, the code we add to this area is never actually rendered by the editor form preview area.
Important Token Notes: One very common task for advanced users will use will be to mix and match static and dynamic content. Using tokens in Code Block elements need to take into account the standard tokens (F{}, G{}, P{}, etc), wrap all content in PHP blocks.
This means if we're already in a PHP block using the F{} token will result in invalid code. Thus, any tokens used within an existing PHP block must use the R (raw) variant of the Form, Session, and GET tokens, as in: FR{}, GR{}, and SR{}. For example:
<?php
$_SESSION['test'] = 'TEST VALUE';
echo $_SESSION['test']; // RAW PHP, ALWAYS OK
echo S{test}; // INCORRECT - USING STANDARD TOKEN
echo SR{test}; // CORRECT - USING R VARIANT OF TOKEN
?>
Options/Properties
Basic Attributes
Design Notes
These are notes you can input that help you and other production staff understand your confirmation elements logic and purpose. This text is never used in the live form in any way, it is only for internal development.
Block Options
Block Display Mode
This field controls the appearance and behavior of the code block in the final form. We have several options:
Disabled: When set, this element is not added to the final page. Useful for debugging code.
Enabled - Free Form: When set, the code block element is placed in the page source code with no positional wrapper. This can be very useful for creating blocks of code that wrap other elements.
Enabled - Sortable: Inserts the code into the page with a positional wrapper. This is the default mode.
Enabled - Page Top: When used, code added will be placed at the very top of the page. This is useful for code that must execute before anything else. This is also the new, recommended way to add code to your page over the PHP Top Code area.
Auto iFrame Resize Mode
This setting controls how the content of our code block is sized with respect to the parent page when the code contains an iFrame.
Enabled - iFrame Content Determines Size: This is the default option. When used, the iFrame content within the code block is constantly measured by a script on the page and when needed, resized to fit all content.
Enabled - iFrame Uses Entire Page If Possible: When used, the parent page is measured by a script on the page and the iRrame, if one exists in the Code Block code, is resized to this size.
Disabled: No iFrame resize script is run, leaving the contents of the iFrame and the parent code block alone.
Raw Block Code
This is the raw code that will be injected into the form page. The key to this element, and indeed why it exists, is that all other form elements are wrapped in positioned DIV elements. Raw code allows us to add any code we see fit that breaks out of/ignores the normal wrapping code.
This is very helpful for those times when we want to create a block of elements that's visually grouped. For example, by adding left margin and a background color.
It's key to note that in order for this to work in most layouts we must add a clear DIV such as:
<div style="clear:both;"></div>
<div id="block" style="margin-left:30px; background-color:#FFC; padding:40px;">
That is, we clear first to break the current elements, then add our wrapper open DIV code. Then, later in the page we'd add a second Block element that closes the open DIV:
<div style="clear:both"></div></div>
Once again though, note that we first inject a clear DIV so that the form elements we wrap are closed off.
Raw CSS Code
This area allows us to define CSS code our code block will use. It's key to note this code block comes before the Raw Block Code content, which means any styles we add can be used by the Raw Block Code content.
Raw JS Code
This area is where we define any custom JavsScript code our Raw Code Block code will use. Just like the Raw CSS Code block, this code is physically placed before the Raw Block Code content, which means the functions and properties we define in this code block can be used by our raw code.
Display This Item If...
This setting lets us define under what circumstances this item should be shown.
Block Condition Wizard
This wizard allows us to set under what condition this should be shown using a simple UI.