Seven How’s of CONREGO part II

Warning! This article contains fragments of simple HTML, CSS and Javascript code and instructions to handle it. Reader discretion is advised.

Seven How’s of CONREGO part II

5. How to disable a form field?

Disabling a form field means that it remains visible but the registering attendee will be unable to change its content. It may be useful if we import attendee database and only want them to confirm that their details are correct and they want to attend the event. To do this, you need to use the JavaScript code editor. Before we’re able to do anything, we need to find the form field ID (a unique string of characters identifying that field). We can find it by right-clicking this field in the registration form and selecting Inspect. The browser should display something like this:

<div class="form-group" id="rf26">
    <label for="fld_rf26" class="control-label">First name <b>*</b> </label>
    <div class="control-input">
        <input name="f[rf26][]" id="fld_rf26" class="form-control dovalidation" value="Łukasz" type="text">
    </div>
</div>

You can see two ‘id’ attributes here. The first one (rf26) designates the entire field, including its name; the second one (fld_rf26) only designates the text field where you enter data. Having this information, we can use JavaScript to disable this field. To do this, enter a command in the following format:

$('#fld_rf26').prop('disabled', true);

into the function

$(document).ready(function(){

This command needs to be placed between the brackets {} of this function. The First name field has just been disabled and the attendee will be unable to change its value. You can do this with any text field.

6. How to hide a form field?

Hiding a field in the administration panel will also hide it on the attendee sheet. Sometimes, though, we want to store some data in a field but we want it to be hidden from the attendee. We can use either CSS or JavaScript code to do this. We will need the field ID as well.

CSS: You only need to add a single line in the CSS editor:

#rf26 {display:none !important}

and the field will be hidden.

JavaScript: Just like in the case of disabling the field, add a command in the following format:

$('#rf26').addClass('hidden');

into the function

$(document).ready(function(){

and the field will be hidden.

You only need to use one of these methods. I recommend using CSS because it’s loaded before JavaScript is executed. In the case of JavaScript, the field may be visible for a split second.

7. How do I integrate external analytics services?

This is much easier because usually it’s the service provider that gives you the code snippet you need to put on your website. To add any code/script into the code of the website built with CONREGO, you only need to go to the Additional header/footer code tab in the Code Editor, paste the code and save. Et voila!


Lukasz Krawczuk

Share with friends

Share with friends

Stay up-to-date and subscribe to CONREGO Newsletter