PowerForms

This is a basic draft of documentation , detailed documentation coming in 2 weeks.


Power Form

Power Form is a component that can be used to design contact forms entirely using the power of Oxygen Builder to lay-out and style every aspect of it. This means that you can design a form and add headings, background images, borders and any CSS style as you would normally do with any other Oxygen Builder element, without having to create the form outside Oxygen first.

Power Form submissions can be either sent by email, stored in the database in the form of a Custom Post Type or even sent to a 3rd party service or script via triggering a WebHook. WebHooks are particularly powerful because thanks to services like Zapier or Integromat, you can extend your Power Form to do complex stuff like adding rows to a Google Sheet, sending a Slack message, creating Trello cards, and many more powerful tasks.

Also, with the power of OxyPowerPack's Interactivity Engine, you can easily do stuff automatically after form submission, like removing the form, showing complex "thank you" message, redirecting to another page, etc.

Power Forms comes with a few basic pre-designed contact forms that you can use as a starting point, to re-style and extend with more fields.

Anatomy of a Power Form

OxyPowerPack adds three Oxygen Elements related to Power Forms: Power Form itself, Field Group and Form Field. In order to be able to add Form Fields or Field Groups, you first have to add the Power Form that will contain them, with the Power Form selected inside Oxygen Builder, you'll see options to add Field Groups and Form Fields at the bottom of the side panel.

Power Form - It's the main component, that will contain all your fields as well other components you may add to your form. With this component selected in the components tree panel, you will will be able to configure the submission behavior and form-wise style settings.

Field Group - You can use this component as if it was a DIV container, to group Form Fields together and apply style settings that will affect all fields inside it.

Form Field - The input field. You can configure it to be required and have a specific "Required" message. Individual Form Fields can have their specific style and will override styles set on parent Field Group or Power Form elements. At the writing of this, Form Fields can be configured as:

  • text field
  • color field
  • number field
  • checkbox
  • select field
  • radio group
  • text area
  • Captcha (Google Re-Captcha, defaults to a simple numeric captcha if no API KEY is provided)
  • submit button

Style Settings

A Form Field is composed of a label, an input field and a validation (required) message. Each of which can be styled individually to set custom spacing, typography, borders or backgrounds. These style settings can be set at Form level (applied to the container Power form) and will cascade down all the fields. Can also be set at Field Group Level or even at field level, to style each field individually.

Label Position. This option is only available for the field Label and allows you to set how you would  like to label to be positioned in relation to the input field. You can select "None" if you prefer to add labels as individual Oxygen text elements instead to, for example, insert them in a separate column.

The following style settings can be configured individually for the field label, input field and validation message:

  • Spacing
  • Typography
  • Border
  • Background

When editing "Validation Message" styles, you can use the "Toggle Required Message" button to preview how the required message looks with the styles you are applying.

Non-Style Settings

  • Field Type:
  • Label
  • Field Name
  • Field Value
  • Tab Index
  • Additional Class
  • Is Required?
  • Required Message

Power Form Settings

Having the parent Power Form component selected in the components tree, you will be presented with the Power Form settings which will allow you to set the form submission behavior.

  • Form Name - This setting identifies your form and will allow to group the database entries if the form is configured to save form submissions in the database.
  • Form Submission
    • Save to Database - Select this option to save all form submissions to the database as Custom Post Type entries. You can find them in the WordPress dashboard under OxyPowerPack > Power Form Submissions.
    • Show alert message on submission - Select this option to show custom message in a browser alert() dialog on form submission. It's a simple solution to show a success message.
    • Alert Message - If the above option is selected, this textbox allows you to set your custom message.
    • Email for Admins
      • Send email to admins - Select this option if you want to send an email on each form submission to site owners.
      • Email Addresses - You can enter here the admin email recipients, email addresses separated by comma.
      • Email Subject - To set the admins email subject.
      • Edit Email Template for Admins - This button will open a text edit window to customize the email for site administrators. You can use helper tags to fill the email body with data entered in the form. Available helper tags are shown at the bottom, and they correspond to each field added to the form.
    • Email for Users
      • Send email to user - Select this option if you want to send an email to the person who filled the form.
      • Email Address Field - Here you have to specify the form field name that contains the user email.
      • Email Subject - To set the users email subject.
      • Edit Email Template for Users - Same way as email for admins, this button will show an edit window to customize the email sent to the person who filled the form. Helper tags are available here too.
    • WebHook
      • Trigger WebHook - Select this option if you want to send the submitted form data to a 3rd party script or service like Zapier or Integromat.
      • WebHook URL - If the above option is selected, use this input box to specify the WebHook URL. If you are using Zapier or Integromat, they will provide a custom URL for your task. If you want to send the data to a custom script, specify here your script URL.
      • Send POST payload as - Select if you want the data to be sent as JSON or Form-Encoded. Services like Zapier or Integromat expect the data in JSON format.