Customizing SEMrush’s leadgen tool

Hi,

So I wanted to replace the contact 7 forms with forms that offer free seo audit reports with semrush’s leadgen tool. However, I’m a novice and honestly even after going through the documentation, I wasn’t able to figure out the desired code I need to get it to work on my site. ‘

I want the “seo report form” to be optimized in a certain way (adaptive width, no borders, and rounded corners) and basically look exactly like the form already there on the homepage on this website. The article linked above has all the div container codes, but I don’t know how to add stitch it up with the basic code or change css stylesheet. Any help would be really appreciated.

Here’s the basic version of my code I generated for my site –

<!-- semrush siteaudit widget -->
<div id="ssa-widget"></div>
<script type="text/javascript">
    (function() {
        var p = "https://www.semrush.com/leadgen/static/js/widget.min.js";
        var d = document, s = d.createElement("script");
        s.src = p + "?v=" + Math.random();
        (d.head || d.body).appendChild(s);
        s.onload = function() {
            new SEMRUSH.SiteauditWidget({
                widgetApiKey: "5f08a8ebf856463dd8b0cf8a"
            });
        }
    })();

</script>
<!-- /semrush siteaudit widget -->

Here are the codes I need to work along with this code –

1) adaptive width

.my-awesome-widget-adaptive
.ssa-leadgen-widget {
/* set widget width. */
/* When set in %, the widget will become adaptive, when in px, the width will be fixed */
width: 100%; 
max-width: 500px; /* if you want to limit the maximum widget width */
}
 
.my-awesome-widget-adaptive
.ssa-leadgen-widget__input {
width: 100%; /* set the maximum available width of entry fields */
}

2) no borders
.my-awesome-widget-border
.ssa-leadgen-widget {
border: none;
}

3) rounded corners
.my-awesome-widget-border
.ssa-leadgen-widget__input {
    /* copy the rounding radius to ensure cross-browser compatibility */
    -webkit-border-radius: 21px; 
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
}

• This topic was modified 5 years, 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]