Spicy Form

Documented by Mojoomla - at March 27 2015

A) Introduction

To install Spicy Form plugin, you need to have wordpress installed.

Spicy form uses latest material design concept and you can create any type of form like contact form, poll or survey. Your site user will just love to fill the form resulting in higher conversion ratio after all. The admin panel provides form generator and option to customize form display.

This user guide covers all options that this plugin provides. Please read the documentation carefully as it probably contains answers to most of questions that may arise. If you feel some aspect is not covered or have some questions, contact us via e-mail sales@mojoomla.com. We will do our best to answer you in shortest of time.




B) Installation:

Steps for Spicy Form plugin Installation:

  1. Go to Wordpress Admin Plugins → click on Add New → click on Upload.
  2. Unzip the "Spicy_package.zip " file and Upload the " Spicy-form.zip " . → click on Install Now.
  3. Click on Activate plugin.
  4. You can see Spicy Form on dashboard.
Install plugin

C) Form List

Click on Form List and you can see list of all created forms. You can also use the search field at top if you want to find particular form from the list.



  • 1. Form List Explained
    1. Add New: To add new form click on the Add new button.
    2. Title: To open any form for edit/delete, just mouse hover on the title of the form.
      Each form can be Edited and Deleted. When you mouse hower on any form you can see Edit/ Delete link.
      • Edit: By clicking on edit link you can edit that form.
      • Delete: By clicking on delete link you can remove that form.
    3. Type: Here specify which type of this form. Becaus we have three types of forms:
      1)Contact form
      2)Poll form
      3) Survey form.
    4. short code: Each form have unique short code. To display particular form into frontend side, you just need to copy the form shortcode from here and paste it in post or page content where you want to display.
    5. Date : Designates form creation date.
    6. Response List : If you want to see respose of any form then you can see from here by click on View Response link.

D) Add New

Once you click on the Add new button, you will see the following page. You can see that it opens up new contact form template. From here you can set your form name by replacing untitled text into textbox. We have display here three types of form. Select any one from here which form you want to create.


  • 1. Form Design
    1. Contact Form: If you want to create contact form then click on the form.

    2. Form-Generator

    3. Poll Form: If you want to create poll form then click on the poll.

    4. Form-Generator

    5. Survey Form: If you want to create servey form then click on the survey.

    6. Form-Generator

    7. In left part of form design view, we have listed all possible field types. This can be used in your form design as per your requirements.
    8. In right part of form design you can see form templete with some requird fields. If you want to add extra fields into this form then you can add fields from left just by clicking on field type
    9. Add new field:To add extra fields into your contact form click on the Add new field link. You will see all the fields types in green. When you click on field, that field will be added into your form on right part of view.
    10. Edit field: To Edit fields Click on Edit fields Button. Then select the field you want to edit from right part of the form design. This will activate the options to edit that particular field.

    11. Form-Generator

    12. Once you are done adding or editing fields, you can see your final form desing in right part of view. If you are happy with this then you can save this form now.
    13. When you want to create survey form then you have also fields settings same like bellow thay may be you want to use then select it.
    14. Form-Generator

    15. Click on the save button for saving any changes in the form.
  • 2. Form Design Effect setting
  • There are two possible different material design effect with any Spicy form
    Form-Generator

    • Just select any design effect radio button.
    • Materialise Effect
    • Floating Label Effect
    • Disable Effect
      When you don't want to apply any effect for form, just you want to simple form design then select Disable Effect .
  • 3. Mail Template
  • Form-Generator

    This section lets you personalize the form email template. In Message body part set your own template format. Here we have given some shortcodes. Just use this shortcodes like "your_name" to address the person recieving the email. This feature can be useful for autoresponse template.
  • 4. Validation-Alert Messages
  • Form-Generator

    Here we have displayed some Alert/Error messages. The message will appear on form screen if the validation failes or the form submission triggers at when appropriate. This messsagees can be customized from here as per your requirements.


E) Response List

We have also developed response list for view all response of created form. When form created and then that form replay also we can see from here. For that you just select type of form from dropdown box and click on Go button.

responselist

  • Form Replay list: If you have selected Form type from dropdownbox then you can see list of replay of form look like bellow.
  • responselist

    Here display replay list of your created form. Which was filled by user.

  • Poll Replay list: If you have selected Poll type from dropdownbox then you can see list of replay of poll form look like bellow.
  • Form-Generator

  • Survey Replay list: If you have selected Survey type from dropdownbox then you can see list of replay of Survey form look like bellow.
  • Form-Generator

    Survey replay you can view and delete also from survey replay list. By click on view you can replay of the survey and by click on delete you can also delete that replay from the list.

F) Frontend Side

After designing contact form, you will see is in the list of forms. Now you can show this form in any page or post by adding shortcode like [spcf id=1468] in particular page or post. Once you add this form shortcode to particular page, you can check the form in action by visting that page in frotnend.

    If you selected Materialise effect from admin side then your contact form look like bellow.

    Form-Generator

    If you selected floating label effect from admin side then your contact form look like bellow.

    Form-Generator

    If you selected desable effect from admin side then your contact form look like bellow.

    Form-Generator

Poll Form: when you have created poll form as your requirements. There is your poll form look like below.

Form-Generator

Survey Form: You have created survey form as your requirements. There is your survey form look like below.

Form-Generator

G) FAQ

If you want to have any customization request with this plugin, then you can contact us on sales@mojoomla.com


H) Setting Up Language

Spicy Form Plugin is translation ready meaning you can edit the po files and translate the text to any language.

The steps to do the translation are as follow. For example let us consider french translation.
  1. Download and install Poedit.
  2. Open the file spicy-form languages folder → spicy-form-fr_FR.po using Poedit .
  3. Choose the source text and apply corresponding French text in Translation Text Area.
  4. Save the changes.
  5. In wp-config.php define the WPLANG as French. Syntax is define(‘WPLANG’, ‘fr_FR’);