Building the forms

The theme has built-in capabilities for creating forms. You can create forms using WPBakery Page Builder.
WPBakery Page Builder provides maximum flexibility when creating forms for feedback, subscribing, login/registration/password recovery.

How to create a form

Before creating a form, enable the page builder for the form_post post type
How to enable page builder for custom post types

You can import pre-made forms from demo data or create them manually.

  1. Navigate to KSF SmartKit > Forms tab in your WordPress admin sidebar and click Add new form.
  2. Enter the form title (e.g. “My new form”) into the title field.
  3. Add a form elements and other content to your form using WPBakery Page Builder (see more on how to use the page builder here).
  4. Click on the Publish button.

How to add form elements (fields)

  1. Click on the + button in the column, into which you want to add the form element.
  2. Go to Forms tab and search for necessary element in the add element pop-up window and click on it to add it to the form.
  3. Set ID, slyle and validation options in In the element’s settings window.
  4. Save changes.
doc-forms-form-elements
If the ID field is available, you must enter any ID in order for the form to work properly.
Use “a-z” and underscore “_” characters in ID field.
doc-forms-field-insert-1

Using captcha

In order to protect your site against spam and other types of automated abuse, add a Captcha element to your form.

SmartKit captcha field based on Google reCAPTCHA service.
To start using reCAPTCHA, you need to sign up in your Google account and generate an API key pair for your site.
You can find full guide here.

Navigate to SmartKit > Theme options > Integrations, set API key pair and save theme settings.

How to configure the form

Open Screen options and activate Form settings in the form editing screen.

doc-forms-screen-options

Scroll down and configure Form settings in metabox.

doc-forms-metabox

Select the form type. There are 5 form types:

  • Contact form
  • Login form
  • Registration form
  • Lost password form
  • Subscription form

You can adjust form messages and choose a page to redirect to if neccessary.
The configuration features of various types of forms are described below.

Contact Form

Data from the form can be sent to the specified email or saved in the site database.

Required form settings: Email and Email template.

Save submitted form to database option allows to save formdata in database.
In order to manage form entries, navigate to KSF SmartKit > Forms entries.

Field set example
FieldElementTypeIDRequired
NameForm inputText“name”+
EmailForm inputEmail+
SubjectForm inputText“subject”+
MessageForm textarea“message”+
SubmitButtonForm submit
Email template example

Email from [site_url]
[form_title]
Name: [name]
Email: [email]
Subject: [subject]
Message: [message]

Login form

You can create any login form using the form editor and replace the standard wordpress form.

Required field set
FieldElementTypeIDRequired
UsernameForm inputLogin+
PasswordForm inputPassword+
Remember meForm checkbox“remember”
SubmitButtonForm submit

Registration form

You can create any registration form using the form editor and replace the standard wordpress form.

Required field set
FieldElementTypeRequired
UsernameForm inputLogin+
PasswordForm inputPassword+
Repeat passwordForm inputRepeat+
SubmitButtonForm submit

Lost password form

You can create any lost password form using the form editor and replace the standard wordpress form.

Required field set
FieldElementTypeRequired
UsernameForm inputLogin+
SubmitButtonForm submit

Subscription Form

Subscription form has integration with the MailChimp service.
Navigate to SmartKit > Theme options > Integrations, set MailChimp API key and save theme settings.

Required field set
FieldElementTypeRequired
EmailForm inputEmail+
SubmitButtonForm submit

In order to integrate current form with Mailcimp, set Mailchimp Audience ID.
How to find your Audience ID
Custom field IDs must match field IDs in Mailchimp.

How to add the form to the page

  1. Navigate to the editing screen, where you want to add the form. It can be specific page or site header or footer.
  2. Click on the + button in the WPBakery Page Builder frame.
  3. Search for Form in the add element pop-up window and click on it to add it.
  4. Choose form name (“My new form”) from the list.
  5. Click on the Save changes button.

Done. Now your form has been added.

doc-forms-form-insert-1

You can also add the form via shortcode same way as content blocks.

In order to use custom login, registration, create specific pages with these forms.
After that navigate to KSF SmartKit > Theme options > Integration > Login/Register pages and set login and registration pages.
Go back to documentation