Creating the Contact Us Page

The Contact Us page has a form users should fill out if they want to contact the company. To create this form, import an object definition and map it to a Form Container fragment.

Importing the Object Definition

  1. Navigate back to http://glance.clarityvisionsolutions.com:8080/.

    You must import the object definition outside of the site template.

  2. Open the Global Menu (Global Menu), select the Control Panel tab, and click Object under Objects.

  3. Click Options (Options) (1) and select Import Object Definition. Name the object definition ContactUsForm, select the 04-glance-contact-us-form-object-definition.json file (that was included in the zip file with the resources for this module) (2), and click Import (3).

    Import the object definition.

    The object definition has four fields (Name, Email Address, Phone, and Comment) and it appears under Object in the Control Panel tab of your Product Menu.

  4. Navigate back to your site template by opening the Global Menu, navigating to the Control Panel tab, clicking Site Templates, and clicking on the name of your site template.

Next, create the Contact Us page and add a form container fragment to it.

Create the Page

  1. Open the Site Menu (Site Menu) and select Site BuilderPages.

  2. Click Add (Add icon) → Add Site Template Page and select the Main template.

  3. Name the page Contact Us and click Add. The page editor appears.

  4. While editing the page, look at the Fragments and Widgets tab on the left of the page editor and search for Contact Us Composition.

  5. Drag and drop the Contact Us Composition in the editing area.

Editing the Content in the Contact Us Page

Alter the elements in the composition. Use the information in the table below:

ComponentContent
(Header) HeadingWe would love to hear from you.
(Header) ParagraphIf you want to contact us, please enter the information below to direct your inquiry.
(Offices - Left Grid) ImageIcon-geolocation.png
(Offices - Left Grid) HeadingNew York Office
(Offices - Left Grid) Paragraph10019, NY. USA
Tel: +1-212-555-0139
nyoffice@clarity.com
(Offices - Middle Grid) ImageIcon-geolocation.png
(Offices - Middle Grid) HeadingRecife Office
(Offices - Middle Grid) ParagraphRua da Aurora, Recife. Brazil
Tel: +55 81 2020-5000
recifeoffice@clarity.com
(Offices - Right Grid) ImageIcon-geolocation.png
(Offices - Right Grid) HeadingTokyo Office
(Offices - Right Grid) ParagraphBunkyo, Tokyo 112-0001
Tel: +81 75 429-7496
tokyooffice@clarity.com

The Contact Us page after the information is entered.

Add your Form Container to the page and map it to the Contact Us Form object definition. The existing form container with a warning was left in the composition so you know where to place your form container.

  1. Look at the Fragments and Widgets tab on the left of the page editor and search for Form Container.

    The form container only appears if you have an object definition in place.

  2. Drag and drop the Form Container into the editing area on top of the existing one and map your form container to the Contact Us Form object.

  3. Drag and drop the fields to reorder them. The order should be Name, Email Address, Phone, and Comment.

  4. Delete the old form container by clicking Options on top of the component and selecting Delete or through the Browser.

  5. With the form mapped and in place, click the Submit button. In the menu on the right, select the General tab and change the Style to Outline Secondary. Then, select the Styles tab and set the Padding Top to 3 rem.

Add a form container to the page and map it to the Contact Us Form object.

  1. Publish the page.

The Contact Us page should look like this when it is finished:

The Contact Us page should look like this when it's finished.

Next: create the Careers page.

Relevant Concepts

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy