Alright, let's fix this style conflict issue step by step. Here's how you can properly encapsulate all the form's CSS within a .datasheet-form class to avoid messing up your existing Shopify site styles:

Step 1: Add the Wrapper Class to Your Form #

First, modify the root <form> element to include the .datasheet-form class. This will act as the scope for all your form-specific styles:

<form action="https://zymplify.com/process_form.php" method="post" class="size-wide datasheet-form" _lpchecked="1">
  <!-- Rest of your form content here -->
</form>

Step 2: Extract & Encapsulate Inline Styles to custom.scss.liquid #

Take all the inline style attributes from your form elements and convert them into scoped CSS rules in your custom.scss.liquid file, prefixed with .datasheet-form. This ensures these styles only apply to elements inside your form.

Here's the consolidated CSS you can add:

.datasheet-form {
  // Form container base styles
  .section.digi-section {
    padding: 5px;
  }

  .row.digi-row {
    display: block;
  }

  .column {
    height: inherit;
  }

  // Subheading element styles
  .element.digi-subheading {
    font-size: 1.375em;
    position: relative;
    font-family: Helvetica, sans-serif;
    margin-left: 10px !important;
  }

  .element.digi-subheading h3 {
    margin-bottom: 0px;
  }

  // Paragraph element styles
  .element.digi-paragraph {
    font-size: 0.8em;
    position: relative;
    font-family: Helvetica, sans-serif;
    margin-left: 10px !important;
  }

  .element.digi-paragraph p {
    margin-bottom: 0px;
  }

  // Form element container styles
  .element.digi-form.ui-sortable.p-1 {
    font-family: Helvetica, sans-serif;
    text-align: left;
    font-size: 1em !important;
    line-height: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px !important;
    border-radius: 0px !important;
    border-width: 0px !important;
    top: 0px;
  }

  .element.digi-form .row.digi-row {
    top: 0px;
  }

  // Email field column styles
  .element.digi-form .column.small-12.medium-6.large-6 {
    height: 40px;
  }

  .element.digi-form .row.not-editable.nope.field-container {
    padding-bottom: 0px !important;
  }

  // Label styles
  .nope.digi-label {
    display: none;
  }

  // Submit button styles
  .nope.digi-submit.field-container {
    text-align: left;
    padding-bottom: 0px !important;
  }

  .element.digi-form #linkID-4.button {
    font-family: Noto Sans, sans-serif;
    font-size: 1.0em !important;
    background-color: #000000 !important;
    width: 50%;
    line-height: 0px !important;
    border-radius: 0px !important;
  }

  // Migrated styles from the <style> tags
  div.element input:not([type='submit']):not([type='checkbox']),
  div.element select {
    font-size: 1em;
  }

  div.input-container {
    // Keep empty if no styles needed, or add your custom styles here
  }
}

Step 3: Clean Up the Form HTML #

Remove all inline style attributes from your form elements now that they're handled in the scoped CSS. Your cleaned-up form HTML will look like this:

<form action="https://zymplify.com/process_form.php" method="post" class="size-wide datasheet-form" _lpchecked="1">
 <input type="hidden" name="campaignId" id="campaignId" value="108792">
 <input type="hidden" name="return" value="">
 <input type="hidden" name="channel" id="channel" value="262829">
 <input type="hidden" name="appId" id="appId" value="1">
 <div data-title="form" class="section digi-section" data-input="">
 <div class="row digi-row" data-equalizer="" data-title="row" data-input="">
 <div class="small-12 medium-12 large-12 ui-sortable column" data-equalizer-watch="">
 <div class="element digi-subheading" data-modal="1" data-id="" data-input="element" data-title="subheading" id="style-elementID-4" data-child="true">
 <h3>Looking for Product Data Sheets?</h3>
 </div>
 <div class="element digi-paragraph" data-modal="1" data-id="" data-input="element" data-title="paragraph" id="style-elementID-3" data-child="true">
 <p>Request them below</p>
 </div>
 <div class="element digi-blank" data-modal="1" data-id="" data-input="" data-title="blank" id="style-elementID-2">&nbsp;</div>
 <div class="element digi-form ui-sortable p-1" data-title="form" data-input="text">
 <div class="row digi-row" data-equalizer="" data-title="row" data-input="">
 <div class="column small-12 ui-sortable medium-6 large-6" data-equalizer-watch="">
 <div class="row not-editable nope field-container">
 <div class="nope digi-label" data-title="label">
 <label for="email_address" data-ele-num="3">* Email address</label>
 </div>
 <div class="nope digi-input" data-title="input">
 <input type="email" name="email_address" id="email_address" value="" required="" data-ele-num="3" placeholder="* Email address">
 </div>
 </div>
 </div>
 <div class="column small-12 ui-sortable medium-6 large-6" data-equalizer-watch="">
 <div class="row not-editable nope field-container">
 <div class="nope digi-submit field-container" data-title="button">
 <input id="linkID-4" class="button" type="submit" value="Request Data Sheet" data-ele-num="sub">
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</form>

Step 4: Test Thoroughly #

After implementing these changes, test your form and other parts of your Shopify site to ensure:

• The form retains all its original styling
• No other page elements are affected by the form's CSS

内容的提问来源于stack exchange，提问作者chadlei