Additional Contacts List, Grid List or Grid Table

[DanielH]

Hello,

Nothing special just a very simple additional contact form, with some css, and different layouts allowing businesses to submit additional contact information. It's a great way to use one Contact field group or your current Contact group with your current email, phone etc...custom fields to offer some options. If using PaidListings add-on or custom access levels this field can be set to specific user groups.

 

Add the fields_phpformat folder to your:

   /templates/jreviews_overrides/views/themes/mytheme/

For example your path should look like this:

   /templates/jreviews_overrides/views/themes/mytheme/fields_phpformat

If you don't already use custom css in your template upload the custom.css to:

   /templates/yourtrmplateused/css/custom.css

If you already have custom styles in your template copy and paste the css markup below to your templates custom.css.

/**Additional Contacts Formbuilder Output classes **/
/** Contacts List and Contacts Grid List **/
.deptTitle {
    font-weight: bold;
}
.jrAdditionalcontacts> .jrFieldValue > .jrGrid > .jrCol4 {
    margin-left: 0;
}

Create a new formbuilder custom field type and name it "Additional Contacts". By default this will add the    field value "jradditionalcontacts". NOTE: This value is used for jreviews class names in the field output. If you name your custom field something else then the custom.css class .jrAdditionalcontacts will need to be changed to your fields output css value. You can firebug the field output to get the exact class name.

Add schema code from the schema.txt file to the json editor.

 

Add the corresponding phpformat .thtml file name, (example: contacts_grid_list) to the "PHP Based Formatting" field. or leave blank and copy the contents to the php editor minus the opening "<?php" tag.

 

and save...

 

to select another layout change the file name in the or the code in the PHP Based Formatting.

 

Used an array grid instead of an object table in the form json schema because the object table was to wide for mobile forms and each input field ends up way to narrow.

 

The grid submit field form will look like this:

 

The three different output examples. Did not include checks in the php for empty inputs.


Contacts List:
Normal jreviews output ul list styled using the jr class ".jrNoStyle"

Contact Grid List:
Same ul style plus in a jr responsive grid. The custom.css for this form removes the margin-left so the blocks will align. Jreviews default css already removes the margin-left from the first child.

Contact Grid Table:
The table is Jreviews default class styling. Not happy with how it works on mobile. On mobile landscape its not too bad. If you'd like add the hidden-sm classes to the colums/headers you want to hide for things to fit.

 

Contacts schema and phpformat

 

Cheers!
Daniel

Edited October 5, 2016 at 04:34 PM by DanielH

[Alejandro]

This section is only visible with a valid subscription. If you have a valid subscription, please login.