Styling an embedded webform

When you embed a Rizer webform into your website, you may want to customize its appearance to match your site’s design. This can be easily achieved by applying CSS styles to the webform elements.

In this article, we’ll guide you through the process of styling an embedded Rizer webform.

You can seamlessly integrate the Rizer webform into your website’s design, providing a cohesive and user-friendly experience for your visitors.

HTML Structure

The embedded webform consists of a <div> element with the class “rz-web-form”. Inside this main container, there are several <div> elements with the class “rz-wrapper”, each representing a form field. Each form field typically includes a <label> and an <input> or <select> element.

Here’s an example of the HTML structure:

<div class="rz-web-form"> 
<div class="rz-wrapper"> 
   <label for="field-company_name">Company name *</label> 
   <input id="field-company_name" required type="text"> 
</div> 
<div class="rz-wrapper"> 
   <label for="field-contact_first_name">Your name</label> 
   <input id="field-contact_first_name" type="text"> 
</div> 
<!-- More form fields -->\

CSS Styling

To style the webform, you can use CSS selectors to target specific elements and apply desired styles. Here are some common CSS properties you can use:

  1. Form Container:
    • Adjust the padding and margin of the main container using the “.rz-web-form” class.
    • Example: .rz-web-form { padding: 20px; margin-bottom: 20px; }
  2. Form Fields:
    • Customize the spacing between form fields by targeting the “.rz-wrapper” class.
    • Example: .rz-web-form .rz-wrapper { margin-bottom: 15px; }
  3. Labels:
    • Style the labels using the “label” selector within the “.rz-web-form” class.
    • Example: .rz-web-form label { font-weight: bold; color: #333; }
  4. Input Fields and Select Elements:
    • Modify the appearance of input fields and select elements using the “input” and “select” selectors within the “.rz-web-form” class.
    • Example: .rz-web-form input, .rz-web-form select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
  5. Focus State:
    • Highlight the input fields when they are focused using the “:focus” pseudo-class.
    • Example: .rz-web-form input:focus, .rz-web-form select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
  6. Placeholder Text:
    • Customize the color of the placeholder text using the “::placeholder” pseudo-element.
    • Example: .rz-web-form input::placeholder { color: #999; }
  7. Submit Button:
    • Style the submit button using the “.btn” class within the “.rz-web-form” class.
    • Example: .rz-web-form .btn { background-color: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }

You can include these CSS styles in your website’s stylesheet or add them directly to the <style> tag in your HTML file.

Default styling

Additionally, Rizer provides a default stylesheet that you can include by adding the following link to your website’s <head> section:

<link rel="stylesheet" href="https://cdn.rizer.io/web_forms/rz-web-form.css">

This default stylesheet applies basic styling to the webform elements, making them more visually appealing and consistent. You can use it as a starting point and override or extend the styles as needed.

Remember to test your webform after applying the CSS styles to ensure it looks and functions as intended.

Further reading:

Still stuck? How can we help?