The SP Page Builder 4 comes with the Form Builder addon which is an incredibly powerful tool to create functional contact forms on your Joomla site. It has a collection of rich and useful features to create a solid and accessible contact form in minutes.

How to Add a Form Builder Addon

You can add a Form Builder addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add a Form Builder addon.

Form Builder Settings

When you click on the Form Builder addon, the addon inline editor will open up. You can access the Form Builder addon settings and customize the addon to fit your needs. 

Items

From this settings tab, you can set the initial setting o your Form Builder Addon. Set the Field Gutter value, and Bottom Gap value, and add Items to your contact form using the Items settings.

• Field Gutter: Gutter is the space between two columns, in this case, two form items. You can define the gutter for different device types. The greater the value is the bigger the gap becomes.
• Bottom Gap: You can control the horizontal gap among the form items for different device types.
• Items: You can add items to your contact form.

Field

• Field Height: Using this option you can control the field height of all the items in the form.
• Textarea Height: The Input field height controls the height for all the items except for the Textarea type. You can control the field height for the Textarea input type using this option.
• Field Border Radius: The item fields generally come in a rectangular shape, to make a roundish edge around them you can increase the border radius.
• Padding: If you want to control the inside space of the form fields, you can do so using this option.
• Label Margin: Set the label margin for your field labels.

Messages

This section offers you the controls of success and error messages. You can customize each if necessary. 

• Required Field Error Message: You can change the default required filed error message. The content you put here will be shown when someone forgets to fill out the required field. 
• Form Submit Success Message: Write your own successful form submission message. This will appear when a form was submitted successfully.
• Form Submit Failed Message: You can customize the text for a failed form submission attempt. The text you put here will only appear when a form fails to submit. 

Options

• Enable Redirect:  After successfully submitting the form, if you'd like to take your user to a certain link you can put that link after enabling this option.
• Redirect URL: Enter your Redirect link here.
• Enable Captcha: When this option is enabled a form cannot be submitted unless the user answers the Captcha. When using Google reCAPTCHA, remember to enable the reCAPTCHA plugin in your backend and set up the site keys properly in order to use this form. 
• Captcha Type: Choose from a list of Captcha types that best fit your choice.
• Captcha Question: Customize the captcha question to best fit your choice.
• Captcha Answer: Enter the correct answer for your Captch question.
• Enable Policy Checkbox: You can include your user policy text or GDPR if necessary by enabling this option. 
• Terms, Policy, or GDPR Text: Edit and enter your Terms and Policy Texts here.

Customize the Field Items

You can access the Form Builder General settings from the addon’s inline settings tab. The Form Builder General Settings let you add and edit the form items as well as edit the email template. 

Edit Form Items

To edit a form item click on the edit button. This should display a whole new form of the items editing panel. Choose your Field Type, Field Label, Field Name, and Field Placeholder, and also set your field width using these options.

• Is Required Field: Enable this option in case you want to make a field compulsory.
• Show Required Star Mark: Enable this option in case you want to make a star mark appear on top of the required fields.

Edit Email Template

Recipient Email: This is a mandatory field for the addon. The email address you put here will receive the responses collected using this form.

Email Headers: This is another delicate feature of this form. The words you see here wrapped in curly braces are actually the name of field items that you defined earlier when creating an item. For example, you’ve created a form item using the “Email” field type, and in the “Field Name” text box, you wrote “my-email”. Since you’ve named the email item” as “my-email”, you need to change “{{email}}” to “{{my-email}}” here in this section to call your email item.

• Reply-To: Here goes the email address of the person who will get the email when you respond to the submitted request sent via this form.
• Reply-Name: The name of the person you’re replying to.
• Cc: You might want to send a copy of the form back to the person who submitted it. In that case, use the variable “{{email}}” (Or, whatever you defined when creating the item) in this field.
• Bcc: If you want to send a blind copy of the form response, you can put that email address here.

From Email: This is an optional field. You can define a Name and Email address that will be shown as the email address sending you the responses obtained from the form.

??Email Subject: You may use the Form Builder addon in more than one place. To help you categorize them properly, you can take advantage of the “site-name” variable which will put the website address of the form, and the “email” variable to put the sender's email address on the subject.

Email Body: You can put the email content in this field. You can use the word you used in the “Field Name” box for defining the form items as variables. And you need to put those variables in double curly braces “{{}}”

Note: Remember, if you were to use the name or email collected by the form, you need to use the name you defined (in the “Field Name” box) when creating the respective fields.

Add New Form Items 

Click on the “+” button to instantly add your form items to your addon.

Typography Settings

The Typography Settings lets you edit the Field text and the Label text to fit your preference. Adjust your font types, Size, Line Height, Letter Space, Style, and Weight for your Form Builder Fields and Label texts. Learn more about Typography Here.

Color Settings

Use the color settings to choose the colors of your Form Builder addon texts, backgrounds, and other color settings.

Fields

Normal

The Fields tab comes with the field to edit the Background, Text, Placeholder, and Border color.

• Background: This is the color settings for the form fields’ background.
• Text: You can change your Form field text color using this setting.
• Placeholder: Change the placeholder’s text color using this setting.

Hover

This setting lets you customize the color of your Background, Placeholder, and Border color upon hovering. 

Others

Use this setting to access the color settings for Radio, Checkbox, and Label.

Button Settings

The Button Settings comes with all the options necessary to create a fully customized button. 

Label: Enter the button text here. Leave it blank if you don’t want any button.

Style: You can choose a desired button style from the given list.

Appearance: You can choose a suitable button appearance from the list.

Shape: Choose your button shape from the list using this option.

Size: There are numerous options you can choose from to define your button size.

Full Width: Set this option to ‘Yes’ if you want a full-width button. Leave that to ‘No’ if you don’t.

Margin: Set an optimum distance around your button.

Button Icon: Choose your desired icon from a list of available icons in the Icon Library.

Icon Position: Choose whether you want to set the icon position to the left or right of your button text.

Button Link

Add a link to your added button using the Link tab options.

• For URL, simply paste the web address you want to link to into the first field.
• For Menu, select the option you want to link to from the dropdown list. Note that the options on this list are all Menu Items that exist on your website.
• For Pages, select the option you want to from the dropdown list. Like Menu, these options are all existing Pages available on this website.

Lastly, you can enable the option Open in New Tab to open this link in a new tab and No Follow to tell search engines to ignore this link.

Color

Use the Color tab settings to edit the color of your added button on normal and hover state. 

Normal

This tab lets you change the color of your button’s background and the color of the text inside your button.

Hover

This tab lets you change the color of your button’s background and the color of the text inside your button upon hovering.

Learn more about Color settings here.