3.4 Create Your Job and Service Provider Forms

In our last article, we finished the Fabrik Member Registration form and matched its elements to the default Joomla Registration form elements so that we can replace the Joomla Registration form with our custom Member Registration form. In this article, we will create our Job Provider and Service Provider Info forms.

Seven Steps to Become a Job Provider
We will create a separate form called Job Provider Info so we can handle Job Provider group permissions, display and access differently from our New Member Group permissions. Job Providers will first need to come to one of our meetings and fill out the Job Provider Membership form. They will then need to go online and register as members. They will then need to and wait for their membership to be activated. They can then go back online and sign in with their Member username and password. They will then see a Job Provider menu where there will be the Job Provider Info Signup form that they will need to fill out. They can then click on the Job Provider List to confirm that they have been added to the List.

01

Create your Job Provider Info Form, Group and List
To create our Job Provider form, go to Fabrik Forms and click New. For Form Label, type Job Provider Info. Then click on the Form Processing tab. For Table name, type: ace_job_provider_info. This will add our ace three letter prefix to the table name to keep all of our Fabrik forms at the top of our database. Click the Layout Tab and change Show Title to No. Then click Save and leave the form at the default content type. Then click Save and Close.

Add an Intro to the Job Provider Info Group
Rather than having the Job Provider Intro text at the beginning of the Job Provider Info form, it is better to place it inside the Job Provider Info Group. This will make it easier to hide this text on our Job Provider Profile Page. Here is the Job Provider Intro text:

The website and phone fields below are optional. The rest of the fields are required as they are using by our Network Search Engine. For Provider Name, please indicate either the name of your business or your name and the name of your job. For provider email, please indicate your business email or your personal email. Please select 1 to 3 Job categories. To select more than one category, hold down the Control Key. If you do not see your City or Job Category in the current options, email us to add a City or Category to the list. You can use the Job Provider Profile Page to provide more details about the job you are offering including images and videos if you wish. To add an image, simply click on the Image Icon in the editor. To add a link to another web page, click on the link icon. You can also change the font family, font size and font color.

Create a Job Provider Profile Page Group
We need a separate group to hold our Job Provider Profile Page element. Go to Groups, click New and for Label, call the group Job Provider Profile Page. For label, type Job Provider Profile Page. Then click Save and Close. All elements in this form except the Job Provider Profile page element, will be in the default Job Provider Info group.

Add Job Provider Name Box
Go to the Provider Info form and click Add to add our first element. First field: For Label, copy paste: Job Provider Name For Name, copy paste: job_provider_name. For Plugin, leave it at field. For group, select Job Provider Info. Then click Save and New.

Add a Job Provider Email Box
For Label, copy paste: Job Provider Email. For Name, copy paste: job_provider_email. For Plugin, leave it at field. For group, leave it at Job Provider Info. Then click on the Advanced tab and for Input type, select Email. Then click Save and New.

Add a Job Provider Website Box
For Label, type Job Provider Website. For Name, type job_provider_website. For plugin, leave it at Field. For Group, select Job Provider Info.Then click on the Advanced tab and change Input type to URL. Then click Save and New.

Add a Job Provider Phone box
For Label, type Job Provider Phone. For Name, type job_provider_phone. For plugin, leave it at Field. For Group, select Job Provider Info. Then click on the Advanced tab and change it to Phone Number. Then click Save and Close.

Add Job City and Job Category Forms
We still need to add 3 more elements to our Job Service Provider Info form. These are Job City, Job Category and Job Provider Profile Page. However, because they have several options and may have more over time, we first need to create special Job City and Job Category forms. Because the Job City and Job Category need their own custom form, we will add the Job City and Job Category elements to our Job Provider Info form AFTER creating these two special forms.

Create your Job City Form
Go to the Fabrik Forms screen and click New. Then for Label, type Job City. For Intro, copy paste: This is a list of our current job provider Cities. To add a new City, type the City name in the Job City box. Then click the Save button.

Then click on the Form Processing tab. For Table name, type: ace_job_city. This will add our three letter prefix to the table name to keep all of our Fabrik forms at the top of our database. Then click Save. Leave the form at the default content type. Then click Save and Close. Edit the form to add the Intro text back. Click Save & Close.

Add a Job Provider City Element to our Job City Form
In the Job Provider City form row, click Add to add a new element. Call it Job Provider City. Change the group to Job City. Then click Save and Close.

Add City Values to our Job Provider City Element
In the Elements screen, change the form filter to Job City and for the provider city element, change Display in List to Yes. Hide the ID and Date Time elements from the List. Then click Forms. Job City, View Data. Then click Add to add our first city:

02

Click Save and repeat to add these remaining 8 cities: Ferndale, Lynden, Blaine, Birch Bay, Custer, Deming, Everson, Sumas

Here is the top of our finished initial list of of 9 Job Provider cities:

