A form that collects user information like name, email, and password to create a new account on a website or app is a registration form.

ElementsKit Register Form #

前提条件:

• Elementor Builder Plugin (Free Version is enough)
• ElementsKit Pro Version

Now, access your WordPress dashboard and open a page where you want to add a register form. Next follow the steps.

Step 1: Get the Register Form Widget #

Search and drag and drop the Register Form.

Step 2: Customize the Content Tab #

In the Content tab, you’ll see the following options.

• フォームフィールド

Field Label –

• デフォルト： Displays the field label normally above the input field. It helps users clearly understand what information is required, like user name, email, password, etc.
• Hide: Removes the visible field label from the form layout while keeping the field functional, useful for minimal or placeholder-focused designs.

Fields – To add input fields like Username, Email, Password, etc. to your Register Form, simply click the + アイテムを追加 button at the bottom of the Fields section.

Inside each field, you will find several controls to define its look and function, such as Field Label, Field Placeholder, Field Icon, etc.

Field Size – From here, you can adjust the field size of the form. The options are small, extra small, medium, large, and extra large.

Field Placeholder – Toggle the button if you want to show the placeholder.

必須マーク – Toggle the button if you need to show the required mark (*).

• Fields Icons
  • Fields Icons: Show or Hide icons for the form input fields.
  • Icons Divider: Toggle to show or hide a divider between the icon and the input field.
  • Icons Position: Allows you to show the icon at the Start or End 入力フィールドの。

• ボタン
  • ボタンテキスト: Sets the text displayed on the button.
  • 配置: Controls the button’s horizontal position like left, center, right.
  • ボタンのサイズ： Adjusts the button’s dimensions like small, medium, large, or custom.
  • ボタンアイコン: Adds an icon before or after the button text for visual emphasis.
    

• Login Link
  • Login Link: Its a toggle button, enables or disables the login link on the form.
  • Login Link Text: Sets the text that appears for the login link.
  • Link Position: Determines where the link appears relative to the form (e.g., top, bottom).
  • Link Alignment: Aligns the link horizontally (left, center, right).
  • Text Before/After Link: Adds optional text immediately before or after the login link for context or instructions.
  • 説明： Provides additional info or instructions displayed near the login link.
  • Login URL: Specifies the destination URL that the login link points to.

• 設定
  • Password Toggle: Shows or hides the password as the user types.
  • Redirect After Register: Sends the user to a new page after signing up.
  • Redirect URL: The specific link where users go after registration.
  • Hide for Logged-In Users: Conceals the form from people already signed in.
  • Enable Terms & Conditions: Adds a mandatory “agree to terms” checkbox.
  • Enable Social Login: Allows sign-ups via social media (requires WP Social).

Step 3: Style the Register Form #

• ラベル
  • 色： Use this to set the specific color for your field labels.
  • タイポグラフィ： Click the pencil icon to adjust the font family, weight, and size for all form labels.
  • 間隔: Use the slider to control the vertical gap between the label and the input field.

• Fields
  • Text & Placeholder Color: Customize the look of what users type and the light hint text inside.
  • 背景の種類: Fill your input boxes with a single flat color or a smooth color blend.
  • 枠線の種類: Pick a line style like solid or dashed and choose a color for the field edges.Background Type & Color: Select a flat color or a gradient to fill the interior of your form fields.
  • Border Width & Color: Define the thickness of the field outlines and choose a color to match.
  • 境界線の半径: Soften the field edges by curving the corners to your liking.
  • Typography & Padding: Set your font styles and define the “breathing room” inside each field.
  • 間隔: Control how much vertical room sits between each field in the list.

• Fields Icon
  • アイコンの色: Choose a custom shade for the symbols inside your input fields.
  • アイコンサイズ: Adjust the dimensions to make your icons larger or smaller.

• ボタン
  • テキストの色： Select a specific hue for all labels, input text, and button labels.
  • 背景の種類: Choose between a flat solid color or a smooth gradient fill.
  • 色： Pick the background shade for the form or its specific elements.
  • 枠線の種類: Select the line style, such as solid, dashed, or dotted.
  • ボックスシャドウ: Apply a shadow effect to give the form a sense of depth and lift.
  • 境界線の半径: Soften the corners by adjusting their level of roundness.
  • タイポグラフィ： Customize the font’s family, size, thickness, and letter spacing.
  • パディング: Adjust the internal “breathing room” between the text and the edges.
  • 間隔: Control the vertical gap between fields and buttons for a cleaner layout.

• Login Links
  • 色： Use this to set the primary text color for the link.
  • Decoration Color: This allows you to choose a specific color for the text decorations associated with the link.
  • タイポグラフィ： Click the pencil icon to adjust the font family, size (set to 19px in the image), weight, and style of the login and other associated texts.

Your register form is ready. To see your hard work in action, publish the page and check.