block, no css on front end

• cyril_b

• August 3, 2019 at 8:55 pm

Hello everybody.
I created a contact form block for a web site. I put the web site in production and in the beginning it was perfect. For a few days, there was no changes, now there is no CSS impact on the front end.
On the back end:

On the front end:

and my code in the file

<?php
/**
 * Block Name: Contact
 *
 * This is the template that displays the contact form block.
 */

$message_succes = get_field('message_de_succes');
$text_bouton_envoi = get_field('texte_bouton_envoi');
$couleur_ = get_field('couleur_');
$couleur_texte_bouton_envoi = get_field('couleur_texte_bouton_envoi');
$couleur_hover = get_field('couleur_hover');
$taille_de_la_font_du_message_denvoi = get_field('taille_de_la_font_du_message_denvoi');
$to = get_field('to');

//get the current page slug for the redirect after form sending
global $wp;
$current_slug = add_query_arg( array(), $wp->request );

if (isset($_GET['success'])) {
	$datas = $_GET['success']; ?>
	<div id="contactAlertSuccess">
	</div>
  	<div class="alert-message success">
    	<span><?php echo $message_succes; ?></span></br>
  	</div>
<?php }

if(array_key_exists('errors', $_SESSION)):
  if (isset($_GET['errors'])) {
    $datas = $_GET['errors']; ?>
    <div id="contactAlertError">
    </div>
    <div class="alert-message error">
      <span><?php echo $datas; ?></span>
    </div>
  <?php }

endif; ?>

<div class="form1">

  <?php if( have_rows('input') ): ?>
       <form action="#" id="contactForm" method="post">
        <?php wp_nonce_field('contact-form', 'contact-verif');
    // loop through the rows of data
      while ( have_rows('input') ) : the_row();

          // display a sub field value
          $label = get_sub_field('label');

            switch ($label) {
              case 'nom': ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
            <input type="text" name="<?php echo $label; ?>" id="<?php echo $label; ?>" value="<?= isset($_SESSION['input']['nom']) ? $_SESSION['input']['nom']:'';   ?>" /><?php
                break;
               case 'email': ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
            <input type="email" name="<?php echo $label; ?>" id="<?php echo $label; ?>" value="<?= isset($_SESSION['input']['email']) ? $_SESSION['input']['email']:'';   ?>" /><?php
                break;
              case 'téléphone': ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
                <input type="text" name="<?php echo $label; ?>" id="<?php echo $label; ?>" value="<?= isset($_SESSION['input']['téléphone']) ? $_SESSION['input']['téléphone']:'';   ?>" /><?php
                break;
               case 'site web': ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
                <input type="url" name="<?php echo $label; ?>" id="<?php echo $label; ?>" value="<?= isset($_SESSION['input']['site web']) ? $_SESSION['input']['site web']:'';   ?>" /><?php
                break;
               case 'sujet': ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
                <input type="text" name="<?php echo $label; ?>" id="<?php echo $label; ?>" value="<?= isset($_SESSION['input']['sujet']) ? $_SESSION['input']['sujet']:'';   ?>" /><?php
                break;
              default: ?>
                <label for="<?php echo $label; ?>"><?php echo $label; ?></label>
        <textarea name="<?php echo $label; ?>" id="<?php echo $label; ?>" rows="20" cols="30"><?= isset($_SESSION['input']['message']) ? $_SESSION['input']['message']:'';   ?></textarea><?php
                break;
            }

      endwhile; ?>
      <button type="submit"><?php echo $text_bouton_envoi; ?></button>
      <input type="hidden" name="submitted" id="submitted" value="true" />
      <input type="hidden" name="to" id="to" value="<?php echo $to; ?>" />
      <input type="hidden" name="current_slug" id="current_slug" value="<?php echo $current_slug; ?>" />
  </form>
</div>
<?php else :

    // no rows found

endif;
unset($_SESSION['errors']);
unset($_SESSION['input']);

?>

<style type="text/css">
  * {
  box-sizing: border-box;
}

#contactAlertError,
#contactAlertSuccess {
  height: 150px;
}

.form1 input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.form1 input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.form1 input[type=url], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.form1 input[type=tel], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

textarea {
  height: 150px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.form1 button {
  background-color: <?php echo $couleur_; ?>;
  color:  <?php echo $couleur_texte_bouton_envoi; ?>;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
  font-size: <?php echo $taille_de_la_font_du_message_denvoi; ?>px;
}

.form1 button:hover {
  background-color: <?php echo $couleur_hover; ?>;
}

.container {
  padding: 20px;
}

.alert-message.success {
  background-color: <?php echo $couleur_; ?>;
  padding: 10px;
  line-height: 2em;
}

.alert-message.error {
  background-color: red;
  padding: 10px;
  line-height: 2em;
}

.alert-message span {
  color: white;
}

</style>

and in functions.php

function my_acf_contactForm() {
// check function exists
  if( function_exists('acf_register_block') ) {
// register a contact form block
    acf_register_block(array(
    'name' => 'contact',
    'title' => __('Contact Form'),
    'description' => __('A contact form'),
    'render_template'   => 'template-parts/blocks/content-contact.php',
    'category' => 'common',
    'icon' => 'email-alt',
    'keywords' => array( 'contact'),
    'mode'			=> 'preview'
    ));
  }
}

thank you for your help
cheers

Cyril

• James

• August 4, 2019 at 11:06 pm

HI @cyril_b

This may suggest that there is a conflict with one of your installed plugins that might have been triggered by a recent update.
Please make use of this plugin to troubleshoot https://wordpress.org/plugins/health-check/ and to help in isolating the culprit.

• cyril_b

• August 5, 2019 at 7:56 am

Hello James
Thank you for you answer !
effectively, the problem came from the plugin ‘french typo’, a plugin to solve the problem of insecable spaces in french
cheers