How to resize and center an email form and thankyou page?

[daredevil]

Hi all

I’m trying to add an email from to my page. I think I’ve most of it setup correctly.

I wanted to ask, how can I make it center to the page with limited length rather than spanning the entire lengh of the screen?

Also, how can I customise the thank you screen. I’ve created the thankyou folder with the formdata.mp page in it but I not sure how to customise it. Also, it’s spans the length of the screen and is not centered, please could you advice here on how to do this?

Thanks.

[anon76427325]

@daredevil, The following is only a rough example on how you can make a form narrower and centered in your screen. There are more roads that lead to Rome and this is just one of them…

And the result might not be entirely to your liking, but it should give you some idea of how to proceed.

Assumptions:

• Your form is called ‘contact’
• Your inherited theme is called ‘mytheme’

In your inherited theme, do the following:

• Add the following to /user/themes/mytheme/css/custom.css

  #contact, .thankyou {
    margin: 0 auto;    /* this will center the element */
    /* by default element will take the full width of the grid */
  }
  
  @media screen and (min-width: 768px) {
    /* When width of screen is >= 768px */
    #contact, .thankyou {
       max-width: 66%;   /* the element will occupy 2/3 of grid */
    }
  }
  @media screen and (min-width: 1024px) {
    /* When width of screeen is >= 1024px */
    #contact, .thankyou {
        max-width: 50%;  /*    /* the element will occupy 1/2 of grid */
    }
  }
  

• Copy file /user/plugins/forms/templates/formdata.html.twig to folder /user/themes/mytheme/templates/
• In formdata.html.twig wrap the content of {% block content %} in a <div>. The wrapper is needed to resize and center the output of the 'thankyou ’ page.

  {% block content %}
     <div class="thankyou">  
        {{ content|raw }}
  
        {% if form %}
           {% include 'partials/form-messages.html.twig' %}
  
           <p>{{ 'PLUGIN_FORM.DATA_SUMMARY'|t }}</p>
  
           {% include "forms/data.html.twig" %}
       {% else %}
          <div class="notices warning yellow">
             <p>{{ 'PLUGIN_FORM.NO_FORM_DATA'|t }}</p>
          </div>
       {% endif %}
  
     </div>
  {% endblock %}
  

Tweak the above css to your own liking and have fun with it!

[daredevil]

@anon76427325

#contact, .thankyou {
  margin: 0 auto;    /* this will center the element */
  /* by default element will take the full width of the grid */
}

@media screen and (min-width: 768px) {
  /* When width of screen is >= 768px */
  #contact, .thankyou {
     max-width: 66%;   /* the element will occupy 2/3 of grid */
  }
}
@media screen and (min-width: 1024px) {
  /* When width of screeen is >= 1024px */
  #contact, .thankyou {
      max-width: 50%;  /*    /* the element will occupy 1/2 of grid */
  }
}

Thanks very much, I’ll give it a go, you really are helping me, hopefully soon I’ll have a good grip on all this.