Support

Account

Home Forums Gutenberg block, no css on front end

Solved

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

    • 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

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.