En este tutorial aprenderá la forma de crear un formulario sencillo multi-página usando el editor BreezingForms para WordPress®.

 1 – Acceda a la parte de administración de WordPress® y abra el componente BreezingForms situado en el menú izquierdo.

2 – En el submenú Manage Forms, haga clic sobre el botón new de la parte superior derecha.

El espacio de trabajo del editor de formularios se compone de dos áreas:
En la parte izquierda puede añadir nuevas páginas, secciones y elementos.
En la parte derecha se muestran las propiedades del formulario/sección/elemento seleccionado en la parte izquierda.

3 – BreezingFormsgenera automáticamente un título y un nombre para el formulario. Estos atributos pueden cambiarse en cualquier momento en la pestaña properties. En este ejemplo, el título es “My Form” y el nombre es “myForm”.

Importante: El nombre del formulario provee la forma de referenciar al formulario en un script del plugin de WordPress®. Se recomienda evitar utilizar caracteres especiales y espacios en blanco a la hora de darle nombre a los formularios.

4 – Creating the form structure

4.1 – The basic structure of a form built in BreezingForms consists of:

Page, Sections and Elements

Pages are necessary in order to hold sections and elements in a form and also make pagination possible.

Sections, while optional, are used to logically group together elements in a form. Sections can be displayed as Fieldsets with legends or plain (no legends and borders).

Elements allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. Additionally, elements provide special integration with PayPal (PayPal button), Calendar, etc.

4.2 – Create a page by clicking on the button New Page located at the top left corner of the workspace.

4.3 – Create a section on the recently added page by clicking on the button New Section.

In the example, the type of section chosen is Fieldset, the Display type All in a row and for the Title “General Info”.

Click on the button Save Properties.

4.4 – Create two new sections inside “General Info”. To do so, select “General Info” in the tree on the left side and click on the button New Section.

For both sections, choose Fieldset for the section type and Wrap after each element for the Display type.

The new sections received the titles “Personal Info” and “Business info” respectively.

Click on the button Save Properties.

4.5 – Create another section, this time, outside “General Info” by selecting Page 1 and clicking on the button New Section. Set the section properties to Type Fieldset, Display type Wrap after each element and for the title enter “Interests”, then click on Save Properties.

4.6 – Page 1 structure complete, let's now add a second page to the form. Select “My Form” in the tree and click on the button New Page.

4.7 – With Page 2 selected, add a Section called “Feedback”, and choose Fieldset for Type and Wrap after each element for Display type. Click on Save Properties.

Form structure complete, click on the button Save located at the top right corner.

5 – Adding elements

Adding elements in BreezingForms is very easy. To add an element simply select the desired page or section and click on the button New Element.

When an element is added, it will automatically have a Label attached to it. The attribute Name will also be assigned on the fly. You can change an element's properties by selecting it and under Element Properties make the necessary changes.

The table below shows a list of elements that will be added to the form sample and their respective sections and pages:

Page Section Element Type Label Name
Page 1 Personal Info Textfield Name: name
Textfield Last Name: last_name
Radio Group Gender: gender
Calendar Birth Date: birth_date
Textfield Address: personal_address
Textfield E-mail: personal_email
Business Info Textfield Company Name: company_name
Textfield Address: company_address
Textfield Phone/Fax: company_phone
Textfield Contact name: contact_name
Textfield Contact's e-mail: contact_email
Textfield Website: website
Interests Checkbox Group Please select the subjects you are interested in: interests
Page 2 Feedback Textarea Tell us what you think of our products: feedback

 

Complete Form structure with elements:

6 – Defining required form elements

To define required form elements, simply select the desired element and under Validation, check the option Required and in Validation type, choose Library, select the appropriate validation script and enter an Error Message.

Each validation script has a description of its function displayed below the select box Script.

Required form elements are indicated by a red asterisk * in the frontend.

7 – Thank you page

To create a Thank You page, select your form in the tree, click on the button New Page. Select the added page in the tree and under Page Properties, click on Edit to add a message.

Sample message:

Thank you for contacting us. We will get back to you shortly.

Click on Save and Save properties respectively.

Message added, go to Form Properties and check the option Last page is thank you page. Click on Save properties and then Save, to save all changes.

8 – Publishing the form in the frontend

The last step is to make your form available to users on your website.

Open your post or page and click on the icon on top-left of the text editor (the icon with the 3 blue lines).

This will open the BreezingForms Shortcode Helper.

Select the form "My Form" and click Add Shortcode.

The overall appearance of a form can be changed with themes. BreezingForms provides a clean, customizable theme called "qmtheme" that can be found on the tab Advanced, under Other Options > Theme.

Well done! You have created you first multiple-page form with BreezingForms.

Descuentos actuales

Suscripción todos extensiones

Summer Sale! All subscriptions at a special price!


Sin límite de dominios!. Incluye todas nuestras extensiones presentes y futuras para Joomla!®, plantillas para Joomla!®   adquiriendo la suscripción de por vida tiene acceso a todas nuestras plantillas.

Más información aquí

Descuento por componentes terceros - 25% Off

Nosotros le ayudamos a que no incurra en grandes gastos. Si es nuevo cliente y ha adquirido un constructor de formularios de otro proveedor, obtendrá un 25% de descuento en nuestra suscripción de un año o de por vida.

Cómo recibir el descuento:

Envíenos un correo electrónico a sales@crosstec.org con la evidencia (por ejemplo, un recibo de PayPal) de que a adquirido otra extensión para formularios y espere a nuestras instrucciones de pago para disfrutar de su suscripción con descuento.

Apoyando a la comunidad Joomla!

Nuestra pasión nos lleva a apoyar a grupos oficiales de usuarios de Joomla! y a organizadores de eventos Joomla! registreados en Joomla.org.

Si planea organizar un evento relacionado con la comunidad Joomla! y necesita cualquiera de nuestros productos, por favor, envíenos un email a info@crosstec.org y recibirá una suscripción de por vida gratuitamente.