## Installation

1. Install Elfsight Form Builder WordPress Plugin `elfsight-form-builder-cc.zip` to your website. Don't know how? Please learn here.

2. Go to Form Builder page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

### Use Form Builder as a WordPress Shortcode

#### 1. Create a new widget

You can use Elfsight Form Builder as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

#### 2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Form Builder shortcode:

    [elfsight_form_builder id="1"]

### Use Form Builder as a
Gutenberg Block

You can use Elfsight Form Builder as a block for Gutenberg editor. Just add it to your page during page building and select one of the available Form Builder widgets from the list.

### Use Form Builder as a
WordPress Widget

To use Elfsight Form Builder as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Form Builder WordPress widget to any widget section. Next, select one of available Form Builder widgets from the list.

### Use Form Builder as a
Visual Composer Element

You can use Elfsight Form Builder as a Visual Composer element. Just add it to your page during page building and select one of the available Form Builder widgets from the list.

## Options

Option | Default Value | Description
--- | --- | ---
Show form header | true | Show/Hide the form header.
Header title | Get in Touch | This title will be displayed above the form.
Header text | Leave your message and we'll get back to you shortly. | This title will be displayed above the form.
Header picture | message | Paste the URL of the image you want to display left of the title. You can display a message icon, a company logo or the picture of the contact.
Form Elements | - | Build your form with the elements you need.
Fields: Element type | - | Here you can choose the type of element to add to your form, for instance, short or long text, dropdown, checkboxes, etc.
Fields: Label | - | Name your element. The label will be displayed above the field.
Fields: Placeholder | - | Placeholder will be displayed inside the field. Use it as an example of input data or to demonstrate the required format. Also, to use as an alternative label, enter element name here. Available only for the short text, long text, email, phone, url, number and date & time elements.
Fields: Options | - | List the options to choose from. Available only for the checkboxes, radio buttons, dropdown and thumb scale elements.
Fields: Placeholder | - | Placeholder will be displayed inside the field. Use it as an example of input data or to demonstrate the required format. Also, to use as an alternative label, enter element name here. Available only for the short text, long text, email, phone, url, number and date & time elements.
Fields: Min | 1 | Set the lowest scale value. Available only for the number scale element.
Fields: Max | 10 | Set the highest scale value. Available only for the number scale element.
Fields: Left caption | Not likely | Set the caption for the lowest scale value. Available only for the number scale element.
Fields: Right caption | Very likely | Set the caption for the highest scale value. Available only for the number scale element.
Fields: Text | - | Enter your text here. Available only for the caption element.
Fields: Text | - | Enter your text here. Available only for the caption element.
Fields: Heading | - | Enter your heading here. Available only for the heading element.
Fields: Heading caption | - | Enter your heading caption here. Available only for the heading element.
Fields: Date and time | date | Select the required data: date, date and time, time. Available only for the date & time element.
Fields: Date format | d.m.Y | Select date input format. Available only for the date & time element.
Fields: Time format | 24-hour | Select time input format. Available only for the date & time element.
Fields: Stars Count | 5 | Set the maximum number of stars. Available only for the stars scale element.
Fields: Required field | false | Set this to ON to make a field required. The user will have to fill this field before submitting the form. Tip: Too many required fields decrease the chances of submitting a form.
Fields: Description | - | Add a text to your element, if required. The description will be displayed below the label.
Fields: Column layout | 1 | Use this option to organize the form elements in columns. Choose the same value for several elements that you need to arrange into columns.
Fields: Columns | 1 | Use this setting to arrange the options into columns. Available only for the checkboxes and radio buttons elements.
Fields: Group Name | - | Name your group. The name will be displayed in the progress panel. Available only for group element.
Submit button text | Submit | Customize Submit button text. Tip: Don't make the text too long.
Email to send messages to | example@domain.com | Set the email to forward the messages to.
Action after form submission | Thank you message | Choose what happens after a user submits the form: display thank you message, redirect to a specific page or simply hide form.
Thank you message | Your message was successfully sent! We will reply to you shortly. | This option allows you to set the text to display after the form was submitted.
Thank you message button text | OK | This option allows you to set the text for the button that closes the thank you message.
Redirect URL | https://example.com | Set the URL to redirect the user to after form submission.
Save Form Progress | true | Turn ON/OFF saving the form data in the browser while filling out the form. Turning this option ON makes sure that the form data is not lost after a page refresh. The data will be cleared after the form is submitted.
Layout | default | Select one of the predefined layouts. Default - use this layout to embed your form as is. Boxed - use the boxed layout to make sure your form stands out against the rest of the page content. Floating - this layout adds a floating button that opens the form when you click on it. This button scrolls along with your page and is always available for the user.
Floating Button Icon | message | Select the icon from the list to display on floating button.
Width (px, %, auto) | 580 | Set form width in pixels or percents. Set "auto" to make the form full width.
Show progress bar | true | Turn this option on to show remaining steps.
Style | classic | This option allows to choose one of the 5 predefined form styles. Choose the one that suits you best.
Main Color | rgba(28, 145, 255, 1) | Choose the color to be used in your form: Submit button, progress bar, active element etc.

## Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center