Custom background solution for form page (user data)

Dear @adamantos,

Thank you for your topic.

I’d like to mention that we have the following options that allow you to add a background image to your quiz.

1. In the quiz Styles tab – this is likely where you have applied the image.
   See the screenshot below:

2. From the question Edit Page – You may have added an image here as well.
   See the screenshot below:

Please review these options and if an image is set, try removing it.

If the changes still don’t appear on the front end, it’s likely related to caching.
If you have cache enabled, please clear all the caches and test again in your browser’s incognito mode.

Once you’ve done this, please, let us know the outcome.

Thank you.

Hi Jasmine,

as i wrote on the first comment – i don’t need a background on the user data page where the user can add their name and email to a form.

Thanks

Patrick

Dear @adamantos,

Thank you for your reply.

It seems there was a misunderstanding on our part regarding your request.

I want to mention that, unfortunately, we don’t have this feature available at the moment.

By the way, thank you for your suggestion.
We appreciate it, as it’s mutually beneficial for both of us.

I will forward your request to our PM team for consideration in future updates, and we will ensure to inform you if any action is taken regarding this.

As an alternative, you could try using custom CSS to achieve the desired effect.
Here’s an example for your reference:

#ays-quiz-container-YOUR_QUIZ_ID .step[data-role=info-form]{
    background: COLOR;
}

Simply replace YOUR_QUIZ_ID with the ID of the specific quiz, and COLOR with the color you want. For instance:

#ays-quiz-container-3 .step[data-role=info-form]{
    background: white;
}

Let us know if you have more questions.

Thank you.

There is not data-role in the source code of this template – only step and active-step :

<div class="step active-step" style="border-radius: 0px; transform: scale(1); left: 0%; opacity: 1; display: flex; position: relative; pointer-events: auto;">
  <div class="ays-abs-fs ays-end-page information_form">
    <div class="ays-form-title">
      <p>xxx</p>
    </div>
    <input id="ays_form_field_ays_user_name_2" type="text" class="ays_quiz_form_input ays_animated_x5ms " name="ays_user_name" placeholder="Name">
    <input id="ays_form_field_ays_user_phone_2" type="hidden" class="ays_quiz_form_input ays_animated_x5ms " name="ays_user_phone" placeholder="Telefonnummer">
    <input id="ays_form_field_ays_user_email_2" type="text" class="ays_quiz_form_input ays_animated_x5ms " name="ays_user_email" placeholder="E-Mail">
    <div class="ays_buttons_div"> <i class="ays_display_none ays_fa ays_fa_flag_checkered ays_finish action-button ays_arrow ays_next_arrow ays-quiz-keyboard-active"></i>
      <input type="submit" name="ays_finish_quiz" class=" ays_next ays_finish action-button ays-quiz-keyboard-active" value="Ergebnisse ansehen">
    </div>
  </div>
</div>

Dear @adamantos,

Thank you for your reply.

Our development team has rechecked your case and provided a CSS solution for you.

Here is the CSS code:

#ays-quiz-container-YOUR_QUIZ_ID .ays-quiz-form > .step:nth-last-of-type(-n+2):not(.step.ays_thank_you_fs) {
  background: #fff !important;
}

Make sure to replace YOUR_QUIZ_ID with the corresponding quiz ID, and please let us know the outcome.

Thank you.

Awesome – works great. Thanks for your help.

Patrick

Dear @adamantos,

Thank you for your reply.

We’re glad we could assist you!

If you have any other questions, please don’t hesitate to start a new topic.

Have a great day!