What is a Form element on Dotcom?
A Form element on Dotcom allows you to insert web forms on your site to help you capture your website visitor’s details - their name, email addresses, and feedback. These forms serve as an effective method for visitors to reach out to you, submit information, send requests, or inquire about your offerings. Additionally, you can utilize them to create subsequent actions or follow-ups.
Steps to use the Form Element on Dotcom
- On your Dotcom dashboard, navigate to the Themes menu.
- Select your theme from the My Themes section.
- Click on the three-dot icon to open a floating menu. Now, click on Edit to open the theme dashboard.
- Here, select the page on which you want to insert the form from the Select dropdown to open that page on your screen.
How to add a form to your website on Dotcom?
- In the Elements tab, drag and drop the Form element into position on the page layout.
- The form has Name, Email, and Message fields and a Submit button as the default layout. Let’s see how to edit the form on Dotcom.
- Hover over the dropped Form element. It has three sections. You can customize each section individually to customize the form.
- Edit the form.
- Edit the form container column.
- Edit the form container row.
- Let’s first see how to edit the form details and customize its look to suit your site’s theme.
How to edit a form on Dotcom?
- Click on the edit icon for the form. This allows us to add fields and customize the form.
- The customization panel loads on your screen’s right side. Here, you have 3 tabs.
- Content
- Style
- Advanced
How to edit the content of the Form element on Dotcom?
- Let’s start with the Content tab first. It has two sections, one is to edit the fields and the other is to edit the button on the form.
Steps to edit the fields in the form
- In the Form Fields section, type in the Form Name.
- Next, you can make changes to the Field Settings of the Name, Email, and Message fields. Let’s try it for the Name field first. Hover over the Name and click on the edit icon.
- In the Select Type dropdown, you can change the field type from Text to Email, Number, or Text Area. Next, edit the Label name and Placeholder text.
- Enable the Required toggle switch if you want to make it mandatory for users to fill the field.
- Next, change the Column Width to Full or Custom. If you opt for Custom, use the Custom Width range slider to change the value after picking the size unit as px, %, em, or rem from the dropdown. Also, adjust it for the desktop, tablet, and mobile device screen types.
- To remove the Name field, hit the delete icon.
- Similarly, you can edit the Form Fields - Email and Message.
- Now, if you want to add a new field to your form, click on Add Field. Repeat the above steps to edit its field settings.
- To rearrange the order of any of these fields, use the six-dot icon displayed against the field name. Click-press-drag and drop the field to the required position.
- Now, let’s make some changes to the overall form. To change the Input Size of the form, select Small, Medium, Large, or Custom from the dropdown.
- If you select Custom, set the Custom Size through the range slider for desktop, tablet, and mobile by selecting each icon individually.
- Use the Label toggle switch to display or hide the Label names for all the fields on the form.
- To indicate mandatory fields, toggle on the Required Mark switch, which displays an asterisk symbol next to each Label marked as Required. We suggest keeping this switch enabled to inform customers about the mandatory fields they need to fill in the form.
Steps to edit the button on the form on Dotcom
- Next, let’s edit the button on the form. Expand the Buttons section. First, Select Type of the button from the dropdown as Primary, Secondary, or Custom.
NOTE: The changes you have made at Theme Styles > Site Buttons are applied to this button when you select Primary or Secondary. If you have created any new Custom Button Style, it is displayed in this dropdown.
- Select the Button Size as Small, Medium, Large, or Custom. If you select Custom, adjust the Custom Size on the range slider for desktop, tablet, and mobile screens individually.
- Type in a relevant Text for the button if you want to change it.
- Adjust the Column Width of the button by adjusting its value on the range slider. Change the values for desktop, tablet, and mobile screens individually by clicking on the respective icons.
- Next, select the button Width as Full or Custom for desktop, tablet, and mobile screen type each. If you select Custom, adjust the Custom Width through the range slider by picking up the size unit as px, %, em, or rem from the dropdown and setting the width for desktop, tablet, and mobile screens.
- Next, adjust the button Alignment as left-aligned, center-aligned, or right-aligned.
- If you want to display an icon next to the name on the button, click on the down-arrow icon and then on + to upload an icon from your computer (only SVG format allowed). You can upload as many icons as you want and save them in the Your Icon library. To add an icon to the button on the form, click on the icon to highlight it and click on Save. The icon gets added just before the button text.
- Now, let’s add an icon to the form button and customize its look. Click on the down-arrow icon. Click on + to add an icon from your computer. The icon gets stored in your Icon library. Click on the icon you want to insert in the button and then click on Save. Click on the down-arrow icon to make customizations to the added icon. Adjust the Icon Width and Icon Height using the range slider. Adjust the Icon Position as Left or Right. Set the Icon Spacing using the slider after selecting the size unit as px, %, em, or rem. Click on - to remove the icon from the button.
NOTE: You get a real-time preview as you keep making changes to the form.
How to customize the style of the Form element on Dotcom?
- Navigate to the Style tab. Let’s start by editing the Form style. Here you have four expandable sections- Form, Field, Button, and Message.
Form Section:
- Expand the Form section. Adjust the Columns Gap and Rows Gap using the range slider. Do it for desktop, tablet, and mobile screens.
- Next, let’s change the Label Typography. Click on the globe icon to set any Global Font Style for the fonts on your form. Click on the values against Font Style 1, Font Style 2, or Font Style 3 to change the font style.
NOTE: The changes you have made at Theme Styles > Site Fonts are applied to the font when you select Font Style 1, 2, or 3. If you have added any new Font Style, it is also displayed here.
- If you want a custom font style, click on the edit icon next to the globe icon for Typography. In the floating window, set these font style parameters-
- Font Family
- Font Size
- Font Weight
- Style
- Transform
- Line Height
- Letter Spacing
- Now, to set the Text Color, click on the globe icon. The Global Colors are displayed. Select any from this list.
NOTE: All the colors you have set at Theme Styles > Site Colors are displayed. Any new Custom Color you have added to the list is also displayed here.
- If you want to set a custom color, click on the color box and select a color through the color picker tool. You can even enter the color values in HEX, RGB, or HSL. Else, click on the dropper and move the patch to any place on the screen to pick the exact color.
Field Section:
- Click on the down-arrow icon to expand the Field section. Repeat the same as mentioned above to set the Typography, Text Color, and background BG Color.
- Next, let’s style the field borders of the form. Set the BG Color by clicking on the globe icon or the color box.
- Adjust the Top, Right, Bottom, and Left values for the Border Width individually. Click on the outline icon to set a uniform value for all four parameters. But first, ensure you have selected the unit size as px, em, or rem from the dropdown.
- Repeat the same for the field border Radius. Select the unit size as px, %, em, or rem from the dropdown.
Button Section:
- Expand the Button section. Here, you have two modes- Normal and Hover. Let’s begin by selecting the Normal mode.
- Edit the Typography. Select the Globe icon to view the Global Font Style and choose from the standard options.
- If you want to use any other font style, click on the edit icon where you can change the following parameters.
- Font Family
- Font Size (Unit - px, %, em, or rem)
- Font Weight
- Style
- Transform
- Line Height
- Letter Spacing
- Now, edit the Text Color. Click on the globe icon to choose from the Global Colors. If you want a different color, click on the color box and select the color from the color picker tool.
- Similarly, alter the Button BG Color.
- Configure the Box Shadow by clicking on the edit icon and choose the effect as Drop shadow or Inner shadow from the dropdown. Select the color from the color picker tool. Fill in the X & Y values, and Blur and Spread.
- Select the Button Style as Outline or Filled from the dropdown. If you select the style as Outline, select the Border Type as Solid, Dashed, Dotted, or Double.
- Next, change the Border Width by first selecting the size unit as px, %, em, or rem from the dropdown. Now, fill in the Top, Right, Bottom, and Left values individually. Select the outline icon if you want to set the same value for all four parameters.
- Next, adjust the Radius and Padding of the Button by first selecting the size unit as px, %, em, or rem from the dropdown. Now, fill in the Top, Right, Bottom, and Left values individually. Click on the outline icon if you want a uniform value for all four parameters.
- To edit the Icon Color, click on the globe icon and select from the Global Colors. Else, click on the color box and select a color of your choice from the color picker tool.
- Now, switch to the Hover tab where you can make the same type of customizations.
Message Section:
- Expand the Message section. Let’s start by editing the Typography. Click on the globe icon and select from the Global Font Styles. Else, click on the edit icon where you can change the following parameters.
- Font Family
- Font Size
- Font Weight
- Style
- Transform
- Line Height
- Letter Spacing
- Now, edit the Success Message Color. Click on the globe icon and pick from the Global Colors list. Else, click on the color box and select a color of your choice from the color picker tool.
- Repeat the same for the Error Message Color.
How to configure advanced settings for the Form element on Dotcom?
- Navigate to the Advanced tab to configure some advanced settings for the Form element.
- Once we have completed customizing the Form element, let’s start with the customizations for its container column and row.
2. How to edit the Form container column on Dotcom?
- Hover over the Form element and click on the container column icon. The Customization panel loads on the right side with three tabs. Items here include-
- Content
- Style
- Advanced
- Complete customizing the container column to suit your branding requirements.
3. How to edit the Form container row on Dotcom?
- Hover over the Form element and click on the container row icon. The Customization panel loads on the right side with three tabs.
- Content
- Style
- Advanced
- Customize the container row to match the website theme.
You can perform some general customizations, such as deleting or changing the position of the Form element on Dotcom. That ends our tutorial on how to use the Form Element on Dotcom.
If you have any queries or concerns, we suggest reaching out to our implementation specialist or contacting our support team for further assistance.
To check the pricing plans for Dotcom, we encourage you to visit our pricing page, where you can explore the different options available. If you would like to discover the complete range of features and benefits offered by Dotcom, we invite you to schedule a demo with our team.