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.