03

Add a Job Categories Form
We want to have the ability to add a new Job Provider category if needed. The easiest way to do this is to create a Job Categories Form which will also create a Job Categories editable list. The Job Categories form will only have one default group called Job Categories. We will then add only one element called Job Category Name using a normal field element. Then in Foms or List, click View Data to add the Category Names.

To add the Provider Categories form, click on Forms, New. For Label, type: Job Categories. For Intro, copy paste: This is a list of our job categories. Contact us if you want to add a new category.

Then click on the Form Processing tab and for Table name, type: ace_job_categories. Click Save. Leave the Content Type at Default and click Save and Close. Then click on the Provider Categories form again.

04

Sadly, on the first save only, the Intro text is replaced by <span style=. Delete this line and copy paste the Intro text in again and click Save and Close. Then open the Form again to confirm that this time the Intro Text has not changed. Then click Save and Close again.

Add a Job Category Name Element to the Job Category Form
In the Fabrik Forms screen, click on the Job Categories Add button to add a new element. For the Label, type Job Category Name. It will automatically add a Name with the same text but in lower case with no spaces. Also remember to change the group to the Job Categories group. Then click Save and Close. Then change the Filter, Form to Job Categories. Then to the right of the new element, click Show in List. Also hide the ID and time elements from the list.

Add Categories to the Job Category List
In Foms or List, in the Job Category row, click View Data. Then click Add in the upper left corner to add the Category Names.

05

Type in our first category, Accounting. Then click Save and Add to add each remaining category. This is where we will add our initial 40 Service Provider categories (we can always add more later).

Top

06

bottom

07

Here is what the top of our finished list looks like:

08

Add a Database Join Element to Connect our Job Provider Info Form to our Job City form
Go to Forms, Job Provider Info form row. Then click Add to add a new element. For Title, type Job City. For Name, type job_city. For pluging, select database join. For group, select Job Provider Info. Then click on the Data tab:

09

For Table, select job_city. For Value, select id. For Label, select job_provider_city. Then click on the Add option in front end tab. Change Add option in front end to Yes. Leave Link to joined record to No. Click Save to confirm the Popup selected Job City.

10

Then click Save and New.

Add a Database Join Element to Connect our Job Provider Info Form to our Job Category form
For the next element, for Label, type Job Category. For Name, type job_category. For pluging, select database join. For group, select Job Provider Info. Then click on the Data tab. Change Render As from Drop Down to MultiSelect DropDown. For table, select Job Categories. For Value, select ID. For label, select Job Category.

11

Then click on Add option in front end. Change Add option in front end from No to Yes. Then click Save to confirm the Job Categories form was found for the Popup form. Then click Save and New.

Add a User ID element
For Label, type UserID. For name, type userid. For plugin, select User. For group, Job Provider Info. For Show, change it to Hidden. Then click Save and New.

Add a Job Provider Profile Page Box with Editor
Next, add a Job Provider Profile Page box. For Label, type Job Provider Profile Page. For name, type job_provider_profile_page. For plugin, select textarea. For Group, select Job Provider Profile Page. Click the Layout tab and change width to 80 and Height to 40. Click the Advanced tab and change Show Label to Yes. WYSIWYG Editor to Yes and Extended buttons to No and Data Type to 16MB.

12

Then click Save and Close.

Select the elements to display in the Job Provider List
Click Fabrik Elements. Then filter for the Job Provider Info form. Move the Job Provider City to the top of the list. For show in list, leave everything unchecked except City, Name and Category.

View the Job Provider Form
To View the Provider Info form in the backend, click Forms, Job Provider Info View Data. Then click Add. Here is the top of the form:

13

Seven Steps to become a Service Provider
The steps for becoming a Service Provider are similar to the steps to become a Job Provider:

14
To create our Service Provider form, go to Fabrik Forms and click New. For Form Label, type Service Provider Info. Then click on the Form Processing tab. For Table name, type: ace_service_provider_info Click on the Layout tab and change Show Title from Yes to No. Then click Save. Then Save and Close.

Add an Intro to the Job Provider Info Group
Rather than having the Job Provider Intro text at the beginning of the Job Provider Info form, it is better to place it inside the Job Provider Info Group. This will make it easier to hide this text on our Job Provider Profile Page. Here is the Job Provider Intro text:

If you have paid for a Service Provider membership, then fill out this form. The website and phone fields below are optional. The rest of the fields are required as they are using by our Network Search Engine. For Provider Name, please indicate either the name of your business or your name and the name of your service. For provider email, please indicate your business email or your personal email. Please select 1 to 3 Service categories. To select more than one category, hold down the Control Key. If you do not see your City or Service Category in the current options, email us to add a City or Category to the list. You can use the Service Provider Profile Page to provide more details about the service you are offering including images and videos if you wish. To add an image, simply click on the Image Icon in the editor. To add a link to another web page, click on the link icon. You can also change the font family, font size and font color. Please read our article on how to create your own Provider Photo before you upload your Provider Photo.

