Basic-Captcha shows no pic

Support Forms & Blueprints
,
1

the basic captcha does not display an image. In the source code it says that an image should be loaded, but it does not load an image. At the beginning no image could be found in the code. Only when I added the Chache folder in the asset folder in Plugins was this displayed.

Does anyone have an idea how the image is generated and displayed?


form:
    name: contactForm
    fields:
        -
            name: name
            label: Name
            placeholder: 'Dein Name'
            type: text
            validate:
                required: true
        -
            name: email
            label: E-Mail
            placeholder: 'Deine E-Mail'
            type: email
            validate:
                required: true
        -
            name: message
            label: Nachricht
            placeholder: 'Deine Nachricht'
            type: textarea
            validate:
                required: true
        -
            name: captcha
            label: Sicherheitscode
            type: captcha
            validate:
                required: true    
    buttons:
        -
            type: submit
            value: Absenden
    process:
        -...
2

@KleeSchulz,

the basic captcha does not display an image

I’m not aware of a basic captcha field that should shown an image. Please provide a link to the captcha you are referring to.

In the source code it says that an image should be loaded

Again, please provide a link.

3 
<form name="contactForm" action="/de" method="post" enctype="multipart/form-data" id="contact-form">
    <div class="form-group">
        <label for="name">Name</label>
        <input name="name" type="text" required="" placeholder="Gib deinen Namen ein">
    </div>
    <div class="form-group">
        <label for="email">E-Mail</label>
        <input name="email" type="email" required="" placeholder="Gib deine E-Mail ein">
    </div>
<div class="form-group">
        <label for="message">Nachricht</label>
        <textarea name="message" required="" placeholder="Gib deine Nachricht ein"></textarea>
    </div>
   <div class="basic-captcha">
   <img src="/captcha" alt="Captcha Bild"> 
    <input type="text" name="captcha" required="" placeholder="Bitte Captcha eingeben">

</div>
    <input type="hidden" name="__form-name__" value="contactForm">
    <div class="form-group">
        <button class="button" type="submit">Absenden</button>
    </div>
</form>

this is the html code when i examine it with the inspector.

When I go into the network analysis, I get the error 404 that the image is not available. Because the page domain.de/captcha does not exist. But according to my calculation this is needed to generate the captcha

4

@KleeSchulz, A few remarks…

  • A field with type: captcha does not exist in the Form plugin.
  • The HTML you are showing does not resemble code that would be generated by the Form plugin. Did you create it manually?
  • When using your form definition with the correct type: basic-captcha, the form shows as expected.
    image
    image622Ă—424 10.6 KB
5 
 
            name: captcha
            label: Sicherheitscode
            type: basic-captcha
            validate:
                required: true

if i am using basic-captcha as type

if i follow your suggestion, there will be no improvement. I have deleted the cache from grav and from my browser.
When I load the page with the and open it with the browser-dev-tool it looks like this:

grafik
grafik1627Ă—352 59.9 KB

[quote=“pamtbaau, post:4, topic:28157”]
he HTML you are showing does not resemble code that would be generated by the Form plugin. Did you create it manually?
[/quote] We are using "/templates/partials/contact-form.html.twig
This Code:

<form name="contactForm"
      action="{{ page.url }}"
      method="post"
      enctype="multipart/form-data"
      id="contact-form">

    <div class="form-group">
        <label for="name">Name</label>
        <input name="name" type="text" required placeholder="Gib deinen Namen ein" />
    </div>
    <div class="form-group">

        <label for="email">E-Mail</label>

        <input name="email" type="email" required placeholder="Gib deine E-Mail ein" />
    </div>
    <div class="form-group">
        <label for="message">Nachricht</label>
        <textarea name="message" required placeholder="Gib deine Nachricht ein"></textarea>
    </div>
   <div class="basic-captcha">
    <img src="{{ uri.baseUrl }}/captcha" alt="Captcha Bild" />
    <input type="text" name="captcha" required placeholder="Bitte Captcha eingeben" />

</div>
    <input type="hidden" name="__form-name__" value="contactForm" />
    <div class="form-group">
        <button class="button" type="submit">Absenden</button>
    </div>
</form>
6

@KleeSchulz, Like the HTML you shared before, this Twig template you’re now sharing is not from the Form plugin.

  • Where does all this code come from?
  • Which theme are you using?
  • Have you read the docs on Forms?
7

@KleeSchulz, I just noticed you have cross-posted this question on Discord and also have a conversation going on on Discord.

Cross-posting is very impolite as it wastes the efforts of users on one of the forums in the end. One should only cross-post when no satisfying reply has been received within a few days on the first forum. Then one can cross-post and let people know it is a cross-post with providing a link to each cross-post on every forum.

I will end my contribution to your post for the coming days…

1 Like