Question posted in
The full documentation can be found here.

Divi theme – WordPress Divi Custom CSS on HTML Form

I have a wordpress site and I am customising it with the Divi theme. I have added an HTML form to a ‘Code’ module and it works great. However I cannot work out where I should put the CSS. I have tried to ‘Custom CSS’ areas of both the row and module itself. Perhaps there is something wrong in the code? I have pasted it below. Thanks!

input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=number], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    div {
      border-radius: 5px;
      background-color: #ffffff;
      padding: 20px;
    }
    <font face="helvetica"
    
    <META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <!-- ---------------------------------------------------------------------- -->
    <!-- NOTE: Please add the following <FORM> element to your page. -->
    <!-- ---------------------------------------------------------------------- -->
    <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target='_parent'>
    
    <input type=hidden name="oid" value="00D0Y0000034cvq">
    <input type=hidden name="retURL" value="https://globalstudyuk.com/success-qatar">
    
    <!-- ---------------------------------------------------------------------- -->
    <!-- NOTE: These fields are optional debugging elements. Please uncomment -->
    <!-- these lines if you wish to test in debug mode. -->
    <!-- <input type="hidden" name="debug" value=1> -->
    <!-- <input type="hidden" name="debugEmail" -->
    <!-- value="[email protected]"> -->
    <!-- ---------------------------------------------------------------------- -->
    
    <label for="first_name">First Name</label>   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
    
    <label for="last_name">Last Name</label>   <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>
    
    Date of Birth:  <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYYY" /></span><br><br>
    
    <label for="mobile">Mobile</label>   <input id="mobile" maxlength="40" name="mobile" size="20" type="number" pattern="d*" required=true/><br><br>
    
    <label for="email">Email</label>   <input id="email" pattern="[^ @]*@[^ @]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>
    
    Current/Previous School/University:   <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text" required=true /><br><br>
    
    Course you would like to study:   <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" required=true /><br><br>
    
    <label for="lead_source">Where did you hear about us?</label>   <select id="lead_source" name="lead_source"><option value="">--None--</option>
    <option value="Instagram">Instagram</option>
    <option value="Facebook">Facebook</option>
    <option value="Twitter">Twitter</option>
    <option value="Google">Google</option>
    <option value="British Council">British Council</option>
    <option value="Career day">Career day</option>
    <option value="Deferred">Deferred</option>
    <option value="Flier / Poster">Flier or Poster</option>
    <option value="GSUK Alumni">GSUK Alumni</option>
    <option value="GSUK_Website">GSUK_Website</option>
    <option value="Other_(Please specify)">Other</option>
    <option value="Referral_(Please specify)">Referral</option>
    <option value="School Counsellor_(Please specify)">School Counsellor</option>
    <option value="School Presentation">School Presentation</option>
    <option value="School Tour">School Tour</option>
    <option value="University Website_(Please specify)">University Website</option>
    <option value="Web">Web</option>
    </select><br><br>
    
    <input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
    
    <input type=hidden id="country_code" name="country_code"value="QA" />
    
    <input type=hidden id="city" name="city" value="Doha" />
    
    <center><input type="submit" name="submit"></center>
    
    
    
    </form>
Tags:

2

Answers


  1. 0

    login to your dashboard -> click on Appearance -> click Customize -> click on Additional CSS and paste your css in that.

    enter image description here

    Login or Signup to reply.
  2. 0

    We resolved the issue by removing 

    div {
      border-radius: 5px;
      background-color: #ffffff;
      padding: 20px;
    }

    Although this would work fine on most pages, it was causing white boxes to appear in strange places, presumably due to the CMS we were using building pages in columns.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search