[Resolved] styling

Home Forums Support styling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1361802
    Abhishek

    Hi
    I want to add the following html code (for Newsletter form) in the sidebar and want to change the background of the widget as a gradient color. pls let me know how can i do that?

    <style type="text/css">
     .form-group input {
       padding: 10px;
      margin-bottom: 15px;
      display: block;
      width: 100%;
      font-size: 14px;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      border: 1px solid #ced4da;
      border-radius: 4px;
    }
    #step_submit {
      color: #fff;
      background-color: #03526D;
      border: 0;
      padding: 8px 15px;
      float: right;
      font-size: 15px;
      border-radius: 4px;
    }
    </style>
    </head>
    <div class="row">
      <form id="step-form-marketing">
        <div class="form-group mb-4">
          <!-- hidden input -->
          <input type="hidden" id="step_form_name" name="step_form_name" value="cuwebinar_8">
        </div>
        <div class="form-group mb-4">
          <!-- Name -->
          <input type="text" id="step_name" class="form-control" placeholder="Name" required="required" />
        </div>
        <div class="form-group mb-4">
          <!-- E-mail -->
          <input type="email" id="step_email" class="form-control" placeholder="E-mail" required>
        </div>
        <div class="form-group mb-4">
          <!-- Phone number -->
          <input type="tel" id="step_phone" class="form-control" placeholder="Mobile Number" pattern="[6-9][0-9]{9}" required="required" />
        </div>
        <div class="form-group mb-4">
          <!-- Submit button -->
          <button class="btn btn-info btn-block" type="button" onclick="step_form_id(); return false;" id="step_submit">Submit</button>
        </div>
      </form>
    <script type="text/javascript">
    // Submit form with id function.
    function step_form_id() {
    var step_form_name = document.getElementById("step_form_name").value;
    var step_name = document.getElementById("step_name").value;
    var step_email = document.getElementById("step_email").value;
    var step_phone = document.getElementById("step_phone").value;
    if(step_name == '')
    {
      alert("Name cannot be empty!");
      document.getElementById("step_name").focus()
      return false;
    }
    if(step_email == '')
    {
      alert("E-mail cannot be empty!");
      document.getElementById("step_email").focus()
      return false;
    }
    if(step_phone == '')
    {
      alert("Phone cannot be empty!");
      document.getElementById("step_phone").focus()
      return false;
    }
    var email_regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var emailResult = email_regex.test(step_email);
    if(!emailResult)
    {
      alert("Invalid Email-id!Please enter your correct Email-id.");
      document.getElementById("step_email").focus()
      return false;
    }
    var indianmobile_regex = /^[0]?[6789]\d{9}$/;
    var phoneResult = indianmobile_regex.test(step_phone);
    if(!phoneResult)
    {
      alert("Invalid Phone Number!Please enter your correct Mobile Number.");
      document.getElementById("step_phone").focus()
      return false;
    }
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'form_submit',
      'step_name': step_name,
      'step_email': step_email,
      'step_phone': step_phone,
      'step_form_name': step_form_name
    });
    alert("Thank you for showing interest!");
    document.getElementById("step-form-marketing").reset();
    return false;
    }
    </script>
    </div>
    #1361823
    David
    Staff
    Customer Support

    Hi there,

    have you tried adding the code using a HTML Widget?
    Once its in place we can look at what can be styled.

    #1362690
    Abhishek

    Hi David,
    I have placed the html form in the widget, can you pls check.

    #1362845
    David
    Staff
    Customer Support

    Each widget is given a unique ID which you can style like so:

    #custom_html-6 {
        background: linear-gradient(180deg, rgba(44,213,208,1) 4%, rgba(0,0,0,1) 100%);
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.