Now that you have created form (contact form in our case), the most commonly used fields in contact forms are created. But, there might be some cases where you do not want exactly these fields or you may need to add extra fields or re-order them. This section is for you to describe how to do these things.
To customize a form, you might need to get the basic concept of form structure. Here it is.
The form must have one or multiple placeholder in it. Placeholder is where the fields will be placed. To add a field in your form, you have to create a placeholder first if there is not any. You may also add field in the existing placeholder if there is any.
In the following image, you can see two placeholders (marked in red bordered box). Here the area (1) is the placeholder with no form fields while the area (2) is the placeholder with 4 form fields (Name, Email, Subject and Message fields).
If you hover over any placeholder in the form, the placeholder will be highlighted with grey bordered box around (like the image below), seeing which you can get which placeholder is having what fields or not.
When you hover over any placeholder, it will also appear with some buttons on the top of it (like the image below).
Let us discuss the functionality of each button of this panel one by one.
The Add Field button will let you create field. Clicking this button will pop up the list of fields (like the image below) from where you can select the field you want to add.
You can close this list panel clicking the Close Panel button or Cross button shown in the image above.
Clicking any field button from the field list will add the corresponding field in the selected placeholder (the selected placeholder is the one where the hovered the mouse over).
The Add Placeholder button will let you add a blank placeholder just after the selected placeholder.
The Clone Placeholder will let you clone the selected placeholder with the form fields in it (if there is any) and append it next to it.
The Copy Placeholder Place also copy the placeholder and its content, but it does not paste it as Clone Placeholder button does. Instead it just copies the placeholder and its content only. After copying it, another button named Paste Placeholder will appear in each placeholders button panel. Click Paste Placeholder button in placeholder next to which you want to paste it.
The Remove Placeholder button is self explanatory, it will remove the selected placeholder.