Form (PRO)

Form builder is one of the most demanded elements, it allows your visitors to send you messages without having to leave your page to request more information about your services or products. WIth Form builder you will be able to add as many fields you need, each one set to a different type, creating powerful forms. Element available on Quix Pro only.

To use this element, please follow this steps:

  1. After adding a Section and Column, click the Plus icon to open the available elements.
  2. Click Form and it will be added to your page and its settings window will automatically open so you can start configuring it.

On it's Settings pop-up you will find three tabs, General, Styles and Advanced. On each tab you will find the different options available to modify and customize the element.

General Tab

  • Form Fields - Right at the top, you will find three default Form fields, you can edit them (click on each one to open the options), duplicate them (click on the two squares icon), remove them (click on the trash icon), rearrange them (click the arrows icon and drag it to where you need), and add new fields to your Form by clicking the Plus icon below them. When you click on any of the tabs available, you will get the following options:
    • Name - Type the name for the field, it will help you identify it. It cannot be left empty, it must be unique and must  be one word (do not use blank spaces).
    • Label - Type the field label.
    • Type - There are several field types available, depending on the one selected, the settings will change. This are the field types avaiable:
      • Text - This field can be used to collect any type of information, it will not validate what is written on it. Great to collect names and adresseses.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
      • Date - This field is exclusively meant to input a date.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • Native HTML5 - Enable this option to se an HTML 5 Calendar.
      • Time - This field is exclusively meant to input a time, AM or PM format is used.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • Native HTML5 -
      • DateTime - This field is exclusively meant to input a date and time.
      • Email - This field is exclusively meant to input an email address, the field will check that it has a valid email address format.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
      • Text Area - This field is meant to input large texts, you can use it so that the visitor can enter his message.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • Rows - Set the number of rows the text area will use.
        • Height - Set the height of the text area.
      • URL - This field is exclusively meant to input a URLs. It will validate that the text is a valid URL, http:// or https:// protocols are required at the beginning of the URL.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
      • Tel - This field is exclusively meant to input a numbers.
        • Placeholder - Type what will be shown inside the field before the user starts typing.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
      • Radio - This type will allow you to create Radio Buttons.
        • Options - You can enter different options here, each option has to be entered in a separate line.
        • Inline - Enable this option to show the Radio buttons next to each other insted of on a list.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
      • Select - This type will allow you to create a Dropdown selection box.
        • Options - You can enter different options here, each option has to be entered in a separate line.
        • Multiple Selection - Enable this option if you want to allow the users to select more than one option.
      • Checkbox - This type will allow you to create Checkboxes.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • Options - You can enter different options here, each option has to be entered in a separate line.
        • Inline - Enable this option to show the Radio buttons next to each other insted of on a list.
      • Acceptance - This will create a Checkbox that must be checked to be able to send the form. Useful to acknowledge the user accepts your Privacy Policy.
        • Required - Enabling this option will make the field required, so it must be filled before being able to submit the form.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • Acceptance Text - Here you need to write the Acceptance text, describing what the user is accepting. You can insert links to your privacy policy. You can also style the text using the options available on the text editor, insert lists, tables, creating lists and selecting the text alignment.
        • Checked by Default - Enable this option to have the checkbox checked automatically when the Form is loaded.
      • HTML - This type allows you to create a field using HTML code.
        • Column Width - Set the field's column widht, it is useful to allow more than one field on the same row.
        • HTML - You can write the code for the field here.
      • Hidden - This will create a field that is not visible for the user, but that will be sent on the generated email.
        • Value - Enter the value for the field.
    • Shortcode - This shortcode can be used later on the Email - Content Field, instead of using the [all-fields] shortcode, you can use this one to style the message you will receive.
    • Help Text - This text will show under the field, it can be used to provide more information about the field.
  • Options - Here you can configure different options available in the Form.
    • From Name - This settings is specially useful if you use more than one From in your site, as it allows you to easily identify each one.
    • Show Form Label - The label is the name of the field and is dispayed outside of the field, this setiings can enable it or disable it.
    • Show Required Mark Sign - Disable this option if you don't want to visually show when a field is required.
    • Show Captcha - Enable this option to add a Captcha to the form, this will help avoid SPAM submissions.
    • reCaptcha Type - Here you can select between the two avaliable captchas, a simple math captcha and Google's Invisible Recaptcha.
    • reCaptcha Title - This will appear before the captcha.
    • reCaptcha Placeholder - If Simple Match Captcha is selected, this text will show on the field where the result should be written.
    • Custom Messages - Enable this option to set custom messages for different events. Useful for translations.
    • Success Message - This message will show after the Form is succesfully submitted.
    • Error Message - This message will show if there is an error when trying to submit the Form.
    • Captcha Error Message - This message will show if there is an error in the Captcha.
  • Actions After Submit - Configure what happens after the message is submitted.
    • Add Action - Here you can select Email and Email 2. Adding Email 2 will add the option to configure a second email to send the message two, the fields will be the same as the ones available on Email.
  • Email - Configure the email you will receive.
    • Email Subject - Type the subject for the email.
    • Email Content - Configure the content you will receive on your email.
    • To - Set the email address where you want to receive the messages.
    • Reply To - Here you can set what will happen when you click the Reply To button on your email client. There are three options: None, System Email (reply will be sent to the email set on the Global Configurations) and Input Email (reply will be sent to the email entered on the form by the visitor).
    • Cc - Set one or more email addresses that will receive a copy of the message. Receivers can see who else got a copy.
    • BCc - Set one or more email addresses that will receive a copy of the message. Receivers can not see who else go a copy-
    • Meta Data - Select the meta data that will be sent with the email. The options are: Date (date the message was sent), Time (time the message was sent), Page URL (adds the URL the message was generated in), User Agent (indicates the browser used to send the message), Remote IP (adds the IP from where the message was sent) and Credit (adds credit for Quix).
    • Send As - You can select if the message should be sent as HTML (formatted) or as Plain Text (unformatted).
  • Submit Button - Settings for the Form's button.
    • Text - Type the text you want the send button to show.
    • Size - Set the button's size, you can choose between Small, Medium and Large.
    • Full Width - Enabling this option will make the button occupy the full width of the column.
    • Column Size - You can change the size of the button when set to Full Width, by changing the size of its column.
    • Alignment - Set the alignment of the button's text, you can set it to the Left, Center or Right of the button.
    • Icon - Click to open the Icon Manager, here you will be able to select an Icon to go next with the button's text.

