How to Create and Customize Forms with the JupiterX Form Widget

Forms are essential tools for engaging with your website visitors and customers. They enable you to collect information, build mailing lists, gather user feedback, and much more. JupiterX theme's powerful Form widget simplifies the process of creating and managing forms for your WordPress website. Here's how you can leverage the Form widget to achieve your needs effectively.

JupiterX Form Widget Use Cases

The JupiterX Form widget can accommodate a variety of functions:

• Create a list of attendees for a party
• Start a subscription list for your blog
• Collect user feedback about your site or products
• Build a contact database for customer relationship management
• Facilitate document uploads and sharing
• Host surveys or polls to gain visitor insights
• Set up job application forms
• Enable reservation or booking requests
• Organize event registrations
• Collect RSVPs for events
• And many more possibilities...

Settings for the Form Widget

Content Tab:

This tab is where the core construction of your form happens.

• Form Fields: Define various field types like 'Name', 'Email', and 'Message'. To add more fields, click 'Add Item'. Each field's settings allow you to control the column size and step inclusions.
• Buttons: This is where you can personalize your form's submit button. Here you can modify button text and select an icon to accompany it.
• Settings: Adjust general configurations, including whether to display labels or not. You can also integrate the form with emails or external services like MailChimp.
• Steps Settings: For multi-step forms, this section lets you manage the appearance and type of step indicators.
• Feedback Messages: Tailor messages prompted by user actions, such as successful submissions or captured errors.

Fields

Standard Field Types:

• Text: This is a standard field for inputting single-line text, such as a user's name. It is simple and straightforward.
• Email: Designed to only accept a valid email address ensuring that you collect legitimate contact information for email communication.
• Textarea: Ideal for collecting more extensive information, this multiline text box is perfect for comments, messages, or any lengthy feedback.
• URL: It only accepts properly formatted web addresses, which is useful if you're asking for links from your users.
• Tel: This field requires a telephone number, formatted according to your regional or international preferences.
• Address: Leveraging Google's API, this auto-complete field makes it easier for users to enter accurate addresses.

Choice-Based Field Types:

• Radio: Allows users to select one option from a set of predefined choices. It's perfect for single-choice questions and polls.
• Select: Users can drop down a menu listing several options. Configure it for single or multiple selections depending on your needs.
• Checkbox: These fields let the user select multiple options independently, useful for multiple choice questions or feature selections.

Specialized Field Types:

• Acceptance: Commonly used for terms and conditions, it combines instructional text and a checkbox indicating agreement.
• Number: Restricts input to numerical data, which is helpful for quantitative information like age, quantity, or price.

Time-Sensitive Field Types:

• Date: Includes a date picker so that users can easily select a specific date.
• Time: Similar to the Date field, but this one includes a time picker to specify time.

File Handling Field Types:

• File Upload: Users can upload files directly through the form. You can set limits like maximum file size and specify allowable file types (e.g., jpg, gif, pdf). It also supports uploading multiple files.

Secure Entry Field Types:

• Password: Great for user registration forms; the inputted data is obscured for privacy.
• Hidden: This field is invisible to users but holds data that can be seen by the website owner. Useful for tracking form submissions or including data invisible to the user.

Anti-Spam Field Types:

• reCAPTCHA: To protect your forms from spam, this field type requires users to identify text or objects within an image.
• reCAPTCHA V3: This advanced version analyzes visitor behavior on your page without interactive puzzles, providing a more seamless user experience.

Navigational Field Types:

• Step: If you're building a multi-step form, this field type acts as a page break, guiding users from one section to the next.

Form Settings

Buttons Section:

• Text: Customize the text on the form's submit button, like "Subscribe" or "Send Inquiry".
• Submit Button Icon: Pick an icon to display alongside button text.
• Column Width: Choose how much space the button occupies, based on a percentage of the form's width.
• Hover Effects: Add visual effects when the mouse hovers over the button.

Settings Section:

