stream_form_page.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. {% extends "coderedcms/pages/web_page.html" %}
  2. {% load coderedcms_tags static wagtailcore_tags %}
  3. {% block content_body %}
  4. {{ block.super }}
  5. {% if page.form_live %}
  6. <div class="container">
  7. {% block progress_bar %}
  8. {% if steps|length > 1 %}
  9. <div class="progress" style="height: 40px;">
  10. {% with last_step=steps|last %}
  11. {% widthratio step.index|add:"1" last_step.index|add:"1" 100 as width %}
  12. <div class="progress-bar" role="progressbar" style="width: {{ width }}%;" aria-valuenow="{{ width }}" aria-valuemin="{{ width }}" aria-valuemax="100">
  13. <span>Step {{step.index|add:"1"}} / {{last_step.index|add:"1"}} ({{ width }}%)</span>
  14. </div>
  15. {% endwith %}
  16. </div>
  17. <br>
  18. {% endif %}
  19. {% endblock %}
  20. {% block stream_form %}
  21. <form class="stream-form {{ page.form_css_class }}" id="{{ page.form_id }}" action="{% pageurl self %}" method="POST" {% if form|is_file_form %}enctype="multipart/form-data"{% endif %}>
  22. {% csrf_token %}
  23. {% block stream_form_fields %}
  24. {% for item in markups_and_bound_fields %}
  25. {% if item.1 == 'markup' %}
  26. {% include_block item.0 %}
  27. {% else %}
  28. {% include "coderedcms/includes/stream_forms/render_field.html" with block=item.2 field=item.0 %}
  29. {% endif %}
  30. {% endfor %}
  31. {% endblock %}
  32. {% block captcha %}
  33. {% if page.spam_protection %}
  34. {% include "coderedcms/includes/form_honeypot.html" %}
  35. {% endif %}
  36. {% endblock %}
  37. {% block stream_form_actions %}
  38. <div class="form-group mt-5 row">
  39. <div class="{{'horizontal_label_class'|bootstrap_settings}}"></div>
  40. <div class="{{'horizontal_field_class'|bootstrap_settings}}">
  41. {% if step != steps|first %}
  42. <a href="{{page.url}}?step={{step.index}}" class="btn {{page.button_size}} {{page.button_style}} {{page.button_css_class}}">
  43. Previous
  44. </a>
  45. {% endif %}
  46. <button type="submit" class="btn {{page.button_size}} {{page.button_style}} {{page.button_css_class}}">
  47. {% if steps|last == step %}{{ page.button_text }}{% else %}Next{% endif %}
  48. </button>
  49. </div>
  50. </div>
  51. {% endblock %}
  52. </form>
  53. {% endblock %}
  54. </div>
  55. {% endif %}
  56. {% endblock %}
  57. {% block coderedcms_scripts %}
  58. {{ block.super }}
  59. <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  60. <script src="{% static 'coderedcms/js/crx-streamforms.js' %}?v={% coderedcms_version %}"></script>
  61. {% endblock %}