[Resolved] styling

[_blank]

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>

[David]

Hi there,

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

[_blank]

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

[David]

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%);
}

[Author]

Posts