• Label: Decide whether to show the labels beside form fields.
• Required Mark: Use an asterisk (*) or other symbols to indicate mandatory fields.
• Add Action: Assign actions to trigger upon form submission, including email dispatches or third-party integrations like Slack or Mailchimp. New settings will appear as you select actions.

Steps Settings Section:

• Type: Pick a style for step indicators (e.g., numbers, icons).
• Shape: Choose the geometric form of the step indicators (e.g., circles, squares).

Feedback Messages Section:

• Custom Messages: Toggle custom messages on or off.
• Success Message: Edit the message displayed after successful form submission.
• Error Message: Create a message that appears when an error occurs.
• Required Message: Set prompts for users to fill in required fields.
• Subscriber Already Exists Message: Enter a message that will show if the user is already subscribed.

Customizing Form Appearance

The JupiterX Form widget’s Style Tab offers detailed settings to polish the appearance of your forms. Here’s our guide to making your forms stand out or fit perfectly within your site’s aesthetic.

General Style Settings:

• Column and Row Spacing: Adjust these parameters to fine-tune the space between individual form elements, giving your form a more organized or airy feel depending on your preference.

Label Style Settings:

• Color: Choose the right color for your field labels to ensure they are readable and match your site's color scheme.
• Typography: Modify font attributes like family, size, and weight to match your overall site design. Consistent typography helps maintain a professional look.
• Spacing: Precisely adjust the padding around the labels to ensure each one has enough room, enhancing the form's usability.

Field Style Settings:

• Background Color: Select the color for the background of your input fields to make them stand out or blend in.
• Border Type and Radius: Choose borders for your fields and round their corners to the degree that fits your site's style.
• Box Shadow and Placeholder Text: Use shadows for depth and define the styling for placeholder text, which helps guide users through your form.
• Field Value Styling: Personalize the appearance of text that visitors type into the fields to maintain visual harmony with other text.

Select Field Style Settings:

• Icon Addition: Insert an icon and modify its characteristics to give visual cues about the field's purpose or content.
• Icon Positioning: Adjust where within the select field the icon should sit, ensuring that it doesn't interfere with the text.

Checkbox Style Settings:

• Size and Color: Determine the look of your checkbox to make it easy to use and clearly visible against different backgrounds.
• Typography and Spacing: Define how text appears next to the checkbox and how much space surrounds it for better readability and clickability.
• Background Color: Choose separate colors for the checkbox in both its default and selected states to offer clear visual feedback.

Radio Button Style Settings:

• Size and Color: Like checkboxes, ensure your radio buttons are a suitable size and color for user interaction.
• Typography and Label Spacing: Style the text labels linked to each radio button and adjust their margins and padding for an orderly layout.
• Background Color: Set distinct colors for the unchecked and checked states of the radio buttons to improve user experience.

Button Style Settings:

• Dimensions and Spacing: Tweak the width and height of your buttons and modify their placement to draw attention effectively.
• Typography and Colors: Customize font settings and color schemes for a cohesive design both in normal and hover states.
• Borders and Shadows: Choose border styles for definition and apply shadows for depth or attention-grabbing effects.

Message Style Settings:

• Typography: Style the text for confirmation, error, and inline messages to ensure they are not just noticeable but also read uniformly with other site elements.
• Color Customization: Assign colors that signify success (often green) and errors (commonly red) to make immediate sense to users.

Step Indicator Style Settings:

• Typography, Spacing, and Padding: Make each step indicator clearly legible and spaced out properly for an organized look that users can navigate easily.
• Color Selection: Assign colors to the step indicators to visualize progress and hierarchy.
• Divider Styling: Customize the appearance of dividers between steps to visually guide users through a multi-part form.

Conclusion

By harnessing the flexibility and power of the JupiterX Form widget, you can interact with your audience more dynamically and gather vital information to grow your business or community. Tailor your forms to suit any requirement, and rest assured that your data is being collected in an efficient and user-friendly manner.