Jump to content

- - - - -

Additional Contacts List, Grid List or Grid Table

  • Please log in to reply
1 reply to this topic

#1 DanielH


    Advanced Member

  • Members
  • PipPipPip
  • 393 posts

Posted 05 October 2016 - 07:04 AM


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:


For example your path should look like this:


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


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:
Attached File  add-contact-form.png   23.17KB   1 downloads


The three different output examples. Did not include checks in the php for empty inputs.
Attached File  add-contact-output.png   46.64KB   0 downloads

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



Edited by DanielH, 05 October 2016 - 11:34 AM.

  • Ant likes this

#2 Alejandro


    Advanced Member

  • Administrators
  • 32504 posts

Posted 05 October 2016 - 07:14 AM

Nice! Thank you for taking the time to share it.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users