5.1 Add Housing Forms

The process for creating Housing Provider and Housing Seeker forms and lists is similar to the process of creating Job Provider and Service Provider forms and lists that we covered in a previous article.

Designing the Forms…. Questions we will ask
The first three questions are Housing Provider (or seeker) Name, Email and Phone Number.

The fourth question is location. We will create a Table for Housing Provider Cities and Housing Seeker Cities in a Single Select Drop Down Database Join so we can add more cities if needed.

The fifth question is Housing Type Offered (or sought). We will use Multi Select Drop Down Database Join so more than one option can be selected. 14 Housing Type Options will be:

01

The sixth question will be a radio select for Maximum Number of People: One Two Three Four Five or More.

The seventh question will be radio select for Are Pets Allowed
The 7 options are: No, Yes with Additional Deposit, Dog Only, Small Dog Only, Cat Only, Dog and or Cat, Negotiable.

The eighth question will be a radio select for Monthly Rent Range

Under $600 $600 to $1000 $1000 to $1400 $1400 to $1800

More than $1800

We will also need to add a UserID element to connect this form with our Joomla Member Management System.

The last question will be an Additional Info text area box

We will then make group and access levels for Housing Provders and Housing Seekers.We will then make menu items both groups. We will then add Demo Housing Providers and Seekers and test the system. We will finish by validating the required elements on both forms.

Create the Housing Provider City Form Group and List
To create our Housing Provider form, go to Fabrik Forms and click New. For Form Label, type Housing Provider Info. Then click on the Form Processing tab. For Table name, type: ace_housing_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 Housing Provider Info Group
Rather than having the Housing Provider Intro text at the beginning of the Housing Provider Info form, it is better to place it inside the Housing Provider Info Group. This will make it easier to hide this text on our Housing Provider Profile Page. Here is the Housing Provider Intro text:

The phone and additional info 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. For provider email, please indicate your business email or your personal email. Please select 1 to 2 Housing categories. If you do not see your City or Housing Category in the current options, email us to add a City or Category to the list. You can use the Housing Provider Profile Page to provide more details about the Housing 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 Housing Provider Profile Page Group
We need a separate group to hold our Housing Provider Profile Page element. Go to Groups, click New and for Label, call the group Housing Provider Profile Page. For label, type Housing Provider Profile Page. For Form, select Housing Provider Info. Then click Save and Close. All elements in the Housing Provider Info form except the Housing Provider Profile page element, will be in the default Housing Provider Info group.

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

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

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

Add Housing City and Housing Type Forms
We still need to add 6 more elements to our Job Service Provider Info form. These are Housing City, Housing Type, Number of People, Rental Price Range, Userid and Housing Provider Profile Page. However, because they have several options and may have more over time, we first need to create Housing City and Housing Type forms. Because the Housing City and Housing Type need their own custom form, we will add the Housing City and Housing Type elements to our Housing Provider Info form AFTER creating these two special forms.

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

Then click on the Form Processing tab. For Table name, type: ace_housing_provider_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. Then click Save and Close. Edit the form to add the Intro text back. Click Save & Close.

Add a Housing Provider City Element to our Housing City Form
In the Housing Provider City form row, click Add to add a new element. For label, type Housing Provider City. For Name, type housing_provider_city. Change the group to Housing Provider City. Then click Save and Close.

Add City Values to our Housing Provider City Element
In the Elements screen, change the form filter to Housing 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. Housing City, View Data. Then click Add to add our first city. 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 Housing Provider cities:

02

Add a Housing Type Offered Form
We want to have the ability to add new Housing Types if needed. The easiest way to do this is to create a Housing Types Form which will also create a Housing Types editable list.

The Housing Types form will only have one default group called Housing Types. We will then add only one element called Housing Type Offered using a normal field element. Then in Foms or List, click View Data to add the Housing Type Offered Names.

To add the Housing Types form, click on Forms, New. For Label, type: Housing Type Offered. For Intro, copy paste: This is a list of our housing types. Contact us if you want to add a new type.

Then click on the Form Processing tab and for Table name, type: ace_housing_type_offered. Click Save. Then click Save and Close. Then click on the Housing Types form again to add the Intro text again. Then click Save and Close again.

