Support

Account

Home Forums Gutenberg block, no css on front end

Solved

block, no css on front end

  • 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 back end
    On the front 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

  • 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.

  • 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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.