Styles Tab

The Styles Tab will help you style the Form builder element. You will find four different options, Form, Label, Field and Button, each with its particular settings.

  • Form - Styles for Columns and Rows.
    • Columns Gap - Increase the value to increase the space between the column and the Form fields.
    • Rows Gap - Increase or decrease the value to change the space bewteen each row.
  • Label - Styles for the Form labels.
    • Spacing - Increase or decrease the value to change the space bewteen the label and its field.
    • Text Color - Set the color for the label.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
  • Field - Style settings for the Form Fields.
    • Text Color - Set the color for the field's text.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Background Color - Set the background color for the fields.
    • Border Color - Set the border color for the fields.
    • Border Width - Set the width of the field's borders.
    • Padding - This setting allow you to increase the space between the field's borders and the text.
  • Button - Style settings for the Form's send button.
    • Button Color -
    • Button Hover Color -
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders for each state.
    • Border Type - Use this setting to define the type of border you want for the Button, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - Set the width for the border.
    • Color - Set the color for the border.
    • Border Radius - Use this option to set the radius of the Button's corners to give them a rounded look.
    • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
    • Padding - Increasing the padding of the button will increase the distance between the button's text and the borders, making the button bigger.

Advanced Tab

As it's name says, here you can find the Advanced settings for the element. You can choose to edit them or leave them the way they are depending on your needs.

  • Element Style - Here you will find the settings for Margin, Padding and Z-Index values of the element.
    • Margin - Margins allow you to add space around the element, outside of its container.
    • Padding - Paddings allow you to add space around the element, inside of its container.
    • Z-Index - When two items overlap, the Z-Index value control which one appears on top of the other. An element with a Z-Index of 0 will appear behind an element with a Z-Index of 1.
  • Background - Here you will be able to configure the Background for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
  • Border & Box Shadow - You wil be able to configure Borders and Shadows for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders and shadows for each state.
    • Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - If a Border Type other than None is selected, this option will appear so you can configure the width of the border line for the element.
    • Border Radius - Use this option to set the radius of the corners to give them a rounded look.
    • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
  • Animation - If you want to give your element movement, here is the place to do it.
    • Entrance Animation - Select the animation you want from the options avaliable on the dropdown.
    • Animation Repeat - You can enable this option if you want the animation to repeat everytime the element is visible on the screen. The default value is No, which only plays the animation the first time the element is viewed.
    • Animation Delay - You can set a delay from the moment the element is on the screen to the moment the animation starts. Specially useful if you want to create a cascading effect.
  • Custom CSS (PRO Only) - If you require a bit more customization, you can add your custom CSS here.
    • CSS Code - You can write your own CSS code here that will affect the element. No style tags required.
  • Identifier - Here you can find and customize the unique information for the element.
    • CSS ID - The unique identifier assigned to the element. You can change it, specially to make it easier to work with anchor links, but it always has to be unique to avoid issues.
    • CSS Class - If you would like to write CSS code on an external CSS file to customize the element, you can add an specific CSS Class to identify it so the changes are only applied to the element with the class.
    • Access Control - You will find all the User Groups you have configured on Joomla here. This option will allow you to configure who can view and interact with the access and with what permissions to the page.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us