Add a Housing Types Name Element to the Housing Types Form
In the Fabrik Forms screen, click on the Housing Types Add button to add a new element. For the Label, type Housing Type 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 Housing Type Offfered group. Then click Save and Close. Then change the Filter, Form to Housing Type Offered. Then to the right of the new element, click Show in List. Also hide the ID and time elements from the list.

Add Types to the Housing Types List
In Foms or List, in the Housing Types row, click View Data. Then click Add in the upper left corner to add the Housing Types.

Type in our first category, Emergency Shelter. Then click Save and Add to add each remaining category.

03

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

04

For Table, select housing_provider_city. For Value, select id. For Label, select housing_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 Housing City. Then click Save and New.

Add a Database Join Element to Connect our Housing Provider Info Form to our Housing Types form
For the next element, for Label, type Housing Type Offered. For Name, type housing_type_offered. For pluging, select database join. For group, select Housing Provider Info. Then click on the Data tab. Change Render As from Drop Down to MultiSelect DropDown. For table, select Housing Type Offered. For Value, select ID. For label, select Housing Type Name. Then click on Add option in front end. Change Add option in front end from No to Yes. Then click Save to confirm the Housing Type Offered form was found for the Popup form. Then click Save and New.

Add Maximum Number of People Element
For Label, type Maximum Number of People. For Name, type number_of_people. For Plugin, select RadioButton. Click Plus to create five options. For options, use: One Two Three Four Five or More. Then click Save and New.

Add Are Pets Allowed Element
For Label, type Are Pets Allowed. For Name, type are_pets_allowed. For Plugin, select RadioButton. Click Plus to create 7 options: No Pets, Yes with Additional Deposit, Dog Only, Small Dog Only, Cat Only, Dog and or Cat, Negotiable. Then click Save and New.

Add Rental Price Range Element
For Label, type Rental Price Range. For Name, type price_range. For Plugin, select RadioButton. Click Plus to create five options. For options, use: Under $600 $600 to $1000 $1000 to $1400 $1400 to $1800 More than $1800. Then click Save and New.

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

Add a Housing Provider Profile Page Box with Editor
For Label, type Housing Provider Profile Page. For name, type housing_provider_profile_page. For plugin, select textarea. For Group, select Housing 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. Click Save & Close.

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

View the Housing Provider Form
To view the Housing Provider Info form, click Forms, Housing Provider Info View Data. Then click Add. Here is the top of the form:

05

Here is the rest of the form:

06

Next, we will create the Housing Seeker form which is nearly identical to the Housing Provider form.

Create the Housing Seeker City Form Group and List
To create our Housing Seeker form, go to Fabrik Forms and click New. For Form Label, type Housing Seeker Info. Then click on the Form Processing tab. For Table name, type: ace_housing_seeker_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 Housing Seeker Info Group
Rather than having the Housing Seeker Intro text at the beginning of the Housing Seeker Info form, it is better to place it inside the Housing Seeker Info Group. This will make it easier to hide this text on our Housing Seeker Profile Page. Here is the Housing Seeker Intro text:

The phone and additional info fields below are optional. The rest of the fields are required as they are using by our Network Search Engine. For Housing Seeker Name, please indicate your name. For Housing Seeker email, please indicate your personal email. Please select 1 to 2 Housing Types. If you do not see your City or Housing Type Needed in the current options, email us to add a City or Type to the list. You can use the Housing Seeker Profile Page to provide more details about the Housing you are are seeking including images 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 Housing Seeker Profile Page Group
We need a separate group to hold our Housing Seeker Profile Page element. Go to Groups, click New and for Label, call the group Housing Seeker Profile Page. For label, type Housing Seeker Profile Page. For Form, select Housing Seeker Info. Then click Save and Close. All elements in the Housing Seeker Info form except the Housing Seeker Profile page element, will be in the default Housing Seeker Info group.

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

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

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

Add Housing Seeker City and Housing Type Sought Forms
We still need to add 6 more elements to our Job Service Provider Info form. These are Housing Seeker City, Housing Type Sought, Number of People, Rental Price Range, Userid and Housing Seeker Profile Page. However, because they have several options and may have more over time, we first need to create Housing City and Housing Type forms. Because the Housing City and Housing Type need their own custom form, we will add the Housing City and Housing Type elements to our Housing Seeker Info form AFTER creating these two special forms.

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

Then click on the Form Processing tab. For Table name, type: ace_housing_seeker_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. Then click Save and Close. Edit the form to add the Intro text back. Click Save & Close.

Add a Housing Seeker City Element to our Housing Seeker City Form
In the Housing Seeker City form row, click Add to add a new element. For label, type Housing Seeker City. For Name, type housing_seeker_city. Change the group to Housing Seeker City. Then click Save and Close.

Add City Values to our Housing Seeker City Element
In the Elements screen, change the form filter to Housing Seeker City and for the Seeker City element, change Display in List to Yes. Hide the ID and Date Time elements from the List. Then click Forms. Housing Seeker City, View Data. Then click Add to add our first city. Click Save and repeat to add these remaining 8 cities: Ferndale, Lynden, Blaine, Birch Bay, Custer, Deming, Everson, Sumas

Add a Housing Type Sought Form
We want to have the ability to add new Housing Types if needed. The easiest way to do this is to create a Housing Type Sought Form which will also create a Housing Type Sought editable list.

The Housing Type Sought form will only have one default group called Housing Type Sought. We will add only one element called Housing Type Sought using a normal field element. Then in Foms or List, click View Data to add the Housing Type Sought Names. To add the Housing Types form, click on Forms, New. For Label, type: Housing Type Sought. For Intro, copy paste: This is a list of our housing types. Contact us if you want to add a new type.

Then click on the Form Processing tab and for Table name, type: ace_housing_type_sought. Click Save. Then click Save and Close. Then click on the Housing Type Sought form again to add the Intro text again. Then click Save and Close again.

Add a Housing Type Name Element to the Housing Sought Form
In the Fabrik Forms screen, click on the Housing Types Add button to add a new element. For the Label, type Housing Type 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 Housing Type Sought group. Then click Save and Close. Then change the Filter, Form to Housing Type Sought. Then to the right of the new element, click Show in List. Also hide the ID and time elements from the list.

Add Housing Types to the Housing Type Sought List
In Foms, in the Housing Types row, click View Data. Then click Add in the upper left corner to add the Housing Types. Type in our first category. Then click Save and Add for each remaining type.

07

Add a Database Join Element to Connect our Housing Seeker Info Form to our Housing Seeker City form
Go to Forms, Housing Seeker Info form row. Then click Add to add a new element. For Title, type Housing Seeker City. For Name, type housing_seeker_city. For pluging, select database join. For group, select Housing Seeker Info. Then click on the Data tab. For Table, select housing_seeker_city. For Value, select id. For Label, select housing_seeker_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 Housing Seeker City. Then click Save and New.

Add a Database Join Element to Connect our Housing Seeker Info Form to our Housing Type Sought form
For the next element, for Label, type Housing Type Sought. For Name, type housing_type_sought. For pluging, select database join. For group, select Housing Seeker Info. Then click on the Data tab. Change Render As from Drop Down to MultiSelect DropDown. For table, select Housing Type Sought. For Value, select ID. For label, select Housing Type Name. Then click on Add option in front end. Change Add option in front end from No to Yes. Then click Save to confirm the Housing Type Sought form was found for the Popup form. Then click Save and New.

Add Maximum Number of People Element
For Label, type Maximum Number of People. For Name, type number_of_people. For Plugin, select RadioButton. Click Plus to create five options. For options, use: One Two Three Four Five or More. Then click Save and New.

Add Rental Price Range Element
For Label, type Rental Price Range. For Name, type price_range. For Plugin, select RadioButton. Click Plus to create five options. For options, use: Under $600 $600 to $1000 $1000 to $1400 $1400 to $1800 More than $1800. Then click Save and New.

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

Add a Housing Seeker Profile Page Box with Editor
For Label, type Housing Seeker Profile Page. For name, type housing_seeker_profile_page. For plugin, select textarea. For Group, select Housing Seeker 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. Then click Save and Close.

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

View the Housing Seeker Form
To view the Housing Seeker Info form, click Forms, Housing Seeker Info View Data. Then click Add. Here is the top of the form:

08

Here is the rest of the form:

09

Congratulations! You now have your Housing Provider and Housing Seeker forms.

What’s Next?
In the next article, we will add our Housing Provider and Housing Seeker Groups, Access Levels, Menus and Menu Items. We will then add DEMO users to test the system and make sure it works.