This is the Mailchimp newsletter embed code, so not related to their plugin.
- Create the sign-up form without CSS and add the code to the Divi code module.
- Add the highlighted lines around the input fields that should be displayed side-by-side.
- It should look something like this:
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"/>
<div id="mc_embed_signup">
<form action="https://rigavloerenenkozijnen.us20.list-manage.com/subscribe/post?u=a09b5216e8da69d87065e6d1f&id=f5a0fd8152" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div id="mc_fields">
<div class="mc-field-group">
<label for="mce-FNAME">Voornaam <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME"/>
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Achternaam </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME"/>
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">E-mail <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"/>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE6">Organisatie </label>
<input type="text" value="" name="MMERGE6" class="" id="mce-MMERGE6"/>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a09b5216e8da69d87065e6d1f_f5a0fd8152" tabindex="-1" value=""/></div>
<div class="indicates-required"><span class="asterisk">*</span> verplicht invulveld</div>
<div class="clear"><input class="et_pb_button" type="submit" value="Inschrijven" name="inschrijven" id="mc-embedded-subscribe"/></div>
</div>
</form>
</div>
Code language: HTML, XML (xml)
Then add the following free-form css to the advanced tab of the Divi module:
/* Labels */
selector #mc_embed_signup .asterisk {
font-size: unset;
top: unset;
}
#mc_embed_signup .indicates-required{
text-align: unset;
font-size: 1rem;
}
/* Field formats */
selector input{
padding: 1rem !important
}
/* Form */
selector #mc-embedded-subscribe-form{
padding: unset;
}
@media all and (min-width: 768px) {
selector #mc-embedded-subscribe-form #mc_fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
selector #mc-embedded-subscribe-form #mc_embed_signup_scroll .mc-field-group{
width: calc(50% - 10px);
}
}
Code language: CSS (css)