Create a Job Provider Profile Page Group
We need a separate group to hold our Job Provider Profile Page element. Go to Groups, click New and for Label, call the group Job Provider Profile Page. For label, type Job Provider Profile Page. Then click Save and Close. All elements in this form except the Job Provider Profile page element, will be in the default Job Provider Info group.

Add Service Provider Name Box
Go to the Service Provider Info form and click Add. For Label, copy paste: Service Provider Name For Name, copy paste: service_provider_name. For Plugin, leave it at field. For group, select Service Provider Info. Then click Save and New.

Add a Service Provider Email Box
For Label, copy paste: Service Provider Email. For Name, copy paste: service_provider_email. For Plugin, leave it at field. For group, leave it at Service Provider Info. Then click on the Advanced tab and for Input type, select Email. Then click Save and New.

Add a Service Provider Website Box
For Label, type Service Provider Website. For Name, type service_provider_website. For plugin, leave it at Field. For Group, select Service Provider Info.Then click on the Advanced tab and change Input type to URL. Then click Save and New.

Add a Service Provider Phone box
For Label, type Service Provider Phone. For Name, type service_provider_phone. For plugin, leave it at Field. For Group, select Service Provider Info. Then click on the Advanced tab and change it to Phone Number. Then click Save and Close.

Add Service Provider City and Service Category Forms
Make a new form for this identical to the Job City form but called Service Provider City with the Table name ace_service_provider_city. Then click Save. Then Save and Close. Add an element to this form called Service Provider City. Then hide the time and ID elements from the List and show just the Service Provider City. Then go to View Data, Add to add the 8 cities.

Then make a new form identical to the Job Categories form but called Service Categories with the Table name ace_service_category. Then click Save. Then Save and Close. Add an element to this form called Service Provider Category. Place it in the Service Categories group. Then click Save and Close. Then hide the time and ID elements from the List and show just the Service Provider Category. Then go Go to View Data Add to add all of the categories.

Add a Database Join Element to Connect our Service Provider Info Form to our Service Provider City form
Go to Forms, Service Provider Info form. Then click Add to add a new element. For Title, type Service Provider City. For Name, type service_provider_city. For pluging, select database join. For group, select Service Provider Info. Then click on the Data tab. For Table, select Service_provider_city. For Value, select id. For Label, select service_provider_city. Then click on the Add option in front end tab and change Add option in front end to Yes. Leave Link to joined record to No. Then click Save and New.

Add a Database Join Element to Connect our Service Category
For the next element, for Label, type Service Category. For Name, type service_category. For pluging, select database join. For group, select Service Provider Info. Then click on the Data tab. Change Render As from Drop Down to MultiSelect DropDown. For table, select Service Categories. For Value, select ID. For label, select Service Category. Then click on Add option in front end. Change Add option in front end from No to Yes. Then click Save and New.

Add an Service Provider Image Upload Element
For Label, type Provider Photo For name, type: provider_photo
For plugin, change it to fileupload. For group, leave it at Service Provider Info. The image settings have 8 tabs. Here are the first 7:

15

Nearly all tabs can be left at their default settings. On the Options tab, reduce Maximum File Size to 200. Then change the upload directory to: /images/members/{$my→username} Then click Save & Close. We will also write an article about how to create, resize, crop and upload a Provider Photo for the Service Provider menu.

Add a User ID element
For Label, type UserID. For name, type userid. For plugin, select User. For group, Service Provider Info. For Show, change it to Hidden. Then click Save and New.

Add a Service Provider Profile Page
For Label, type Service Provider Profile Page. For name, type service_provider_profile_page. For plugin, select textarea. For Group, select Service Provider Profile Page. Click the Layout tab and change width to 80 and Height to 40. Click the Advanced tab and change Show Label to Yes. WYSIWYG Editor to Yes, Extended buttons to No and Data Type to 16MB. Then click Save and Close.

Select the elements to display in the Service Provider List
Click on Fabrik Elements. Then filter for the Service Provider Info form. Move the Service Provider City to the top of the list. For show in list, leave everything unchecked except Service Provider City, Service Provider Name and Service Category and Provider Photo.

View the Service Provider Info List To View the Service Provider Info form in the backend, click Forms, Service Provider Info form View Data. Then click Add. Here is the Service Provider form:

16

Note that Service Provider City is a Single Select Database Join element while Service Category is a Multi Select Database Join element. The Plus signs allow us to add new Cities and Categories on the back end but the plus signs are not present on the front end. So folks need to email us if they want to add a new city or category.

Congratulations! You have now completed your Job Provider and Service Provider Info forms.

What’s Next? In the next article, we will set up front end menu items so we can add our Demo Members to test how well our new Job and Service Provider Network works.