Contact Forms

This shortcode allows adding a section with contact forms to the page.

How To Add Contact Forms Widget To Your Page

  1. Click the   icon to create a Section.
  2. Set your Column structure.
  3. Right-click to Edit, Duplicate, Copy, Delete, etc.
  4. Insert Widget using drag and drop inside your Columns.

5. Choose Widget style (ZYL Classic, Contact Form 17, or Contact Form 16)  in the  Layout section.

ZYL Classic Layout:

Contact Form 16 Layout:

6. Customize widget and add content in  Content Section.  Here you can also customize content Typography.

Content Settings:

1. ZYL Classic Layout

Title - Please, enter the title text here.

Use the custom font for title? - Turn on the switch if you want to customize the title font.

Contact Form - Please, add your form id from the shortcode Contact Form 7 Plugin.

Max inputs per row - Please, select the value of the max input per row.

Border radius for fields - Enter border radius for fields. The value must be with the unit. For example: 5px.

Enable full width button? - Turn on the switcher if you want to display the full-width button.

Border radius for button - Enter border radius for the button. The value must be with the unit. For example: 5px.

Button align - Please, select the button alignment. This option for not the full-width button.

Background color for text fields - Here you can choose the background color for the text fields.

Form Max width - Choose max-width for the form in px, % or VH.

Delete border and box shadow? - Turn on the switcher if you want to delete the border and box-shadow from the current contact form.

How to customize typography you can check in Typography Settings Category:

2. Contact Form 16 Layout

Contact Form - Please, add your form id from the shortcode Contact Form 7 Plugin.

Use the custom font for valid-tip? - Turn on the switcher if you want to customize the font of the valid tip text.

Use the custom font for notices? - Turn on the switcher if you want to customize the font of the notice text.

Button Settings:

How to customize typography you can check in Typography Settings Category:

Advanced Settings:

  1. Margin: Set the section Margin.
  2. Padding: Set the section Padding.
  3. Z-index: Set the Z-Index. 
  4. CSS ID: Set a CSS ID for your section.
  5. CSS Classes: Set CSS Classes for your section.

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. 
  3. Entrance Animation: Click the dropdown to choose an animation.

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border-radius to control corner roundness
  3. Box Shadow: Adjust box-shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed is selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse the order of your columns (Great for Mobile).
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile