How do I add custom styles to a form?

 
1
0
-1

I want to add css to the forms.

    CommentAdd your comment...

    3 answers

    1.  
      2
      1
      0

      You can add CSS by going to
      1) Features > Online Forms
      2) Click the name of the form.
      3) Click Get iFrame HTML
      4) Click Edit
      5) Add in your custom CSS.

      To see what elements on the form can be styled, you can use a tool like Firebug.

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Another example of customization:

        @import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Teko');

body {
font-family: 'Lato', sans-serif;
padding: 20px;
}

.pageCenterTitle {
margin-bottom: 40px;
}

form {
background: #fff;
box-shadow: 10px 10px 30px rgba(10, 10, 10, 0.1);
padding: 20px;
}

fieldset:nth-of-type(1) p {
box-sizing: border-box;
width: 50%;
float: left;
padding: 0 10px;
}

input,
textarea {
background: #ebe7e2;
border: none;
width: 100% !important;
padding: 10px 0;
text-indent: 10px;
font-size: 18px;
}

input[type=submit] {
display: inline-block;
background: #f5034e;
border-radius: 1.5625rem;
color: #ffffff;
font-family: "Teko", sans-serif;
font-size: 1.5rem;
letter-spacing: 0.5px;
padding: 0.5rem 1.875rem 0.3125rem;
text-decoration: none;
transition: all 0.2s ease-in-out;
}

input[type=submit]:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

@media screen and (max-width: 768px) {

 body {
 padding: 10px;
 }

 form {
 box-shadow: none;
 padding: 10px;
 }

 fieldset:nth-of-type(1) p {
 width: 100%;
 float: none;
 }

}

          CommentAdd your comment...
        1.  
          1
          0
          -1

          Here is an example of how to customize the look of your form.

          body {
    background-color:whitesmoke;
}

input[type=text] {
  width: 150px;
  margin-top: 4px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 20px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input:required {
 background-color: #fedaec;
}

input[type=text]:focus {
 width: 100%;
}

select {
  margin-top: 4px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 4px 12px 4px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

select:required {
  background-color: #fedaec;
}

textarea{
  margin-top: 4px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 20px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

textarea:required {
   background-color: #fedaec;
}

input[type=submit] {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    padding: 15px 32px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

input[type=submit]:hover {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

            CommentAdd your comment...