If you’ve used Web forms earlier, you are likely to be aware of its immense potential in helping you capture leads directly to your web application. If you haven’t created Web forms, now would be a good time to learn how to set it up.

If you would like to get a little more creative and customize your Web forms by changing the layout and grouping the fields into columns, then this article can help you carry out the required modifications with ease.
 

Important:
 
- This article is a continuation of “How to configure web forms?” Your web forms should be set up before you can customize it according your requirement. If you haven’t set up your web forms already, please do it by following these instructions.

- The customization of your forms is carried out by altering a few fields in CSS. While you are not expected to know CSS to carry out these instructions, a brief refresher in the concepts can help you carry out your own unique customizations.

DETAILED STEPS: 

1. Go to the codebase of your webpage where the javascript code for your web form has been embedded. In this case, we have embedded the web form in a “blogger” page. 
   
   

2. Look for the Edit option and opt to edit your page in HTML.
   
   

3. Find the web forms Javascript code that has been embedded in the body. It looks like this:
   

4. This is the code you will need to alter to suit your specifications. It can be altered using the <style> class in HTML which determines all the styles. Adding the <style> <style/> class after the </script >allows you to tweak the style of your form.

5. Embed the links after the web forms script and update the page for the changes to take effect.

Here’s how you can carry out the various customizations:

• Increasing form container width: Make your fields wider by incorporating the following script:

  HTML

  <style type="text/css">
  .fserv-container 
  {
  max-width: 1000px;
  }
  .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
  display: block;
  width: 100%;
  text-align: center;
  }
  </style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style>

  
  Here's how your form will appear:
  

  
  

• Giving the form a horizontal layout: This script turns your vertically placed form fields into horizontal ones. This helps you occupy a lesser footprint when embedding your form at the bottom of a page:

  <style type="text/css"> 
  .fserv-container {
  max-width: 100%;
  }
  .fserv-container .fserv-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  }
  .fserv-container .fserv-form .fserv-field+.fserv-field {
  margin-top: 5px;
  }
  .fserv-container .fserv-form .fserv-field {
  max-width: 25%;
  }
  .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { 
  border-top: 0;
  width: 100%;
  display: block;
  text-align: center;
  }
  </style>

  
  Here's how your form will appear:
  

• To group the fields into columns: These script allows you to group your fields into columns of 2 or 3. This can help you curb the length of your web page and eliminate the need to scroll down. Embed the links after the web forms script and update the page for the changes to take effect. 

  • For 2 columns:
    HTML

    <style type="text/css">
    .fserv-container .fserv-form 
    {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    .fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden)
    {
    margin-top: 0px;
    }
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
    display: block;
    width: 100%;
    text-align: center;
    }
    </style>

    
    Here's how your form will appear:
    

    
    

  • For 3 columns:
    HTML

    <style 
    type="text/css">
    .fserv-container .fserv-form 
    {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    .fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden){
    margin-top: 0px;
    }
    .fserv-container .fserv-form .fserv-field {
    max-width: 33.33%;
    }
    .fserv-container .fserv-form .fserv-field:nth-child(-n+3):not(.fserv-hidden)
    {
    margin-top: 0px;
    }
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
    {
    display: block;
    width: 100%;
    text-align: center;
    }
    </style>

    
    Here's how your form will appear:
    

    
    

• To remove the border above the submit button: If you wish to remove the border that appears the “Submit” button, embed the following script:

  HTML

  <style type="text/css">
  .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
  { 
  border-top: 0;
  }
  </style>

  
  Here's how your form will appear:

  

  
  

• To alter the margin space between the fields: If you desire to increase/ decrease the space between the different fields, paste the following code after </script> and set the value of the margin as per your requirements. 

  HTML

  <style type="text/css">
  .fserv-container .fserv-form > .fserv-field + .fserv-field,
  .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) 
  {
  margin-top: 30px;
  margin-bottom:30px;
  }
  .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
  display: block;
  width: 100%;
  text-align: center;
  }
  </style>

  
  

  By altering “margin-top: __ px” and “margin-bottom: __ px” values, you can determine the spacing between the different fields and set a value of your choice.
  Here's how your form will appear:
  

These are a few of the customizations that you can carry out on your Web forms by altering the CSS codes. For more advanced customizations, it is advisable to enlist the support of a dedicated HTML developer to alter other aspects of your form such as colour, font, and styles.